DOM 的全称是" Document Object Model "，中文意思为“文档对象模型”。
就像 JS 中所有的对象都继承自 Object 一样，浏览器提供一个原生的节点对象 Node （Node 是一个函数）， DOM 的所有节点都继承自 Node ，Node 又继承自 Object，因此它们具有一些共同的属性和方法。
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。
顶层的 根节点 html 属于 Document 节点，代表整个文档；
第二层级和第三层级的属于 Element 节点，即网页的各种 HTML 标签；
第四层级的属于 Text 节点，即标签之间或标签包含的文本。
页面中的节点，通过上述不同的构造函数，构造出相应的对象。
由此可以看出 DOM 的主要作用 ：DOM 是 JavaScript *** 作网页的接口，它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种 *** 作（如增删改查）。
DOM 有自己的国际标准，目前通用版本是 DOM 3。
Node 属性有很多，用到时可以查询文档。
如果一个属性是函数，那么这个属性也叫做 方法 ；即方法是函数属性。
document对象是文档的根节点，windowdocument属性就指向这个对象。
通过 DOM API 获取到的 elements 都是伪数组。
Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个 Element 节点对象。
DOM 提供两种节点集合，用于容纳多个节点： NodeList 和 HTMLCollection 。这两种集合都属于接口规范。许多 DOM 属性和方法，返回的结果是 NodeList 实例或 HTMLCollection 实例。
节点对象除了继承 Node 接口以外，还会继承其他接口。
1DOM 介绍
2查找元素
3DOM 节点
4节点 *** 作
DOM 中的三个字母，D（文档）可以理解为整个 Web 加载的网页文档；O（对象）可
以理解为类似 window 对象之类的东西，可以调用属性和方法，这里我们说的是 document
对象；M（模型）可以理解为网页文档的树型结构。
DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为
W3C 标准。DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera17+。
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将
这种树型结构理解为由节点组成。
从上图的树型结构，我们理解几个概念，html 标签没有父辈，没有兄弟，所以 html 标
签为根标签。head 标签是 html 子标签，meta 和 title 标签之间是兄弟关系。如果把每个标签
当作一个节点的话，那么这些节点组合成了一棵节点树。
PS：后面我们经常把标签称作为元素，是一个意思。
W3C 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行 *** 作。
分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、
setAttribute()和 removeAttribute()。
getElementById()方法，接受一个参数：获取元素的 ID。如果找到相应的元素则返回该
元素的 HTMLDivElement 对象，如果不存在，则返回 null。
当我们通过 getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，
而通过这个节点对象，我们可以访问它的一系列属性。
getElementsByTagName()方法将返回一个对象数组 HTMLCollection(NodeList)，这个数
组保存着所有相同元素名的节点列表。
getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组
HTMLCollection(NodeList)。
getAttribute()方法将获取元素中某个属性的值。它和直接使用属性获取属性值的方法有
一定区别。
setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如
果属性本身已存在，那么就会被覆盖。
removeAttribute()可以移除 HTML 属性。
1node 节点属性
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，
分别为：nodeName、nodeType 和 nodeValue。
节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个
元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。
childeNodes 属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点
和文本子节点。
firstChild 用于获取当前元素节点的第一个子节点，相当于 childNodes[0]；lastChild 用于
获取当前元素节点的最后一个子节点，相当于 childNodes[boxchildNodeslength - 1]。
ownerDocument 属性返回该节点的文档对象根节点，返回的对象相当于 document。
parentNode 属性返回该节点的父节点，previousSibling 属性返回该节点的前一个同级节
点，nextSibling 属性返回该节点的后一个同级节点。
attributes 属性返回该节点的属性节点集合。
DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换
节点。
write()方法可以把任意字符串插入到文档中去。
appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。
createTextNode()方法创建一个文本节点。
insertBefore()方法可以把节点创建到指定节点的前面。
cloneNode()方法可以把子节点复制出来。
8removeChild()方法
removeChild()方法可以把
假设元素#a
那么可以得到：
let p = documentgetElementById('a');
let arr = pchildNodes;
<html>
<head>
<meta
>
以上就是关于JS 核心之 DOM全部的内容，包括:JS 核心之 DOM、18.DOM 基础、DOM中如何获取一个元素的子元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）