【JavaScript高级程序设计】第11~12章（DOM扩展）

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()