本博客主要介绍内容如下:
1、DOM是什么;
2、DOM中的Node接口的属性;
3、DOM中的Node接口的方法;
4、DOM中的Document接口的属性;
5、DOM中的Document接口的方法
1、DOM是什么
- 文档对象模型DOM英文全称 Document Object Model,是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来;
- DOM遵循W3C DOM 和WHATWG DOM标准;
- 所有操作和创建web页面的属性,方法和事件都会被组织成对象的形式;
- DOM 并不是一个编程语言;
- 不同的浏览器都有对DOM不同的实现, 这些实现对当前的DOM标准而言,都会呈现出不同程度的一致性,每个web浏览器都会使用一些文档对象模型,从而使页面可以被脚本语言访问;
- 许多对象都实现了多个接口(API)供使用;
- 重要的数据类型:
- document
- element
- nodeList
- attribute
- namedNodeMap
详细可以查看MDN链接
DOM概述developer.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
通过一张图来加深了解
DOM中的D就是Document,代表文档结构,以一颗树的形式展示,这里都是标签名字以及文字内容。
DOM中的O就是Object,代表文档转换为对象的结构,以一颗树的形式展示,这里都是构造函数,前面有学到过构造函数.prototype就是一个对象。这里最后形成的对象都与Document中的标签和文字一一对应。
![4bb2df653947f32f8c34096ef55f1030.png](https://i-blog.csdnimg.cn/blog_migrate/3a7e0fbb545887b216b7145ec6d94552.jpeg)
另外文本节点构成的对象后面其实还有String构造函数构造的对象
![2551ff5262fdfdf173ab0531de032257.png](https://i-blog.csdnimg.cn/blog_migrate/d066425754dd720ee004544c46f13bf5.jpeg)
所以页面中的节点通过构造函数,构造出对应的对象,这就是DOM的主要功能。
我们继续在浏览中测试一下该对象是否相等。
在浏览器中文档是window.document,也可以直接写成document,这里的第一个d是小写。
而Document作为构造函数,第一个D是大写的。
![78bafb9709da67e19265acdb4bf3b6a5.png](https://i-blog.csdnimg.cn/blog_migrate/2152e203ff5795a0a700fee21754f07c.jpeg)
文档中的每一个标签都可以用一个对象来代替
![2c163cea9e97befd48dfd7464ca52dc6.png](https://i-blog.csdnimg.cn/blog_migrate/e41b443b25fb7d01fd1f7e12d1d30c2f.jpeg)
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数
通过上面的图和文字介绍,于是我可以知道JavaScript可以访问和操作存储在DOM中的内容,因此我们可以写成这个近似的等式:
API (web 或 XML 页面) = DOM + JS (脚本语言)
以上的接口都是构造函数,我们通过typeof 来测试
![c79b4585cadc5d7ce8fbddda12df45ce.png](https://i-blog.csdnimg.cn/blog_migrate/f603a02c373e8f7044c3ad583491c874.jpeg)
从上面的构造函数的情况来看们主要后缀就是分为Document、Element、Text
- Document——根据文档的类型(例如HTML,XML,SVG,...)分为HTMLDocument接口(使用"text/html"内容类型)和XMLDocument接口(XML和SVG文档);
- Element——是非常通用的基类,所有
Document
对象下的对象都继承它,根据类型还可以分为HTMLElement接口(所有HTML元素的基础接口)、SVGElement接口(是所有SVG元素的基本接口)、XULElement接口(在web以外的语言,像 XUL); - Text——代表
Element或Attr
的文本内容的文本内容 ;
那么既然HTML文档中有所有的标签都可以转换成对应的对象,作为对象肯定会有原型(公用属性)。
1、document的原型链
Documentdeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
document分为HTML文档、XML和SVG文档,HTML文档实现了HTMLDocument接口,而XML和SVG文档实现了XMLDocument接口;
主要测试HTMLDocument接口
![1a6d0ff8c91d7c5f744b17fa0c089620.png](https://i-blog.csdnimg.cn/blog_migrate/7de134867b46c0a85f2413b7970b346c.jpeg)
2、Element的原型链
Elementdeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
Element根据类型还可以分为HTMLElement接口(所有HTML元素的基础接口)、SVGElement接口(是所有SVG元素的基本接口)、XULElement接口(在web以外的语言,像 XUL)
主要测试HTMLDocument接口
![ee5619e2f8fe29efb206fc0fe5fe9370.png](https://i-blog.csdnimg.cn/blog_migrate/8f79d70527a1a890f77eeb7388de5995.jpeg)
3、Text的原型链
Textdeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
Text包括了Element或Attr的文本内容的文本内容
这里主要测试Element的接口
![b834be3e0297e1f64b3c04fc121f7542.png](https://i-blog.csdnimg.cn/blog_migrate/f43ea51d1b8b98e5fcc51c5f0e6f29fd.jpeg)
他们最终都是引用Object构造函数所构造的对象,这跟前面说的JavaScript的几种基本类型的原型链一致。
bomber:《Global Object、公用属性(原型)、prototype和__proto__》zhuanlan.zhihu.com所以我们可以看到document、Element、Text原型链总结图,他们在引用Object.prototype之前都引用了Node.prototype。
![da0673199b8ac29ae8befe3c9b7397cc.png](https://i-blog.csdnimg.cn/blog_migrate/a56f1ec5ed1eadce8858e9259864ddaa.jpeg)
我们终于引出了Node
Nodedeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
Node
是一种被多种DOM类型继承的接口接口,它允许各种类型的DOM能以同样的方式来操作。除了上面三种Document、Element、Text继承了Node,还有很多。
Node继承自EventTarget,而继承Node的属性和方法的接口则有:Document,Element,Attr,CharacterData(Text,Comment,和CDATASection继承原型自CharacterData),ProcessingInstruction,DocumentFragment,DocumentType,Notation,Entity,EntityReference 。
Node就可以代表其他的类型
Node.nodeTypedeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
![223d1609db30ac64fcde7ef606fe13f8.png](https://i-blog.csdnimg.cn/blog_migrate/8a4b9c658803b3dbc08d44b3f47afac1.jpeg)
我们在浏览器上测试几个:
文本节点
![49cef631dc52d8359e18275885c6c94d.png](https://i-blog.csdnimg.cn/blog_migrate/2d8255572037f5769409ba23757bfad0.jpeg)
元素(标签)节点
![d7cd9c9dabdeebbe19888ad9ff322164.png](https://i-blog.csdnimg.cn/blog_migrate/dcc2353be82a18c30a5d0bcaf8f13103.jpeg)
文档节点
![b0446d98021f343628995a5f90f8ae71.png](https://i-blog.csdnimg.cn/blog_migrate/c7b3128158b6a2b009eeed0858a4c98f.jpeg)
所以DOM 是一棵树(tree),树上有 Node,Node 分为 Document(html)、Element(元素)和 Text(文本),以及其他不常用的。
2、DOM中的Node接口的属性
我们在讨论Node有哪些接口(API)的时候,其实是在讨论DOM树中的所有对象有哪些接口(API)
Nodedeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
常用的:
- childNodes
- firstChild
- innerText
- lastChild
- nextSibling
- nodeName
- nodeType
- nodeValue
- outerText
- ownerDocument
- parentElement
- parentNode
- previousSibling
- textContent
(1)childNodes
Node.childNodesdeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
Node.childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合(live collection)。
需要注意的是返回的子节点包括回车,回车也是一个文本节点。
![585629a7463f91fb6a334723f4d77e61.png](https://i-blog.csdnimg.cn/blog_migrate/c4f2fc2529f63bb368a8fda33f7eadc3.jpeg)
(2)children
ParentNode.childrendeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
ParentNode.children
是一个只读属性,返回 一个Node的子elements
,是一个动态更新的 HTMLCollection
。它是一个伪数组。
它返回的全是元素(标签)节点,没有文本节点
![c10666840769a8c46f24ad53212ae0e2.png](https://i-blog.csdnimg.cn/blog_migrate/d23b7f2964e4321d277f05d91484a3a3.jpeg)
(3)parentNode返回父节点(可能是元素或者非元素节点)
ParentNodedeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
ParentNode
是一个原始接口,不能够创建这种类型的对象;它在Element
、Document
和DocumentFragment
对象上被实现。
如果上个父元素是一个元素节点,会返回元素节点。
![fddc050cc91a706352dbc4f7e64eeff9.png](https://i-blog.csdnimg.cn/blog_migrate/37a9b24c9c94910e0aa00187cdfb0e77.jpeg)
如果上个父元素是一个非元素节点,比如文档节点,会返回文档节点。
![3a43989b396f32d3ebe0a4480081e41e.png](https://i-blog.csdnimg.cn/blog_migrate/a084e6a1d9dc74cb6f2b13c8096040a6.png)
(4)parentElement返回父元素节点
Node.parentElementdeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个 DOM元素
,则返回null
。
如果上个父元素是一个元素节点,会返回元素节点。
![1571aacaf82952e76177701f6c06562d.png](https://i-blog.csdnimg.cn/blog_migrate/10379ce2be1f4f0eb7467cb5d9437eba.jpeg)
如果上个父元素是一个非元素节点,比如文档节点,会返回null
![be1245cf50c90a064cb537bc1309e554.png](https://i-blog.csdnimg.cn/blog_migrate/c40de6d311b6d87069a7a9c6f9106c8e.png)
(5)parentElement返回父元素(标签)节点
Node.parentElementdeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个 DOM元素
,则返回null
。
![ffe3a7900553c1a45cc9d8add03bedca.png](https://i-blog.csdnimg.cn/blog_migrate/1be4bc281aa5ecebb69fda116926f7ed.jpeg)
(6)第一个子节点(可能是文本或者元素节点)
Node.firstChilddeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
开发者工具上面会显示那种API来自Element或者Node
![baa604aeccc57776a984f34843a9ec7e.png](https://i-blog.csdnimg.cn/blog_migrate/9cb2d4b3df4dc9593d8101106e10bd58.jpeg)
(7)第一个是元素(标签)节点的子节点
ParentNode.firstElementChilddeveloper.mozilla.org![d08ba5f7f84c46c69b13aedf09be5572.png](https://i-blog.csdnimg.cn/blog_migrate/d66f7bb09cacc37494537603489cd2da.jpeg)
开发者工具上面会显示那种API来自Element或者Node