DOM简介
DOM
全称document object model
文档
整个HTML文件就是一个文档
对象
HTML文件中的每个节点都在JS中是一个对象
模型
JS使用模型来表示各个对象之间的关系
- 在网页中浏览器已经为我们提供了
document
对象,它代表的是整个网页,它是window
对象的属性,可以在页面中直接使用。 DOM
中的对象又称为节点对象
,共有4种节点分别为:
nodeName | nodeType | nodeValue | |
---|---|---|---|
文档节点 | #document | 9 | null |
元素节点 | 标签名 | 1 | null |
属性节点 | 属性名 | 2 | 属性值 |
文本节点 | #text | 3 | 文本内容 |
document
document
常用属性:body
该属性封装的是body
元素对象的引用documentElement
属性值为HTML
元素对象all
属性值为当前页面中的所有元素节点的数组
- 常用方法:
getElementById()
通过ID
值获取对应的节点getElementsByTagName()
通过标签名
获取一组节点- 返回值是一个
HTMLCollection
,与数组相似,不能使用forEach方法,即使只获取到一个节点时,也封装成HTMLCollection返回
- 返回值是一个
getElementsByName()
通过name
的值获取一组节点- 返回值是一个
nodelist
,与数组相似,可以使用forEach方法,即使只获取到一个节点时,也封装成nodelist返回
- 返回值是一个
getElementsByClassName()
通过class
属性获取一组节点- 返回值是一个
HTMLCollection
,与数组相似,不能使用forEach方法,即使只获取到一个节点时,也封装成HTMLCollection返回 - 仅支持
IE8
以上
- 返回值是一个
querySlector()
通过CSS选择器
返回一个节点,当能匹配多个节点时,返回满足匹配的第一个节点
- 仅支持
IE7
以上
- 仅支持
querySlectorAll()
通过CSS选择器
返回一组节点- 返回值是一个
nodelist
,与数组相似,可以使用forEach方法,即使只获取到一个节点时,也封装成nodelist返回 - 仅支持
IE7
以上
- 返回值是一个
元素节点
- 读取元素的属性:
- 语法:
元素.属性名
如:ele.name、ele.id class
属性不能采用这种方式,读取class
属性时需要使用元素.className
- 语法:
- 常用方法:
getElementById()
通过ID
值获取当前元素节点内部对应的节点getElementsByTagName()
通过标签名
获取当前元素节点内部的特定标签的元素节点- 返回值是一个
HTMLCollection
,与数组相似,不能使用forEach方法,即使只获取到一个节点时,也封装成HTMLCollection返回
- 返回值是一个
getElementsByName()
通过name
的值获取当前元素节点内部的一组节点- 返回值是一个
nodelist
,与数组相似,可以使用forEach方法,即使只获取到一个节点时,也封装成nodelist返回
- 返回值是一个
getElementsByClassName()
通过class
属性获取当前元素节点内部的一组节点- 返回值是一个
HTMLCollection
,与数组相似,不能使用forEach方法,即使只获取到一个节点时,也封装成HTMLCollection返回 - 仅支持
IE8
以上
- 返回值是一个
querySlector()
通过CSS选择器
返回当前元素节点内部的一个节点,当能匹配多个节点时,返回满足匹配的第一个节点
- 仅支持
IE7
以上
- 仅支持
querySlectorAll()
通过CSS选择器
返回当前元素节点内部的一组节点- 返回值是一个
nodelist
,与数组相似,可以使用forEach方法,即使只获取到一个节点时,也封装成nodelist返回 - 仅支持
IE7
以上
- 返回值是一个
- 常用属性:
innerHTML
获取当前元素节点中的HTML代码
innerText
获取当前元素节点中的文本childNodes
获取当前元素节点中所有的子节点并以数组形式返回- 按照ES标准如果当前元素节点中有
空格
时也会被当作文本节点
包括在内 IE8
及以下浏览器没有实现这一标准,因此只会获取到内部的元素节点
- 按照ES标准如果当前元素节点中有
children
获取当前元素节点中的所有子元素节点firstChild
获取当前元素节点中的第一个子节点firstElementChild
获取当前元素节点中的第一个子元素节点, 仅支持IE8
以上lastChild
获取当前元素节点中的最后一个子节点lastElementChild
获取当前元素节点中的最后一个子元素节点, 仅支持IE8
以上parentNode
获取当前元素节点的父节点previousSibling
获取当前元素节点的前一个兄弟节点previousElementSibling
获取当前元素节点的前一个兄弟元素节点, 仅支持IE8
以上nextSibling
获取当前元素节点的后一个兄弟节点nextElementSibling
获取当前元素节点的后一个兄弟元素节点, 仅支持IE8
以上
所有没有声明是元素节点的属性都存在返回空格文本节点的可能。