Dom模型
1.dom之对象分类
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>对象分类</title> 6 7 </head> 8 <body> 9 <div id="div1"> 10 <div ></div> 11 <p></p> 12 </div> 13 <script type="text/javascript"> 14 15 /*在DOM(文档对象模型中，也是一切都是对象，但是范围很小，就只有几个 16 1.document object 17 2.element object 18 3.text object 19 4.attribute object 20 5.comment object 21 5个对象封装到一个Node object中。node object有 22 自己的节点属性： 23 attribute；nodeType;nodeName;nodeValue;innerHTML; 24 导航属性： 25 parentNode 26 firstChild 27 lastChild 28 childNodes 29 由于上面的5个属性都是封装到一个Node Object中，所以我们可以直接使用这些属性。/ 30 */ 31 var ele=document.getElementById("div1"); 32 //自身属性 33 console.log(ele.nodeName); 34 console.log(ele.nodeType); 35 console.log(ele.nodeValue); 36 //导航属性之firstChild 37 var ele2=ele.firstChild; 38 alert(ele2.nodeName);//#text 结果令人惊讶，原来2个div之间有一些空格，这些就是造成是文本的原因 39 40 var ele3=ele.childNodes; 41 alert(ele3.length);//5，js把空白区域当成了文本 42 var parent=ele.parentNode; 43 alert(parent); 44 </script> 45 </body> 46 </html>
2.dom对象模型的根据文档树结构进行导航。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>对象分类</title> 6 7 </head> 8 <body> 9 <div id="div1"> 10 <div ></div> 11 <p></p> 12 </div> 13 <script type="text/javascript"> 14 15 /*在DOM(文档对象模型中，也是一切都是对象，但是范围很小，就只有几个 16 1.document object 17 2.element object 18 3.text object 19 4.attribute object 20 5.comment object 21 5个对象封装到一个Node object中。node object有 22 自己的节点属性： 23 attribute；nodeType;nodeName;nodeValue;innerHTML; 24 导航属性： 25 parentNode 26 firstChild 27 lastChild 28 childNodes 29 由于上面的5个属性都是封装到一个Node Object中，所以我们可以直接使用这些属性。/ 30 */ 31 var ele=document.getElementById("div1"); 32 /* //自身属性 33 console.log(ele.nodeName); 34 console.log(ele.nodeType); 35 console.log(ele.nodeValue); 36 //导航属性之firstChild 37 var ele2=ele.firstChild; 38 alert(ele2.nodeName);//#text 结果令人惊讶，原来2个div之间有一些空格，这些就是造成是文本的原因 39 40 var ele3=ele.childNodes; 41 alert(ele3.length);//5，js把空白区域当成了文本 42 var parent=ele.parentNode; 43 alert(parent);*/ 44 //既然firstChild不行，但是firstElementChild可以 45 var ele_son=ele.firstElementChild; 46 alert(ele_son.nodeName); 47 //lastElementChild 48 var last=ele.lastElementChild; 49 alert(last.nodeName); 50 //所有节点children 51 var ele_nodes=ele.children; 52 alert(ele_nodes.length); 53 alert(ele_nodes[0].nodeName); 54 55 for(var i=0;i<ele_nodes.length;i++){ 56 console.log(ele_nodes[i].nodeName); 57 } 58 //nextElementSibling,兄弟元素节点，记住没有空白文档 59 60 var sib=ele.firstElementChild; 61 console.log(sib.nextElementSibling.nodeName); 62 </script> 63 </body> 64 </html>
3.全局查找和局部查找
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>查找</title> 6 </head> 7 <body> 8 <div id="div1">hello 9 <div class="div2">hello2</div> 10 <div class="div3" name="lizebo">hello3 11 <p>hello inner</p> 12 <p id="p1">world innerhtml</p> 13 </div> 14 <p>hello,browser</p> 15 </div> 16 <script type="text/javascript"> 17 //这里注意一下啊，这里为什么是elements,而不是element。这是有意义的，因为 18 //设计者知道以class命名元素可能有多个，而id只能有一个。 19 //1.通过id 选择器:document.getElementById(); 20 //2.通过class选择器 21 var ele=document.getElementsByClassName("div2"); 22 console.log(ele[0].nodeName); 23 console.log(ele[0].innerHTML); 24 //3通过tag 25 var tagnames=document.getElementsByTagName("p"); 26 console.log(tagnames); 27 console.log(tagnames[0].innerHTML); 28 //4.通过名字,虽然用的不多，但是可以用这个 29 var names=document.getElementsByName("lizebo"); 30 console.log(names[0].nodeName); 31 32 /*局部去找也就是不通过document找，那么只有用element了,都差不多，这个怎么方便怎么用。*/ 33 var els=document.getElementsByClassName("div3")[0]; 34 var jubu=els.getElementsByTagName("p"); 35 console.log(jubu[0].innerHTML); 36 37 38 </script> 39 </body> 40 </html>
