JavaScript源码笔记（第七天）—爱创课堂专业前端培训

一、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