<!doctype html>
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<label for="txtname" id="lbl">昵称：</label>
<input id="txtname" type="text"/><br />
<textarea id="txtcomment" rows="5" cols="20">
</textarea>
<input type="button" id="btncomment" value="评论"/>
<script type="text/javascript">
var btncomment = document.getelementbyid('btncomment');
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div{
margin:1px;
padding:1px;
}
</style>
</head>
<body>
<div id="div1">玉皇</div>
<div id="div2">小水晶</div>
<div id="div3">西门</div>
<div id="div4">福娃</div>
<div id="div5">火神</div>
<script type="text/javascript">
var divarr = document.getelementsbytagname('div');
for (var i = 0; i < divarr.length; i++) {
divarr[i].style.borderstyle = 'solid';
divarr[i].style.bordercolor = 'red';
}
</script>
<table border="1" width="200;" height="80">
<tr name='tr1'>
<td onclick="onclick()" width="100;" height="40">折扣价</td>
<td onclick="onclick()" width="100;" height="40">出发日期</td>
</tr>
<tr name='tr2'>
<td onclick="onclick()" width="100;" height="40">$267</td>
<td onclick="onclick()" width="100;" height="40">2015-06-05</td>
</tr>
</table>
<script type="text/javascript">
var tdarr = document.getelementsbytagname('td');
for (var i = 0; i < tdarr.length; i++) {
tdarr[i].onclick = function () {
var src = window.event.srcelement; //当前对象
var parent = src.parentelement;
var bgcolor = parent.style.backgroundcolor;
if(bgcolor == 'red')
{
parent.style.backgroundcolor = '#ffffff';
}
else {
parent.style.backgroundcolor = 'red';
}
}
}
</script>
<div id="div+">
<input type="button" id="btn" value="better" onclick="clickchange(this)"/>
</div>
<script type="text/javascript">
var clickchange = function (o) {
var mydiv = document.getelementbyid('div+');
var src = window.event.srcelement;
var txt = document.createelement('input');
txt.type = 'text';
txt.style.width = '30';
txt.style.bordercolor = 'red';
//mydiv.insertbefore(txt, src);
mydiv.appendchild(txt); //添加一个新元素
}
</script>
<label for="txtname" id="lbl">name：</label>
<input id="txtname" type="text"/>
<input type="button" id="btnadd" value="add" onclick="addchange"/><br />
<table id="table">
<!--<tr>
<td>小水晶</td>
<td><input type="button" name="btndel" value="delete"/><br /></td>
</tr>
<tr>
<td>妞妞</td>
<td><input type="button" name="btndel" value="delete"/><br /></td>
</tr>-->
</table>
<script type="text/javascript">
var addchange = document.getelementbyid('btnadd');
var table = document.getelementbyid('table');
btnadd.onclick = function () {
var tr = document.createelement('tr');
var td = document.createelement('td');
var txtname = document.getelementbyid('txtname');
var txt = document.createelement('input');
txt.setattribute('value', txtname.value);
var btn = document.createelement('input');
btn.setattribute('type', 'button');
btn.setattribute('value', 'delete');
btn.onclick = function () {
var src = window.event.srcelement;
var fa = src.parentnode;
var grandfa = fa.parentnode;
table.removechild(grandfa);
}
td.appendchild(txt);
td.appendchild(btn);
tr.appendchild(td);
table.appendchild(tr);
}
</script>
</body>
</html>
btncomment.onclick = function ()
{ var lbl = document.getelementbyid('lbl'); var txtname = document.getelementbyid('txtname');
var txtcomment = document.getelementbyid('txtcomment');
var comment = txtname.value + ":" + txtcomment.value;
var divcomment = document.createelement('div');
divcomment.innerhtml = comment; document.body.insertbefore(divcomment, lbl);
} </script> </body> </html>
以上就是分享dom的一个实例代码的详细内容。