在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。
而在dom中,标签们都属于什么节点呢?接下来看一下解析。
- 整个文档内容是一个文档节点
- 每个HTML中的元素是都是元素节点
- HTML的元素内的文本是文本节点
- 每个HTML属性是都属于属性节点
- 注释则是注释节点
而dom中的html文档则被当作节点树了。

其实这个dom说简单也是非常简单的,只要记住每个节点都有自己的匹配对象就可以了,所有的标签都是可以通过dom来获取。
简单举个例子,在<title>DOM 教程</title>中,元素节点 <title>,包含值为 "DOM 教程" 的文本节点。

其实这个dom说简单也是非常简单的,只要记住每个节点都有自己的匹配对象就可以了,所有的标签都是可以通过dom来获取。
简单举个例子,在<title>DOM 教程</title>中,元素节点 <title>,包含值为 "DOM 教程" 的文本节点。
获取节点
其实JavaScript获取节点我认为最好的是通过id来获取,document.getElementById()这个方法,通过元素的id来获取改节点,然后进行操作。随便举个例子。
<div id="aaa"></div>
<script>document.getElementById("aaa")</script>这样也就通过ById来获取该元素了。
不光可以通过id来获取对象,还可以通过class,通过tag,通过name来获取。
getElementById()
getElementsByTagName()
getElementsByClassName()
最常用的就是这三个了,其实通过原生JavaScript来获取对象不是很方便,通过jQuery来获取的话实非常容易的,不过其实各有各的好处吧。
一般操纵dom的都是方法,通过方法来对对象进行操作。
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
比如说通过点击来使一个div修改颜色,可以是通过.style来操作,其实也可以通过上面的方法来操作的,也可以通过setAttribute()来修改,亦或者通过在style里添加一个没人用的class,给里面添加想要的属性,然后通过document.getElementById("").classList.add("");这个来增加上那个class,这样就会使div获得该class内的属性了。
其实dom可以完成所有的html操作,甚至可以只写个html框架出来,然后其余的全部都靠JavaScript来进行修改的。
这个也是目前最流行的方法了,通过JavaScript来渲染页面。
今天也就简单介绍一下dom,然后如果有什么疑问可以在评论区留言,我会在看到的第一时间进行回复的。