第十五章：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：不包含文本节点和注释firstElementChildlastElementChildpreviousElementSibling：指向前一个 Element 类型的同胞元素nextElementSibling
15.3 HTML5
15.3.1 CSS 类扩展
1. getElementsByClassName()
2. classList属性
add(value)contains(value): booleanremove(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 滚动
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
