选择符 API
querySelector()
方法接收一个css
选择符, 返回与该模式匹配的第一个元素, 如果没有匹配的元素返回null
- 通过
Document
类调用这个方法时会在文档元素的范围内查找匹配的元素, 通过Element类调用时只会在该元素后代元素的范围查找匹配的元素 querySelector()
方法接收css选择符, 与前一个方法不同的是, 这个方法返回一个NodeList
实例. 可以用item()
方法或方括号取得具体元素- 上面两个方法都可以被
Document
,Element
对象调用, 如果传入的参数有语法错误则会跑出错误 matchesSelector()
方法也接收css
选择符. 若找到元素匹配则返回true
, 反之返回false
. 不过这个元素不常用, 因为少有浏览器实现这个方法
元素遍历
childElementCount
返回子元素(不包括文本节点和注释)的个数firstElementChild
指向第一个子元素, 与之对应的firstChild
指向第一个节点, 注意是节点lastElementChild
指向最后一个子元素, 与之对应的lastChild
指向最后一个节点previousElementSibling
指向前一个兄弟元素, 与之对应的previousSibling
指向前一个兄弟节点nextElementSibling
指向后一个兄弟元素, 与之对应的nextSibling
指向后一个兄弟节点
HTML5
getElementsByClassName()
接收一个参数, 这个参数是类名. 它返回NodeList
.document
对象及所有HTML元素都可以调用该方法.- 在
docuemnt
对象上调用该方法返回与类名匹配的所有元素, 在元素上调用该方法返回元素的后代元素中匹配的元素 classList
属性用于给元素中添加或者删除类名. 有一个length
属性, 它是DOMTokenList
的实例. 它有以下方法:
add(value)
将给定的类名value
添加到列表中. 如果值已经存在就不添加contains(value)
判断列表是否存在类名value
, 存在则返回true
. 反之则返回false
remove(value)
将列表中类名为value
的值删除toggle(value)
若列表中已存在value
, 则删除. 若不存在则添加value
document.activeElement
引用DOM中获得焦点的元素.- 元素获得焦点方法除了有页面加载, 用户输入外, 还有在代码中调用
focus()
方法. - 默认情况下文档刚刚加载完成时,
document.activeElement
中保存的时document.body
元素的引用. 文档加载期间, 它保存的值为null
- 可以用
document.hasFocus()
方法确定文档是否获得了焦点 document.readyState
表示文档的加载状态, 为loading
时表示正在加载文档 ,为complete
时表示已经加载完文档document.compatMode
用来检测浏览器的渲染模式, 当值为CSS1Compat
时为标准模式, 为BackCompat
时为混杂模式.doucument.charset
定义了文档的字符集. 还有一个document.defaultCharset
属性为浏览器和操作系统默认设置的字符集. 这两个值有可能不一样- 元素若有自定义属性必须加上
data-
前缀区分. 可以使用dataset
属性引用自定义属性, 它是一个DOMStringListMap
的实例, 可以被任意元素引用. 假入div
元素中设置了data-x
属性, 则可以使用+document.getElementById('div').dataset.x
来访问data-x
. - 可以使用
innerHTML
来操作元素的子节点对应的标签. 在读模式下,innerHTML
属性返回调用元素的所有子节点(包括注释, 元素, 文本等)对应的HTML标签. 在写模式下,innerHTML
的值会被解析为DOM
子树, 替换调用元素原来的所有子节点 - 在大多数浏览器中通过
innerHTML
插入<script>元素并不会执行其中的脚本. outerHTML
可以操作元素及其子节点的标签. 在读模式下,outerHTML
返回调用它的元素及所有子节点的html
标签. 在写模式下,outerHTML
会根据指定的HTML
字符串创建新的DOM
子树完全替换调用元素.insertAdjacentHTML()
方法也用来插入标记, 它接收两个参数, 插入位置和插入的HTML. 且第一个参数必须为下列值之一:
+ "beforebegin"
表示在当前元素之前插入一个紧邻的兄弟元素
"afterbegin"
表示在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素."beforeend"
表示在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素."afterend"
表示在当前元素之后插入一个紧邻的兄弟元素
scrollIntoView()
可以在所有HTML元素上调用, 这个方法将元素出现在视口中, 如果这个方法传入true
或不传参会让窗口滚动并使调用元素的顶部和视口顶部尽可能平齐. 若传入false
参数, 则调用元素会尽可能出现在视口中(会出现元素底部和视口底部平齐的现象), 顶部也不一定平齐.
专有扩展
下面的方法或属性并没有成为DOM的标准, 只有少量浏览器实现了它.
children
属性和childNodes
属性功能类似, 都返回元素的子节点.children
返回的是HTMLCollection
的实例. 它是IE浏览器的产物children
在各个浏览器的返回值略有差异, 有的返回值包含注释节点如IE8
及更早版本, 有的则不包含如IE9
之后的版本.- IE也有一个
contains()
方法用于检测是否包含后代节点. 若被检测的节点是后代节点则返回true
, 反之返回false
使用DOM Level3
中的compareDocumentPosition()
方法可以确定节点间的关系. 当其返回值为1
时表示给定节点不在当前文档中, 为2
时表示给定节点在DOM
树中位于参考节点之前, 为4
时表示给定节点在DOM
树中位于参考节点之后, 为8
表示给定的节点是参考节点的祖先, 为16
表示给定的节点时参考节点的后代. innerText
既可以操作元素的素有文本内容(包括子文档树的文本). 在读取值时, 它将子文档树中的所有文本按序拼接起来. 写入值时, 会删除元素的所有子节点, 再插入文本节点.- 我们常用的是元素的
textContent
属性 outerText
属性在读取文本时和innerText
一样, 但是在写入文本时, 则会替换掉整个元素.- 对于滚动我们还可以用
scrollIntoViewIfNeeded(alignCenter)
方法,scrollByLines(lineCount)
方法,scrollByPages(pageCount)
方法.