JavaScript源码笔记（七）【爱创课堂专业前端培训】

JavaScript源码笔记（第七天）—web前端培训

 

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

 

三、获取元素的方法

document.getElementById()   通过id获取元素

docuement.getElementsByTagName()  通过标签名获取元素

document.getElementsByClassName()  通过类名获取元素

后面两个都是获取的类数组，即多个元素

具有length属性，具有索引，通过索引可以获取对应的元素

1  2  3  4   5   6  7  8   9    呵呵 10    哈哈 11    嘿嘿 12    嘻嘻 13   14  15  34

 

四、设置和获取html属性的方式

4.1 通过对象的方式设置和获取属性

obj.att  ||  obj[‘att’]

4.2 通过get/set方式设置和获取属性

setAttribute(att,value);

getAttribute(att);

1  2  3  4   5   6   21  22  23   通过对象.属性的方式添加html属性 24   通过对象[属性]的方式添加html属性 25   通过setAttribute()的方式添加html属性 26  27  61