11. DOM扩展

  • 对DOM的两个主要扩展是Selectors API 和 HTML5，还有Element Traversal 和一些专有扩展

11.1 选择符API

  • querySelector() 返回与模式匹配的第一个
  • querySelectorAll() 返回NodeList
  • matchesSelector() 返回true/fasle

11.2 元素遍历API

  • 对于元素间的空格，除了IE9，所有浏览器会返回文本节点，这会影响childNodes和firstChild等属性
  • Element Traversal API
    • childElementCount
    • firstElementChild
    • lastElementChild
    • previousElementSibling
    • nextElementSibling
    • children
// 旧法遍历
var child = element.firstChild;
while(child != element.lastChild){
	if(child.nodeType == 1){
		process(child); // 是元素
	}
	child = child.nextSibling;
}
// Element Traversal API
var child = element.firstElementChild;
while(child != element.lastElementChild){
	process(child);
	child = child.nextElementSibling;
}

11.3 HTML5

  • 与类相关的扩充
    • getElementsByClassName(string): NodeList
    • 链式调用
    • classList, 可以替代className
      • add(value)
      • contains(value)
      • remove(value)
      • toggle(value)

删除div的其中一个类名：

<div id="myDiv" class="bd user disabled"></div>

<script> // 旧法靠分割字符串 var className = document.getElementById("myDiv").className.split(/\s+/); var newName = ''; for(let i = 0; i < calssName.length; i++){ if(className[i] !== 'disabled'){ newName += className[i]; } } document.getElementById("myDiv").className = newName; // 新法ClassList,无比简洁 document.getElementById("myDiv").classList.remove("disabled"); </script>
  • 焦点管理
    • 元素获得焦点的方式有：
      • 页面加载、用户输入（Tab）和代码中focus()
    • document.activeElement 当前获得焦点的元素
      • 默认，文档刚刚加载完成时，activeElement是body
      • 文档加载期间，activeElement是null
    • document.hasFocus() 文档是否获得了焦点
  • HTMLDocument的变化
    • document.readyState
      • "loading"
      • "complete"
    • 兼容模式compatMode
      • CSS1Compat 标准模式
      • BackCompat 混杂模式
    • document.head
      • var head = document.head || document.getElementsByTagName('head')[0]
    • document.charset == UTF-16
    • 自定义数据属性data-
    • innerHTML 返回与调用元素的所有子节点对应的HTML标记
    • outerHTML 返回调用它的元素及所有子节点的HTML标记
    • insertAdjacentHTML()
      • "beforebegin"
      • "afterbegin"
      • "beforeend"
      • "afterend"
    • scrollIntoView()

11.4 专有扩展

  • 文档模式document mode
    • <meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
    • 决定以哪种模式渲染页面
  • children属性
    • childNodes的Element版本
    • 返回元素中同样还是元素的子节点
  • contains()
  • compareDocumentPosition() 确定节点间的关系
    • 返回掩码，1无关，2居前，4居后，8包含，16被包含
  • 插入文本
    • innerText 永远只会生成当前节点的一个子文本节点
    • textContent
    • outerText 读模式下与innerText一致，写模式会扩大到自身

12. DOM2 和 DOM3

  • DOM2模块
    • 核心Core
    • 视图Views
    • 事件Events
    • 样式Style
    • 遍历和范围Traversal and Range
    • HTML
  • DOM2&3的目的在于扩展DOMAPI，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力
  • isSameNode() 和 isEqualNode()
  • DOM3针对为DOM节点添加额外数据引入了新方法(我测试好像并不支持)
    • setUserData(key, value)
    • getUserData(key)
  • 使用短划线的CSS属性，必须转换成驼峰形式才能通过JavaScript访问
    • float是保留字，所以相应属性名是cssFloat
  • style对象
    • cssText
    • length
    • parentRule
    • getPropertyCSSValue(propertyName) 返回CSSValue对象
    • getPropertyPriority(prop) 返回"important" 或 ""
    • getPropertyValue(prop) 返回字符串值
    • item(index)
    • removePropety(prop)
    • setProperty(prop, value, priority)
  • 偏移量offset dimension 可见大小，含边框、内边距、内容
    • offsetWidth/offsetHeight
    • offsetTop/offsetLeft
  • 客户区client dimension 不含边框
    • clientWidth/clientHeight
  • 滚动大小scroll dimension
    • scrollHeight/scrollWidth
    • scrollTop/scrollLeft 被隐藏在内容区域上方/左侧的像素数
  • 确定元素大小
    • getBoundingClientRect
  • 遍历
    • NodeIterator 和 TreeWalker
    • 深度优先的DOM遍历
  • 范围
    • document.createRange()