JavaScript高级程序设计-第三版（DOM扩展）_javascript高级程序编程dom扩展-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37112587/article/details/104602712

本文深入讲解DOM操作的各种方法，包括选择符API如querySelector和querySelectorAll，元素遍历技巧，以及HTML5带来的DOM增强特性，如getElementsByClassName和classList属性。同时，文章探讨了焦点管理、HTMLDocument的拓展、字符集属性等高级主题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

十一、DOM扩展

11.1 选择符API

根据CSS选择符选择与某个模式匹配的DOM元素

11.1.1 querySelector()

CSS选择符
- # ID
- .className
- tagName
返回匹配的第一个元素

11.1.2 querySelectorAll()

返回NodeList（所有匹配的元素）
底层实现类似于一组元素的快照，不是动态的

11.1.3 matchesSelector()

方法的调用者与CSS选择符匹配则返回true

11.2 元素遍历

部分浏览器会将元素间的空格当作文本节点。

childElementCount 不包括文本节点和注释
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

var i,
	len,
	child=element.firstElementChild;
//遍历元素所有的直接子节点
while(child!=element.lastElementChild){
	processChild(child);
	child=child.nextElementSibling;
}

11.3 HTML5

HTML5对新增标记定义了大量javascript API
之前的版本主要用于定义标记，与javascript相关内容都交给DOM规范

11.3.1 与类相关的扩充

11.3.1.1 getElementsByClassName()方法

接收包含一个或多个类名的字符串
多个类名对应设定了多个class的元素

11.3.1.2 classList属性

className属性
- 没有修改单个类的方法，只能全部覆盖。
classList属性
- DOMTokenList类型
- 该类型具有的方法
  - add(class)
  - contains(class)
  - remove(class)
  - toggle(class) 有则删，无则增

11.3.2 焦点管理

document.activeElement
返回当前获取焦点的元素
- 页面加载完时指向document.body
- 正在加载返回null
document.hasFocus() 判断Document是否具有焦点

11.3.3 HTMLDocument

HTML 5对HTMLDocument进行了拓展，增加了新功能

11.3.3.1 readyState属性

文档加载状态

loading
complete

11.3.3.2 兼容模式

渲染页面的模式分为标准和混杂

document.compatMode
- CSS1Compat 标准
- BackCompat 混杂

11.3.3.3 head属性

document.head 指向<head>元素

11.3.4 字符集属性

document.charset
实际使用的字符集，也可用来指定新字符集
document.defaultCharset
根据默认浏览器及操作系统的设置，当前文档默认的字符集

11.3.5 自定义数据属性

dataset属性
返回DOMStringMap实例，保存自定义属性的键值对
- 每个data-name形式的属性都会有一个对应的属性，属性名没有data-前缀
- div.dataset.appId

11.3.6 插入标记

需要插入大量标记，而DOM操作比较麻烦
直接将字符串解析为HTML标记

11.3.6.1 innerHTML属性

可以读取调用者的子节点对应的HTML标记字符串
可以写入HTML标记，并替换调用者的子节点树
不是所有元素都包含innerHTML属性

11.3.6.2 outerHTML属性

可以读取调用者节点以及子节点对应的HTML标记字符串
可以写入HTML标记，并替换调用者及其子节点树

11.3.6.3 insertAdjacentHTML()

传入参数
- 插入位置
  - beforebegin
  - afterbegin
  - beforeend
  - afterend
- HTML文本

11.3.6.4 内存与性能问题

删除带有事件处理程序或引用了其他javascript对象子树时，元素与事件处理程序之间的绑定关系在内存中没有一并删除
在使用innerHML、outerHTML、insertAdjustmentHTML()前，最好手工删除要替换的元素的所有事件处理程序和javascript对象属性
设置大量HTML标记时，效率高，每次会创建一个HTML解析器，但创建和销毁解析器有性能损失，不应频繁创建

11.3.7 scrollIntoView()

使调用者元素出现在视口中

传入参数
- true或不传入参数：元素顶部与视口平齐

11.4 专有扩展

指IE的专有拓展

11.4.1 文档模式

IE的文档模式
- IE5 混杂模式
- IE6
- IE8
- IE9
强制浏览器以某种模式渲染页面
- <meta http-equiv=“X-UA-Compatible” content=“IE=IEVersion”/>
  - IEVersion的值
    - Edge 忽略文档类型声明，始终以最新的文档模式来渲染页面
    - EmulateIE9 如果有文档类型声明，则以IE9标准模式渲染页面
    - EmulateIE8
    - EmulateIE7
    - EmulateIE5
    - 9 忽略文档声明，强制以IE9标准模式渲染页面
    - 8
    - 7
    - 5
不是必须设置的，浏览器默认会根据文档类型声明选择最佳的可用文档模式还是混杂模式
document.documentMode
- 返回使用的文档模式的版本号

11.4.2 children属性

HTMLCollection类型
只返回元素的element类型的子节点，忽略空白符的文本节点及注释节点
与childNodes基本类似

11.4.3 contains()方法

contains(childNode) 返回bool
compareDocumentPosition(givenNode)
- 确定两个节点间的关系
- 调用者参考节点
- 参数给定节点
- 返回位掩码值
  - 1 无关
  - 2 同胞居前（参考节点之前）
  - 4 同胞居后
  - 8 祖先
  - 16 后代