DOM 全称是 Document Object Model，也就是文档对象模型。DOM是针对HTML和XML文档的一个API(应用程序编程接口)。DOM秒回了一个层次化的节点数，允许开发人员添加、移除和修页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML)，单现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。 —- 《JavaScript高级程序设计》

几个需要了解的前置知识

  • 节点层次

    DOM可以将任何HTML或XML文档秒回成一个由多层节点构成的结构。即DOM结构把HTML结构抽象成一个树形结构。

以一段HTML为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--Document-->
<html>                       
<!--Element html  根节点 即root节点-->
    <head>
    <!--Element head-->
        <title>
        <!--Element title-->
            Example
            <!--Text Example-->
        </title>
    </head>
    <body>
    <!--Element body-->
        <div>
        <!--Element div-->
            <span>
            <!--Element span-->
                你好
                <!--Text 你好-->
            </span>
        </div>
    </body>
</html>

通过上面的方法可以将这个简单的HTML文档表示为一个层次结构。

DOM有什么用

可以通过操作DOM修改页面内容

1
2
3
4
5
6
7
8
9
<html>
<div id="xxx">
</div>
</html>

<script>
let xxx = document.getElementById('xxx')
xxx.innerText = "你好"
</script>
  • 上述通过document.getElementById()API来获取到HTML文件中ID为xxx的元素的节点
  • 通过Node.innerTextAPI来改变ID为xxx元素里的内容
  • 由此可见,我们可以通过操作DOM来修改页面内容(虽然DOM API真的很难用)

DOM增删改查的方法

  • 添加元素
方法 含义
Document.createElement() 创建元素
Document.createTextNode() 创建一个新的文本节点
Document.createAttribute() 创建并返回一个新的属性节点
Document.createComment() 创建并返回一个注释节点
Document.createDocumentFragment() 创建一个新的空的文档片段
  • 删除元素
方法 含义
Element.removeAttribute() 从元素中删除指定的属性
Element.removeChild() 删除子元素
ChildNode.remove() 删除元素
Child.parentNode.removeChild(child) 不确定父元素时可这样删除子元素
  • 修改元素
方法 含义
Node.innerText 修改元素文本内容
Element.innerHTML 设置或获取描述元素后代的HTML语句
node.cloneNode() 拷贝元素(包括所有属性和值)
Element.setAttribute() 设置或者改变指定属性并指定值
style.property = new style 修改元素CSS属性值
Node.replaceChild() 替换子节点
Node.classList.add() 给指定元素添加一个class
Node.classList.remove() 给指定元素删除一个class
  • 查找元素
方法 含义
attribute.getAttribute() 返回元素的指定属性值
Document.getElementsByClassName() 返回一个节点列表（数组），包含了所有拥有指定 class 的子元素
Document.getElementsByName() 返回带有指定名称的对象集合
Document.getElementsByTagName() 返回带有指定标签名的对象集合
Document.getElementById() 返回对拥有指定id的元素引用
Document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素
Document.querySelectorAll() 返回与指定的选择器组匹配的文档中的元素列表

总结

DOM API难操作,东西太多太杂,而且很反人类,在实际工作中,我推荐还是使用jQuery来做操作。

__END__

o0Chivas0o
文章作者：o0Chivas0o
文章出处：DOM的增删改查
作者签名：Rich ? DoSomethingLike() : DoSomethingNeed()
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处