本篇文章为大家展示了JavaScript中怎么利用DOM修改文档树,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
修改文档提供的4个方法,都是指向它们所作用的节点的引用。导航条实例:
<div id="menu"> <h2>我的导航条</h2> <ul id="nav"> <li><a href="#">HOME</a></li> <li><a href="#">(X)Html / Css</a></li> <li><a href="#">Ajax / RIA</a></li> <li><a href="#">GoF</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">JavaWeb</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">MooTools</a></li> <li><a href="#">Python</a></li> <li><a href="#">Resources</a></li> </ul> </div>
appendChild()
appendChild()方法让你添加一个节点并使其成为某个元素的***一个子节点。如果添加的该节点已经存在于文档中,它会从当前位置移除。该节点的子节点保持不变,它们也被一起移动到新的位置。
<script type="text/javascript"> window.onload=function(){ var nav=document.getElementById("nav"); //创建一个li新元素 var newChild=document.createElement('li'); //创建一个a 新元素 var newLink=document.createElement('a') //创建一个 Text 节点 var newText=document.createTextNode('My Wiki'); //把Text添加到a元素节点中 newLink.appendChild(newText); //给a元素节点设置属性href和内容 newLink.setAttribute('href',"#"); //把a元素节点添加到新的li元素节点中 newChild.appendChild(newLink); //把新的li元素节点添加到 ul 元素节点里 nav.appendChild(newChild); navnav_list=nav.getElementsByTagName("li");//返回相同的一组元素 nav.appendChild(nav_list[0]); } </script>
创建新DOM元素的通用函数
<script type="text/javascript"> function create( elem ) { return document.createElementNS ? document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) : document.createElement( elem ); } </script>
我们看到结果:
添加好的子节点
从原始位置上被移除,成为ul的***一个子节点
insertBefore()
insertBefore()方法允许你在其他节点的前面插入一个节点,所以当你想要添加一个子节点,但又不希望该节点成为***一个子节点的时候,就可以使用此方法。就像appendChild()方法一样,如果插入的节点已经存在于文档之中,它会被从当前位置移除,而且该节点在被插入之后乃保持它的子节点结构。
<script type="text/javascript"> window.onload=function(){ var nav=document.getElementById("nav"); navnav_list=nav.getElementsByTagName("li");//返回相同的一组元素 //***个节点 var x=nav_list[0]; //***一个节点 var y=nav_list[nav_list.length-1] //在x元素对象之前插入y元素对象 nav.insertBefore(y,x); //在x元素对象之前插入新生产的newChild元素对象 nav.insertBefore(newChild,x);//newChild元素对象的创建请参考上面的代码 } </script>
在其他节点的前面插入一个节点
replaceChild()
replaceChild()方法允许你把一个节点替换为另一个节点。就像appendChild()和insertBefore()一样,如果插入的节点已经存在于文档之中,它会被从当前位置移除,而且该节点在被插入之后乃保持它的子节点结构。
<script type="text/javascript"> window.onload=function(){ var nav=document.getElementById("nav"); navnav_list=nav.getElementsByTagName("li");//返回相同的一组元素 //***个节点对象 var x=nav_list[0]; //x节点对象被newChild新节点对象替换了 nav.replaceChild(newChild,x); } </script>
把一个节点替换为另一个节点
removeChild()
removeChild()方法允许你移除一个节点以及它的子节点们。
<script type="text/javascript"> window.onload=function(){ var nav=document.getElementById("nav"); navnav_list=nav.getElementsByTagName("li");//返回相同的一组元素 //***一个节点 var y=nav_list[nav_list.length-1] //移除***面的一个节点 nav.removeChild(y); } </script>
你移除一个节点以及它的子节点们
移除所有的子节点
有的时候你需要把一个元素清除干净;你想在添加新节点前清除原来的所有子点。有两个简单的方法来做这件事情:
<script type="text/javascript"> while (x.childNodes[0]){ x.removeChild(x.childNodes[0]); } /* //我们可以使用firstChild来代替childNodes[0] while (x.firstChild){ x.removeChild(x.firstChild); } * / </script>
这是一个简单的while()循环,只要元素存在***个节点(childNodes[0]),它就移除这个节点,接着节点集合立即更新。所以(原来的)第二个节点成为了***个节点,循环就会一直重复,直到X没有子节点为止。另一个方法就简单了
<script type="text/javascript"> x.innerHTML=''; </script>
辅助函数
appendChild()和insertBefore()都有2个参数,但是我们在应用的时候,还要注意参数的先后顺序。既然这么麻烦我们还是自己写一些辅助函数来代替原有的appendChild()和insertBefore()。在另一个元素之前插入元素的函数:
<script type="text/javascript"> //insertBefore()的代替方法 function before( parent, before, elem ) { // Check to see if no parent node was provided //检查parent是否传入 if ( elem == null ) { elem = before; before = parent; parent = before.parentNode; } // Get the new array of elements //获取元素的新数组 var elems = checkElem( elem ); // Move through the array backwards, // because we’re prepending elements //向后遍历数组 //因为我们向前插入元素 for ( var i = elems.length - 1; i >= 0; i-- ) { parent.insertBefore( elems[i], before ); } } </script>
为另一个元素添加一个子元素:
<script type="text/javascript"> //appendChild()的代替方法 function append( parent, elem ) { // Get the array of elements //获取元素数组 var elems = checkElem( elem ); // Append them all to the element //把它们所有都追加到元素中 for ( var i = 0; i <= elems.length; i++ ) { parent.appendChild( elems[i] ); } } </script>
before和append的辅助函数:
<script type="text/javascript"> function checkElem( elem ) { // If only a string was provided, convert it into a Text Node //如果只提供字符串,那就把它转换为文本节点 return elem && elem.constructor == String ? document.createTextNode( elem ) : elem; } </script>
注意:constructor的用法。
有时你可能需要对变量进行类型检查,或者判断变量是否已定义。有两种方法可以使用:typeof函数与constructor属性。typeof可以检查到变量是否有定义,而construct只能检查已定义变量的类型。
移除所有的子节点的辅助函数:
<script type="text/javascript"> function empty( elem ) { while (elem.firstChild){ remove(elem.firstChild); } /* //我们可以使用firstChild来代替childNodes[0] while (elem.childNodes[0]) remove(elem.childNodes[0]); * / } function remove( elem ) { if ( elem ) elem.parentNode.removeChild( elem ); } </script>
上述内容就是JavaScript中怎么利用DOM修改文档树,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。