JavaScript高级程序设计-第三版(DOM扩展)

本文深入讲解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 后代

11.4.4 插入文本

11.4.4.1 innerText属性
  • 可以读取调用者的所有子节点的文本内容
  • 只能写入一个文本节点,并替换调用者的所有子节点
  • 会对文本进行HTML编码
11.4.4.1 outerText属性
  • 读取时与innerText相同
  • 写入时会替换调用者,相当于将调用者及其所有子节点替换为一个文本节点

11.4.5 滚动

  • scrollIntoViewIfNeeded()
    • 当不可见时才滚动页面至可见,否则什么都不做
    • 传入true 垂直居中
  • scrollByLines(lineCount)
    • 自身内容滚动指定行高
  • scrollByPages(pageCount)
    • 滚动指定页面高度
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值