第十五章:DOM 扩展
15.1 Selectors API
15.1.1 querySelector()
let body = document.querySelector("body");
let mydiv = document.querySelector('#myDiv');
let myClass = document.querySelector('.myClass');
15.1.2 querySelectorAll()
15.1.3 matches()
15.2 元素遍历
childElementCount
:不包含文本节点和注释firstElementChild
lastElementChild
previousElementSibling
:指向前一个 Element 类型的同胞元素nextElementSibling
15.3 HTML5
15.3.1 CSS 类扩展
1. getElementsByClassName()
2. classList
属性
add(value)
contains(value): boolean
remove(value)
toggle(value)
:类名列表中存在则删除,不存在则添加
myDiv.classList.remove("myClass");
15.3.2 焦点管理
document.activeElement
:始终包含当前拥有焦点的 DOM 元素focus()
document.hasFocus()
15.3.3 HTMLDocument 扩展
-
readyState
属性
- loading:文档正在加载
- complete:文档加载完成
-
compatMode
属性
- 标准模式下为
CSS1Compat
- 混杂模式下为
BackCompat
-
head
属性:指向 <head>
15.3.4 字符集属性
document.characterSet
:文档使用的字符集,默认为 UTF-16
15.3.5 自定义数据属性
<div id="myDiv" data-appId="12345"></div>
let div = document.getElementById("myDiv");
let appId = div.dataset.appId;
15.3.6 插入标记
1. innerHTML
属性
- 返回元素所有后代的 HTML 字符串,包括元素、注释、文本节点
- 赋值时会根据提供的字符串、以新的 DOM 子树替代原有的所有节点
- 不包含任何 HTML 标签的情况下会生成一个文本节点
2. 旧 IE 中的 innerHTML
- 在所有现代浏览器中,通过
innerHTML
插入的 <script>
标签不会被执行 - p453(第四版)
3. outerHTML
属性
- 返回调用它的元素(及所有后代元素)的 HTML 字符串
- 赋值时会根据提供的字符串、以新的 DOM 子树替代调用它的元素
4. insertAdjacentHTML()
与 insertAdjacentText()
- 接收参数:要插入标记的位置和要插入的 HTML 或文本
- 第一个参数必须是下列之一(不区分大小写):
- beforebegin:插入当前元素前面,所为前一个同胞节点
- afterbegin:插入当前元素内部,作为第一个子节点
- beforeend:插入当前元素内部,作为最后一个子节点
- afterend:插入当前元素后面,作为下一个同胞节点
5. 内存与性能问题
- 替换之前,最好手动删除要被替换的元素上关联的事件处理程序和 JavaScript 对象
6. 跨站点脚本
- 页面中要使用用户提供的信息,则不建议使用 innerText
15.3.7 scrollIntoView()
- 参数:
alignToTop
:布尔值
- true:窗口滚动后元素的顶部与视口顶部对齐
- false:窗口滚动后元素的底部与视口的底部对齐
scrollIntoViewOptions
:可选对象
- behavior:定义过渡动画,可选值为 smooth 和 auto,默认值为 auto
- block:定义垂直方向的对齐,可选值为 start、center、end、nearest,默认为 start
- inline:定义水平方向的对齐,,默认值为 nearest
- 不传参数等同于
alignToTop
为 true
15.4 专有扩展
15.4.1 children
属性
15.4.2 contains()
方法
15.4.3 插入标记
15.4.4 滚动