一、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
3
4
5
6
7
8
9
10
11
12
13
14
15
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
32
二、document对象属性
document.documentElement 获取根元素html
document.body 获取body元素
document.title 获取文档的标题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
25
三、获取元素的方法
document.getElementById() 通过id获取元素
docuement.getElementsByTagName() 通过标签名获取元素
document.getElementsByClassName() 通过类名获取元素
后面两个都是获取的类数组，即多个元素
具有length属性，具有索引，通过索引可以获取对应的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 = “这是改过后的内容”;
27 console.log(lis[3].innerHTML);
28
29
30 //通过类名获取元素
31 var item3 = document.getElementsByClassName(‘item3’)[0];
32 console.log(item3);
33
34
四、设置和获取html属性的方式
4.1 通过对象的方式设置和获取属性
obj.att || obj[‘att’]
4.2 通过get/set方式设置和获取属性
setAttribute(att,value);
getAttribute(att);
1
2
3
4
5
6
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
21
22
23
通过对象.属性的方式添加html属性
24
通过对象[属性]的方式添加html属性
25
通过setAttribute()的方式添加html属性
26
27
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
61
