DOM编程实例(不重要，可忽略)
文章目录
简介
表格增加删除，效果如下图
样式属性案例
简介
DOM---表格添加删除，样式属性案例
表格增加删除，效果如下图
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图书表格操作</title><script>function addNode(){// 获取表格对象var tab = document.getElementById('tab')// 创建tr，td节点var tr = document.createElement('tr')var td1 = document.createElement('td')td1.innerHTML="<input type='text' size='10px' onblur='seaveVal(this)'/>" //此时的节点是input，父节点是tdvar td2 = document.createElement('td')td2.innerHTML="<input type='text'size='10px' onblur='seaveVal(this)'/>"var td3 = document.createElement('td')td3.innerHTML=" <input type='button' value='添加' onclick='addNode()'/>"+"<input type='button' value='删除' onclick='removeNode(this)' />"//将创建的节点加入表格中tab.appendChild(tr)tr.appendChild(td1)tr.appendChild(td2)tr.appendChild(td3)}//获取父节点function seaveVal(thi){var td = thi.parentNodetd.innerText=thi.value}//删除节点，可以用节点的 父节点td的 父节点tr删除function removeNode(thi){var tr = thi.parentNode.parentNodetr.remove()}</script> </head> <body><table border="2px" align="center" id="tab"><tr><th >图书名称</th><th>作者</th><th>操作</th></tr><tr><td>活着</td><td>余华</td><td><input type="button" value="添加" onclick="addNode()"><input type="button" value="删除" onclick="removeNode(this)"></td></tr><tr><td>城南旧事</td><td>林海音</td><td><input type="button" value="添加" onclick="addNode()"><input type="button" value="删除" onclick="removeNode(this)"></td></tr></table></body> </html>
样式属性案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM-样式属性案例</title><style>body{background-image: url('Camera Roll/b4.jpg'); background-repeat: no-repeat;background-size: 1920px 800px;}.div1{width: 200px;height: 200px;background-color: rgb(109, 129, 122);text-align: center;align-content: center;}input{width: 40px;height: 30px;}</style><script>var i=-1function changebc(){var arr = ["b1.jpg","b2.jpg","b3.jpg"]if (i<arr.length-1){i++;}else{i=0;}document.body.style.backgroundImage="url('Camera Roll/"+arr[i]+"')"}function changeno(){// 获得标签var div1 = document.getElementById('div_1');div1.style.marginTop = Math.random()*500+"px";div1.style.marginLeft = Math.random()*800+"px";}function changeye(){document.body.style.backgroundImage = "url('Camera Roll/b1.jpg')";// 等200毫秒后再隐藏 div_1setTimeout(function () {document.getElementById('div_1').style.display = "none";}, 200); // 延迟时间可调}</script>
</head>
<body><a href="javascript:changebc()">点击更换主页</a><div class="div1" id="div_1"><h3>背景好看吗</h3><input type="button" value="是" onclick="changeye()"><input type="button" value="否" onmouseover="changeno()"></div></body>
</html>