第十五章：DOM 扩展

最新推荐文章于 2024-08-14 15:45:18 发布

叽歪外道

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量199

点赞数

分类专栏：读书笔记文章标签： javascript

本文链接：https://blog.csdn.net/Codger_Jy/article/details/114288472

版权

读书笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

第十五章：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()`

返回所有匹配的节点
- 返回的是一个 NodeList 静态实例

15.1.3 `matches()`

返回 true 或 false

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 自定义数据属性

使用 data-作为前缀

<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`属性

只包含元素的 ELement 类型的子节点

15.4.2 `contains()`方法

15.4.3 插入标记

innerText
outerText

15.4.4 滚动

叽歪外道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十五章：DOM 扩展

第十五章：DOM 扩展15.1 Selectors API15.1.1 querySelector()let body = document.querySelector("body");let mydiv = document.querySelector('#myDiv');let myClass = document.querySelector('.myClass');15.1.2 querySelectorAll()返回所有匹配的节点返回的是一个 NodeList 静态实例
复制链接

扫一扫