《JavaScript 高级程序设计》第十五章 DOM扩展 学习记录

韩业峰
184 阅读5分钟

1、Selectors API

1、querySelector()

  • 接收css选择符参数，返回匹配该模式的第一个后代元素，没有匹配返回null

  • 在Doument上使用，会从文档元素开始搜索，在Element上使用会从当前元素后代中查询。

2、querySelectorAll()

  • 接收css选择符参数，返回匹配该模式的所有匹配节点，而不止一个。
  • 返回的是一个NodeList的静态实例
  • 可以在Document，DocumentFragment和Element类型上使用。
  • 语法错误或不支持的选择符会抛出错误。

3、matches()

  • 接收css选择符参数，如果元素匹配则该选择符返回true，否则返回false
  • 可以方便检测某个元素会不会被前面两个方法返回。

2、元素遍历

  • childElementCount，返回子元素数量（不含文本节点和注释）
  • firstElementChild，指向第一个Element类型的子元素
  • lastElementChild，指向最后一个Element类型的子元素
  • previousElementSibling，指向前一个Element类型的同胞元素
  • nextElementSibling，指向后一个Element类型的子元素

3、HTML5

1、CSS类扩展

1、getElementsByClassName()

  • 接收一个参数，包含一个或多个类名字符串，返回类名中包含相应类的NodeList

2、classList属性 🌟

  • 操作类名，可以通过className属性实现添加、删除和替换。但className是一个字符串，每次操作需要重新设置这个值才能生效。
  • HTML5给所有元素添加了classList属性，为这些操作提供了更简单安全的实现方式。
  • classList是一个新的集合类型DOMTokenList的实例，length属性表示包含多少项，也可通过item() 或 中括号取得个别的元素
    • add(value)，向类名列表添加指定字符串值value，如果已存在什么都不做
    • contains(value)，返回布尔值，表示给定的value是否存在。
    • remove(value)，从类名列表中删除指定的字符串值value
    • toggle(value)，如果类名中已存在value，则删除；如果不存在则添加
  • IE10 及以上版本和其他主流浏览器都支持

2、焦点管理

  • document.activeElement 包含当前拥有焦点的DOM元素
  • document.hasFocus() 文档是否拥有焦点

3、HTMLDocument扩展

1、readyState属性

  • document.readyState
    • loading 文档正在加载
    • complete 文档加载完成
  • 之前需要依赖onload事件处理程序设置标记

2、compatMode 属性

  • document.compatMode 浏览器渲染模式
    • CSS1Compat 标准模式
    • BackCompat 混杂模式

3、head属性

  • document.head 执行<head>元素

4、字符集属性

  • document.characterSet 表示实际使用的字符集
    • 默认'UTF-16'，可以通过<meta>元素或者这个属性修改。

5、自定义数据属性

  • 使用前缀data-
  • 可以通过元素的dataset属性来访问。
  • 该属性是一个DOMStringMap实例，包含一组键值对。
  • data-name后面的name作为键来访问，但data-my-name,data-My-Name要通过myName来访问

6、插入标记

1、innerHTML属性

  • 读取时，但会元素所有后代的HTML字符串，包括元素、注释和文本节点。
    • IE、Opera会把标签转为大写
    • 其他会按源代码格式返回
  • 写入时，会根据提供的字符串以新的DOM子树代替元素中原来包含的子节点。
    • 会被解析为DOM子树，并替换元素之前的所有节点。
    • 如果赋值内容不包含任何HTML标签，则会直接生成文本节点
    • 会转义

2、旧IE的innerHTML

  • 旧版IE插入<script>标签指定defer属性，需要在之前加入“受控组件”。
  • 可以通过插入<input type='hidden'>处理
  • <style>也有类似问题

3、outerHTML属性

  • 读取时，会返回调用它的元素（及所有后代元素）的HTML字符串
  • 写入时，调用它的元素会被传入的HTML字符串经过解释之后生成的DOM子树取代

4、insertAdjacentHTML() 与 insertAdjacentText()

  • 都接收两个参数
    • 要插入标记的位置，不区分大小写
      • beforebegin，插入当前元素前面，作为前一个同胞节点
      • afterbegin，插入当前元素内部，作为新的子节点或放在第一个子节点前面
      • beforeend，插入当前元素内部，作为新的子节点后放在最后一个子节点后面
      • afterend，插入当前元素后面，作为下一个同胞节点
    • 要插入的HTML或文本

5、内存与性能问题

  • 手动删除要被替换掉元素上关联的事件处理程序和JavaScript对象
  • 尽量限制频繁设置innerHTML

6、跨站点脚本

  • innerHTML不会执行<script>标签，但暴露了攻击面，因为可以通过它毫不费力地创建元素并执行onclick之类操作。
  • 需要用户提供信息不要使用innerHTML，会有XSS攻击，需要进行转义。

7、scrollIntoView()

  • 如何滚动页面的某个区域？控制滚动方式
  • scrollIntoView()方法可以滚动浏览器窗口以便包含元素进入视口
    • alignToTop
      • true 窗口滚动后元素顶部与视口顶部对齐
      • false 窗口滚动后元素底部与视口底部对齐
    • scrollIntoViewOption选择对象
      • behavior：定义过渡动画，smooth/auto ， 默认auto
      • block：定义垂直方向对齐，start/center/end/nearest，默认start
      • inline：定义水平方向对齐，start/center/end/nearest，默认nearest
    • 不传参数等同于alignToTop值为true
  • 可以用来在页面上发生某个事件时引起用户关注。把焦点设置到一个元素上也会导致浏览器将元素滚动到可见位置。

4、专有扩展

1、children属性

  • HTMLCollection集合，只包含Element类型的子节点。

2、contains()方法

  • contains()确定一个元素是不是另一个元素后代

    document.documentElement.contains(document.body)

  • compareDocumentPosition()确定两个节点间的关系

3、插入标记

1、innerText属性

  • 对应元素内包含的所有文本内容，无论文本在子树的哪个层级。
  • 读取时，会按深度优先的顺序将子树中所有文本节点的值拼接起来
  • 写入时，会移除元素所有后代并插入一个包含该值的文本节点。
  • 可以用来去除HTML标签

2、outerText属性

  • 范围包含调用它的节点
  • 读取时，和innerText一样
  • 写入时，会替换整个元素

4、滚动

  • scrollIntoViewIfNeeded(opt_center)会在元属不可见的情况下，将其滚动到窗口或包含窗口中。
    • 如果为true，则元素将在其所在滚动区的可视区域中居中对齐（默认）。
    • 如果为false，则元素将与其所在滚动区的可视区域最近的边缘对齐。
avatar
文章
阅读
粉丝