javaScriptWebAPI-03
Posted huasongweb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScriptWebAPI-03相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title >javascriptAPI04</title> 6 </head> 7 <body > 8 <div>一对一</div> 9 <div>二对二</div> 10 <div id="cs3">三对三</div> 11 <div>四对四</div> 12 <div>五对五</div> 13 <div id="dv"> 14 <p>P</p> 15 <ul id="uu"> 16 <li>1</li> 17 <li>2</li> 18 <li>3</li> 19 <a href="javascript:void(0)";>123123</a> 20 </ul> 21 <span>Span</span> 22 </div> 23 24 <ul id="ul01"> 25 26 </ul> 27 <script > 28 29 // DOM 文档树 30 31 // 在DOM树种,所有数据都是节点,HTML是一个根节点,每个元素是一个元素节点,每个属性是一个属性节点,每个文本是一个文本节点 32 33 // 其中,节点有三个属性 34 // nodeType:其中,节点nodeType的值1,表示当前节点是一个标签节点,值为2,表示为属性节点,值为3表示为文本节点 35 // nodeName:如果值为大写的,则是标签的名字,如果值为小写的,则是属性的名字,如果是#text,则为文本节点 36 // nodeValue:标签节点的值为Null,属性节点的值为属性,文本节点的值为文本 37 38 // 父子节点只有标签可以作为 39 40 41 42 // firstElementChild 在IE8 和 IE9 和 safari 浏览器下回存在兼容问题,解决: 43 // firstElementChild 在IE8 和 IE9 和 safari 浏览器下回存在兼容问题,解决: 44 // firstElementChild 在IE8 和 IE9 和 safari 浏览器下回存在兼容问题,解决: 45 46 function getfirstElementChild(Element){ 47 var node, nodes = Element.childNodes, i = 0; 48 while (node = nodes[i++]) { 49 if (node.nodeType === 1) { 50 return node; 51 } 52 } 53 return null; 54 } 55 56 //运用,比如说获取id为dv下面的第一个li元素 57 58 var dv = document.getElementById("dv"); 59 60 var dv01 = getfirstElementChild(dv); 61 console.dir(dv01); 62 63 64 var uu = document.getElementById("uu"); 65 // console.log(uu); 66 //------------------------- 67 68 // 当前节点的父节点 69 70 console.log(uu.parentNode); 71 72 //当前节点的父元素 73 74 console.log(uu.parentElement); 75 76 //获取当前节点的子节点,多个,可便利 77 78 console.log(uu.childNodes); 79 80 //获取当前节点的子元素,可便利 81 82 console.log(uu.children); 83 84 //获取当前节点的第一个子节点: 85 86 console.log(uu.firstChild); 87 88 //获取当前节点的第一个子元素: 89 90 console.log(uu.firstElementChild); 91 92 //获取当前节点最后一个子节点: 93 94 console.log(uu.lastChild); 95 96 // 获取当前节点最后一个子元素 97 98 console.log(uu.lastElementChild); 99 100 //获取某一个节点的前一个节点 101 102 var cs3 = document.getElementById("cs3"); 103 104 console.log(cs3.previousSibling); 105 106 //获取某一元素的前一个元素节点 107 108 console.log(cs3.previousElementSibling); 109 110 //获取摸一个元素的后一个节点 111 112 console.log(cs3.nextSibling); 113 114 //获取摸一个元素的后一个元素节点 115 116 console.log(cs3.nextElementSibling); 117 //----------------------------------------------------------- 118 119 //获取当前节点的属性,打印nodeType.nodeName.nodeValue; 120 121 var node = uu.getAttributeNode("id"); 122 console.log(node.nodeType,node.nodeName,node.nodeValue); 123 124 125 //动态创建元素 126 127 document.write();//回覆盖掉页面之前的内容 128 // element.innerHTML; 129 // document.createElement(); 130 131 132 var cc = document.createElement("p"); 133 134 cs3.appendChild(cc);//apendchild 追加子元素的意思,嵌套到父亲下面; 135 136 137 //通过document.createElement创建li,并且添加到ul里面 138 139 var datas = ["A","B","C","D"]; 140 141 var ul01 = document.getElementById("ul01"); 142 143 144 var fn = function() { 145 console.log(123); 146 for(var i = 0;i<ul01.children.length;i++) { 147 ul01.children[i].style.backgroundColor = "white"; 148 149 } 150 this.style.backgroundColor = "pink"; 151 } 152 153 154 155 //根据datas数组给ul01添加li,并添加鼠标悬浮高亮显示. 156 for(var i = 0;i<datas.length;i++) { 157 var li = document.createElement("li"); 158 159 ul01.appendChild(li); 160 li.innerText = datas[i]; 161 162 li.onmousemove = fn; 163 } 164 165 166 //删除子元素removeChild()//删除子元素 167 168 // xx.removeChild("li"); 169 </script> 170 </body> 171 </html>
以上是关于javaScriptWebAPI-03的主要内容，如果未能解决你的问题，请参考以下文章