javascript中DOM集锦（二）

2018-06-24 00:25:41来源：未知阅读 ()

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <script type="text/javascript">
 7     window.onload=function(){
 8         var oUl=document.getElementById("ul1");
 9         var list=oUl.childNodes;
10         // console.log(list);
11         var arr=convertToArray(list);
12         // console.log(arr);
13         var arrList=getElementList(arr,1);
14         // console.log(arrList);
15 
16         //使用appendChild添加子节点
17         var returnNode=oUl.appendChild(arrList[0]);
18         // alert(returnNode==arrList[0]);
19         alert(oUl.firstChild.nextSibling);
20         alert(oUl.firstChild.nextElementSibling);
21         console.log(oUl.lastChild);
22 
23 
24 
25 
26         //将获得的字节点转为数组
27         function convertToArray(nodes){
28             var array=null;
29             try{
30                 array=Array.prototype.slice.call(nodes,0);
31             }catch(ex){
32                 array=new Array();
33                 for(var i=0,len=nodes.length;i<len;i++){
34                     array.push(nodes[i]);
35                 }
36             }
37             return array;
38         }
39 
40         //将元素节点加入到数组中
41         function getElementList(arr,value){
42             var arrList=new Array();
43             for(var i=0,len=arr.length;i<len;i++){
44                 if(arr[i].nodeType==value){
45                     arrList.push(arr[i]);
46                 }
47             }
48             return arrList;
49         }
50 
51     }
52     </script>
53 </head>
54 <body>
55     <ul id="ul1">
56         <li>111</li>
57         <li>222</li>
58         <li>333</li>
59     </ul>
60 </body>
61 </html>

1、appendChild是给父节点添加子节点，当添加的子节点已经是父节点下的子节点的时候，那么被添加的子节点的原来位置就会被顶上，而新增的子节点会成为父节点下的最后一个子节点。

注：在笔者实际的操作过程中，当使用nextSibling查询某个子节点的兄弟节点的时候，返回的是文本节点，也就是说，谷歌浏览器将文本节点视为一类子节点的集合，所以返回的子节点就是本文节点，而使用nextElementSibling返回的则是元素节点，不过这个属性在IE下是不起作用的。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script type="text/javascript">window.onload=function(){var oUl=document.getElementById("ul1");var list=oUl.childNodes;// console.log(list);var arr=convertToArray(list);// console.log(arr);var arrList=getElementList(arr,1);// console.log(arrList);
//使用appendChild添加子节点var returnNode=oUl.appendChild(arrList[0]);// alert(returnNode==arrList[0]);alert(oUl.firstChild.nextSibling);alert(oUl.firstChild.nextElementSibling);console.log(oUl.lastChild);

//将获得的字节点转为数组function convertToArray(nodes){var array=null;try{array=Array.prototype.slice.call(nodes,0);}catch(ex){array=new Array();for(var i=0,len=nodes.length;i<len;i++){array.push(nodes[i]);}}return array;}
//将元素节点加入到数组中function getElementList(arr,value){var arrList=new Array();for(var i=0,len=arr.length;i<len;i++){if(arr[i].nodeType==value){arrList.push(arr[i]);}}return arrList;}
}</script></head><body><ul id="ul1"><li>111</li><li>222</li><li>333</li></ul></body></html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有