JavaScript学习之DOM常用

来源：互联网发布：java 6 api中文在线编辑：程序博客网时间：2024/06/14 06:44

JavaScript学习之DOM

创建、插入和删除元素

创建DOM元素
createElement （标签名）----- 创建一个节点

appendChild（节点） --------追加一个节点

<!DOCTYPE html><html><head><meta charset="utf-8"><title>DOM应用</title><script type="text/javascript">window.onload = function (){var oBtn = document.getElementById('btn1');var oUl = document.getElementById('ul1');var oTxt = document.getElementById('txt1');oBtn.onclick = function (){//创建livar oLi = document.createElement('li');//将文本框的内容添加到lioLi.innerHTML = oTxt.value;//将li添加到ul，父级.appendChild(子节点)oUl.appendChild(oLi);}}</script></head><body><!-- 输入文本框 --><input id="txt1" type="text"></input><!-- 点击按钮创建li --><button id="btn1">创建li</button><ul id="ul1"></ul></body></html>

插入元素

insertBefore（原有节点）----- 在已有的元素前插入

如上例，想要新增的li放到最前面就需要采用插入元素

oBtn.onclick = function (){//创建livar oLi = document.createElement('li');//获取ul中有的li，以便插入，我们需要知道在哪里插入var aLi = document.getElementsByTagName('li');//将文本框的内容添加到lioLi.innerHTML = oTxt.value;//将li添加到ul，父级.appendChild(子节点)//oUl.appendChild(oLi);//插入操作oUl.insertBefore(oLi,aLi[0]);}

考虑到浏览器兼容性问题，更进一下

oBtn.onclick = function (){//创建livar oLi = document.createElement('li');//获取ul中有的li，以便插入，我们需要知道在哪里插入var aLi = document.getElementsByTagName('li');//将文本框的内容添加到lioLi.innerHTML = oTxt.value;//将li添加到ul，父级.appendChild(子节点)//oUl.appendChild(oLi);//确保有第一个li元素if(aLi.length > 0){//插入操作oUl.insertBefore(oLi,aLi[0]);}else{oUl.appendChild(oLi);}}

删除DOM元素

removeChild（节点） ------- 删除一个节点

<!DOCTYPE html><html><head><meta charset="utf-8"><title>DOM删除元素</title><script type="text/javascript">window.onload = function(){var aA = document.getElementsByTagName('a');var oUl = document.getElementById('ul1');for(var i = 0; i < aA.length; i++){aA[i].onclick = function (){//把父节点li正行删除oUl.removeChild(this.parentNode);};}}</script></head><body><ul id="ul1"><li>111<a href="#">删除</a></li><li>222<a href="#">删除</a></li><li>333<a href="#">删除</a></li><li>444<a href="#">删除</a></li><li>555<a href="#">删除</a></li></ul></body></html>

删除前

删除掉2和5之后

阅读全文

0 0