一、DOM介绍
DOM:Document Object Model
文档对象模型，用来表示和操作html或xml文档内容的基础API；
当网页被加载时，浏览器会创建对应的文档对象模型，而DOM模型被构造为对象的树（DOM Html Tree 简称DOM树，详见资料res）
DOM包含了所有的html标签、文本字符串、甚至时html注释。
利用DOM中的属性和方法，使程序有能力动态的访问和更新文档中的内容、结构及样式，这样就使得页面的交互性大大的增强。
DOM节点属性：
nodeName 节点名称
nodeValue 值，只有注释、文本等节点有
nodeType 节点类型
返回的是一个数字 文档document - 9 元素element - 1 属性attribute - 2 文本text - 3
注释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>呵呵<!--这是注释--></li> 10 <li>哈哈</li> 11 <li>嘿嘿</li> 12 <li>嘻嘻</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节点名称：",list.nodeName,'值：',list.nodeValue,'节点类型:',list.nodeType);//list节点名称： UL 值： null 节点类型: 1 21 22 //获取第一个子元素 23 var li1 = list.firstElementChild; 24 console.log("li1节点名称",li1.nodeName,"值：",li1.nodeValue,"节点类型：",li1.nodeType)//li1节点名称 LI 值： null 节点类型： 1 25 //获取第一个子节点 26 var fc = li1.firstChild; 27 console.log("fc节点名称",fc.nodeName,"值：",fc.nodeValue,"节点类型：",fc.nodeType)//fc节点名称 #text 值： 呵呵 节点类型： 3 28 //获取最后一个子节点 29 var fc2 = li1.lastChild; 30 console.log("fc2节点名称",fc2.nodeName,"值：",fc2.nodeValue,"节点类型：",fc2.nodeType)//fc2节点名称 #comment 值： 这是注释 节点类型： 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> |