A, the DOM Introduction
DOM:Document Object Model
Document object model, and it is used to indicate the operation or base API xml html document content;
When the page is loaded, the browser creates a corresponding document object model, and the model is constructed DOM object tree (DOM Html Tree referred to the DOM tree, see the information res)
DOM contains all html tags, text strings, even when html comments.
DOM properties and methods of use of the program content have the ability to dynamically access and update the document structure and style, so that makes interactive pages greatly enhanced.
DOM node properties:
nodeName node name
nodeValue values, only notes, text and other nodes have
nodeType node type
A digital document is returned document - 9 element element - 1 Attribute attribute - 2 Text text - 3
Comment comment-8
| 1 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <ul id="list"> 9 <li> Oh <! - This is a comment -> </ li> 10 <li> ha </ li> 11 <li> hey </ li> 12 <li> hee </ li> 13 </ul> 14 </body> 15 <script type="text/javascript"> 16 console.log(document.nodeType); 17 18 var list = document.getElementById("list");//9 19 20 console.log ( "list Node Name:", list.nodeName, 'Value:', list.nodeValue, 'node types:', list.nodeType); // list node name: UL Value: null node types: 1 21 22 // Get the first child 23 var li1 = list.firstElementChild; 24 console.log ( "li1 Node Name", li1.nodeName, "value:", li1.nodeValue, "Node Type:", li1.nodeType) // li1 LI value node name: null node types: 1 25 // Get the first child node 26 var fc = li1.firstChild; 27 console.log ( "fc Node Name", fc.nodeName, "value:", fc.nodeValue, "Node Type:", fc.nodeType) // fc node name #text Found: Oh Node Type: 3 28 // Get the last child node 29 was fc2 = li1.lastChild; 30 console.log ( "fc2 node name", fc2.nodeName, "value:", fc2.nodeValue, "node type:", fc2.nodeType) // fc2 node name #comment value: This is a comment node type: 8 31 </script> 32 </html> |
二、document对象属性
document.documentElement 获取根元素html
document.body 获取body元素
document.title 获取文档的标题
| 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document对象属性</title> 6 </head> 7 <body> 8 <ul id="list"> 9 <li>呵呵<!--这是注释--></li> 10 <li>哈哈</li> 11 <li>嘿嘿</li> 12 <li>嘻嘻</li> 13 </ul> 14 </body> 15 <script type="text/javascript"> 16 console.log(document.documentElement); 17 console.log(document.body); 18 console.log(document.title); 19 20 //浏览器兼容性获取视口宽度和高度 21 var aHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 22 var aWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 23 document.write("视口宽度：" + aWidth + "px"+"；高度："+aHeight + "px"); 24 </script> 25 </html> |
三、获取元素的方法
document.getElementById() 通过id获取元素
docuement.getElementsByTagName() 通过标签名获取元素
document.getElementsByClassName() 通过类名获取元素
后面两个都是获取的类数组，即多个元素
具有length属性，具有索引，通过索引可以获取对应的元素
| 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document对象属性</title> 6 </head> 7 <body> 8 <ul id="list"> 9 <li>呵呵<!--这是注释--></li> 10 <li>哈哈</li> 11 <li>嘿嘿</li> 12 <li>嘻嘻</li> 13 </ul> 14 </body> 15 <script type="text/javascript"> 16 //通过id获取元素ul 17 var list = document.getElementById('list'); 18 console.log("list:",list); 19 20 // 通过标签名获取所有的li 21 var lis = list.getElementsByTagName('li'); 22 console.log(lis);//HTMLCollection(4) [li, li, li, li] 类数组 23 24 //通过innerHTML可以获取和修改元素内的内容 25 console.log(lis[0].innerHTML); 26 lis[3].innerHTML = "<a href=''>这是改过后的内容</a>"; 27 console.log(lis[3].innerHTML); 28 29 30 //通过类名获取元素 31 var item3 = document.getElementsByClassName('item3')[0]; 32 console.log(item3); 33 </script> 34 </html> |
四、设置和获取html属性的方式
4.1 通过对象的方式设置和获取属性
obj.att || obj[‘att’]
4.2 通过get/set方式设置和获取属性
setAttribute(att,value);
getAttribute(att);
| 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document对象属性</title> 6 <style type="text/css"> 7 .p1-set{ 8 background: red; 9 } 10 11 .p2-set{ 12 color: orange; 13 font-size: 20px; 14 } 15 16 .p3-set{ 17 font-family: "楷体"; 18 font-weight: 900; 19 } 20 </style> 21 </head> 22 <body> 23 <p id="p1" data-set="hhh" ss="ss">通过对象.属性的方式添加html属性</p> 24 <p id="p2">通过对象[属性]的方式添加html属性</p> 25 <p id="p3">通过setAttribute()的方式添加html属性</p> 26 </body> 27 <script type="text/javascript"> 28 var p1 = getId("p1"); 29 var p2 = getId("p2"); 30 var p3 = getId("p3"); 31 32 console.log("p3",p3); 33 34 //obj.att 35 p1.className = "p1-set"; 36 p1.align = 'center'; 37 console.log(p1.id); 38 39 p1.mydefined = "hello"; 40 console.log(p1.mydefined ) 41 42 //obj["att"] 43 p2["className"] = "p2-set"; 44 p2['data-defined'] = "world"; 45 console.log(p2['data-defined']); 46 47 48 //get/set方法 49 p3.setAttribute("class",'p3-set'); 50 console.log(p3.getAttribute('id')); 51 p3.setAttribute("aaa",'111'); 52 p3.setAttribute("data-defined",'mydefined'); 53 54 console.log(p1.getAttribute('data-set')); 55 console.log(p1.getAttribute('ss')); 56 57 function getId(id){ 58 return document.getElementById(id); 59 } 60 </script> 61 </html> |