分享DOM的一个实例代码
程序员文章站
2022-04-12 13:06:13
...
<!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的一个实例代码的详细内容，更多请关注其它相关文章！