第 10 章 DOM
10.1 节点层次
文档元素, 文档最外层元素, 文档中其他所有元素都包含在文档元素中. html 中文档元素是 <html>.
总共有 12 种节点类型.
JavaScript 中所有节点类型都继承自 Node 类型, 可通过 nodeType 属性判断节点类型.
对于元素节点, nodeName 是标签名, nodeValue 为 null.
childNodes, 用法 childNodes[0]或 childNodes.item(0).
parentNode,previousSibling,nextSibling.
hasChildNodes()在节点包含一或多个字节点返回 true.
appendChild()向 childNodes 列表末尾添加一个节点.
insertBefore()接受两个参数: 插入的节点和参照的节点. 在参照节点前插入一个同胞节点.
replaceChild(),removeChild().
cloneNode()参数为 true 进行深复制, 为 false 进行浅复制.
normalize()合并多个相邻文本节点.
nodeName 和 tagName 可以访问元素标签名, 输出为大写, 比较时需要使用 toLowerCase()转换成小写.
元素标准特性, id,title,lang(少用),dir(少用),className.
getAttribute(),setAttribute(),removeAttribute().
只有公认的 (非自定义的) 特性才会以属性形式添加到 DOM 对象中.
attributes 属性拥有下列方法: getNamedItem(name),removeNamedItem(name),setNamedItem(node),item(pos).
document.createElement()接受一个参数: 要创建的元素名. IE 中可用 createElement()传入完整的元素标签和属性.
元素的子节点可能是元素, 文本, 注释或处理指令.
可以使用 nodeValue 或 data 属性访问文本节点中包含的文本.
document.createTextNode()创建新文本节点.
splitText(pos)将一个文本节点按照指定位置分成两个文本节点, 返回一个新文本节点.
document.createComment()传递注释文本或创建注释节点.
document.createCDataSection()在 XML 文档中创建 CDATA 区域.
document.doctype 有三个属性: name,entities,notaions.
document.createDocumentFragment()创建文档片段.
Attr 对象有三个属性: name,value,specified.
10.2 DOM 操作技术
构建表格, table,tbody,tr.
第 11 章 DOM 扩展
11.1 选择符 API
querySelector()接收一个 CSS 选择符, 返回匹配的第一个元素, 无则返回 null.
querySelectorAll()接收一个 css 选择符, 返回匹配的元素数组.
matchesSelector()接收一个 css 选择器, 如果调用元素与该选择符匹配返回 true, 否则返回 false. 不同浏览器需要以不同变体 (msMatchesSelector,mozMatchesSelector,webkitMatchesSelector) 以支持该方法.
11.2 元素遍历
为弥补不同浏览器使用 childNodes 等属性行为不一致情况, 新增 childElementCount,firstElementChild,lastElementChild,previousElementSibling,nextElementSibling.
11.3 HTML5
getElementsByClassName(), 接收一个包含一或多个类名的字符串, 返回指定类的所有元素数组.
在操作类名时, 通过 className 属性添加, 删除和替换类名.
classList 属性有 add,contains,remove,toggle 方法.
document.activeElement 属性始终会引用 DOM 中当前获得了焦点的元素.
document.hasFocus()用于确定文档是否获得了焦点.
document.readyState, 用于实现一个指示文档已经加载完成的指示器. 有 loading 和 complete 两个可能值.
document.compatMode 检测浏览器采用哪种渲染模式, CSS1Compat 标准模式, BackCompat 混杂模式.
document.head 引用文档的 < head > 元素.
document.charset 表示文档实际使用的字符集, 或指定新字符集, 默认值为 UTF-16.defaultCharset 表示根据默认浏览器及操作系统的设置默认文档的字符集. charset 与 defaultCharset 不同则表示文档字符集有修改.
自定义属性要添加前缀 data-, 可以使用 dataset 属性访问.
innerHTML, 读模式下返回与调用元素的所有子节点对应的 HTML. 写模式下根据指定值创建 HTML, 替换调用元素的所有子节点.
outerHTML, 读模式下返回调用元素及所有子节点的 HTML. 写模式下根据指定值创建 HTML, 完全替换调用元素.
insertAdjacentHTML()接收两个参数: 插入位置和要插入的 HTML 文本. 第一个参数为下列值之一: beforebegin,afterbegin,beforeend,afterend.
使用 innerHTML,outerHTML,insertAdjacentHTML()时最好先收工删除要被替换的元素的所有事件处理程序和 JavaScript 对象属性.
scrollIntoView()通过滚动浏览器窗口或某个容器元素, 调用元素就可以出现在视口中.
11.4 专有扩展
文档模式决定页面可以使用什么功能.<meta > 中 content 可以设置 IE 版本有以下值: Edge,EmulateIE9,EmulateIE8,EmulateIE7,9,8,7,5.
document.documentMode 可以知道给定页面是什么文档模式.
children 只包含元素中同样还是元素的子节点.
contains()接收一个要检测的后代元素, 是则返回 true, 否则返回 false.
compareDocumentPosition(参考节点)确定两个节点间关系, 1 无关, 2 局前, 4 居后, 8 包含, 16 被包含.
innerText 读取值时, 按照由浅入深顺序将文档树中所有文本拼接起来; 写入值时, 删除元素所有子节点插入包含相应文本值的文本节点. 类似属性 textContent,Firefox 支持.
outerText 读取值时, 按照由浅入深顺序将文档树中所有文本拼接起来; 写入值时, 替换整个元素(包含子节点).
scrollIntoViewIfNeeded(alignCenter)只在当前元素在视口中不可见的情况下, 才滚动浏览器窗口或容器元素使其可见.
scrollByLines(lineCount)将元素内容滚动指定的行高.
scrollByPages(pageCount)将元素内容滚动指定的页面高度.
第 12 章 DOM2 和 DOM3
12.1 DOM 变化
命名空间用 xmlns 特性指定, 想要为 XML 命名空间创建前缀, 可使用 xmlns: 再后跟前缀. 有时为避免不同语言间冲突, 也需要使用命名空间来限定特性, 如 xhtml:class="home".
DOM2 级中, Node 类型包含下列特定于命名空间的属性: localName,namespaceURI,prefix.
DOM3 级中, 命名空间有关的方法: isDefaultNamespace(namespaceURI),lookupNamespaceURI(prefix),lookupPrefix(namespaceURI).
DOM2 级中, Document 类型与命名空间有关的方法: createElementNS(namespaceURI,tagName),createAttributeNS(namespaceURI,attributeName),getElementsByTagNameNS(namespaceURI,tagName).
DOM2 级核心中, Element 操作特性: getAttributeNS(namespaceURI,localName),getAttributeNodeNS(namespaceURI,localName),getElementsByTagNameNS(namespaceURI,tagName),hasAttributeNS(namespaceURI,localName),removeAttributeNS(namespaceURI,localName),setAttributeNS(namespaceURI,qualifiedName,value),setAttributeNodeNS(namespaceURI,attNode).
NameNodeMap 类型与命名空间有关的方法: getNamedItemNS(namespaceURI,localName),removeNamedItemNS(namespaceURI,localName),setNamedItemNS(node).
DocumentType 新增三个属性: publicId,systemId,internalSubset.
Document 类型变化: importNode(), 从文档中取得一个节点导入到另一个文档成为其文档结构一部分. 接受 2 个参数: 要复制的节点, 是否复制子节点的布尔值.
DOM2 级视图新增 defaultView 属性, IE 中为 parentWindow, 确定文档的归属窗口.
DOM2 级核心为 document.implementation 新增 2 个新方法: createDocumentType()接受 3 个参数: 文档类型名称, publicId,systemId;createDocument()接受 3 个参数: 针对文档中元素的 namespaceURI, 文档元素的标签名, 新文档的文档类型.
DOM2 级 HTML 为 document.implementation 新增新方法: createHTMLDocument()创建一个完整的 HTML 文档, 接受一个参数: 新创建文档的标题.
Node 类型新方法: isSupported()用于确定当前节点具有什么能力, 接受 2 个参数: 特性名和特性版本号.
DOM3 级两个辅助比较节点的方法: isSameNode()和 isEqualNode(), 接受一个节点参数, 在传入节点与引用节点相同或相等时返回 true. 相同指两个节点引用同一个对象; 相等指两个节点相同类型, 具有相等属性.
DOM3 级对 DOM 节点添加额外数据方法: setUserData(), 接受 3 个参数: 要设置的键, 实际的数据, 处理函数. 其中处理函数接受 5 个参数: 操作类型值(1 复制, 2 导入, 3 删除, 4 重命名), 数据键, 数据值, 源节点, 目标节点.
DOM2 级框架新属性: contentDocument, 包含一个指针, 指向表示框架内容的文档对象. IE8 使用 contentWindow.
12.2 样式
DOM2 级样式为 style 对象定义的属性和方法: cssText,length,parentRule,getPropertyCSSValue(propertyName),getPropertyPriority(propertyName),getPropertyValue(propertyName),item(index),removeProperty(propertyName),setProperty(propertyName,value,priority).
DOM2 级样式增强了 document.defaultView, 提供了 getComputedStyle()方法, 接受 2 个参数: 要取得计算样式的元素, 一个伪元素字符串. 返回 CSSStyleDeclaration 对象, 包含当前元素的所有计算的样式.
通过 document.styleSheets 可以读取样式表中的属性: disabled(支持读写),href,media,ownerNode,parentStyleSheet,title,type.
styleSheets 还支持 cssRules,ownerRule,deleteRule(index),insertRule(rule,index).
cssRule 对象表示样式表中的每一条规则. 包含下列属性: cssText(常用),parentRule,parentStyleSheet,selectorText(常用),style(常用),type.
insertRule()方法可以向现有样式表中添加新规则, 接受 2 个参数: 规则文本和表示在哪里插入规则的索引. IE8 中相似方法 addRule(), 该方法最多可以添加 4095 条样式规则.
deleteRule()删除规则, 接受一个参数: 要删除的规则的位置. IE 支持的方法为 removeRule().
偏移量: offsetHeight,offsetWidth,offsetLeft,offsetTop. 想知道某个元素在页面上的偏移量, 将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加, 如此循环至根元素, 就可以得到一个基本准确的值.
客户区大小, 指元素内容及其内边距所占据的空间大小. clientWidth 属性是元素内容区宽度加左右内边距宽度, clientHeight 属性是元素内容区高度加上下内边距高度.
滚动大小, 指包含滚动内容的元素大小. scrollHeight 没有滚动条情况下元素内容的总高度, scrollWidth 没有滚动条情况下元素内容的总宽度, scrollLeft 被隐藏在内容区域左侧的像素数, scrollTop 被隐藏在内容区域上方的像素数.
在确定文档总高度 (包括基于视口的最小高度) 时, 必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值, 才能保证在跨浏览器环境下得到精确结果.
元素尚未滚动时, scrollLeft 和 scrollTop 值为 0.
getBoundingClientRect()有 4 个属性 left,top,right,bottom, 给出了元素在页面中相对于视口的位置. 一般 right 和 left 的差值与 offsetWidth 值相等, bottom 和 top 的差值与 offsetHeight 值相等.
12.3 遍历
DOM2 级遍历和范围定义 2 个用于辅助完成顺序遍历 DOM 结构的类型: NodeIterator,TwreeWalker. 能够基于给定的起点对 DOM 结构执行深度优先的遍历操作.
document.createNodeIterator()方法接受 4 个参数: root,whatToShow(位掩码, 以常量形式在 NodeFilter 类型中定义),filter,entityReferenceExpansion. 调用如 document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false).
NodeIterator 两个主要方法: nextNode(),previousNode().
TwreeWalker 方法: nextNode(),previousNode(),parentNode(),firstChild(),lastChild(),nextSibling(),previousSibling().
TwreeWalker 属性: currentNode, 表示任何遍历方法在上一次遍历中返回的节点.
在使用 NodeIterator 对象时, NodeFilter.FILTER_SKIP 与 NodeFilter.FILTER_REJECT 作用相同: 跳过指定节点. 在使用 TwreeWalker 对象时, NodeFilter.FILTER_SKIP 会跳过相应节点继续前进到子树中下一节点, NodeFilter.FILTER_REJECT 会跳过相应节点及该节点的整个子树.
12.4 范围
createRange()可以创建 DOM 范围.
Range 类型实例的属性和方法: startContainer,startOffset,endContainer,endOffset.
selectNode()和 selectNodeContents()接受一个参数: DOM 节点, 使用该节点中的信息来填充范围. selectNode()选择整个节点 (含子节点),selectNodeContents() 只选择节点的子节点.
精细控制范围方法: setStartBefore(refNode),setStartAfter(refNode),setEndBefore(refNode),setEndAfter(refNode).
创建复杂范围: setStart()和 setEnd(). 接受两个参数: 一个参照节点, 一个偏移量值.
deleteContents()从文档中删除范围所包含的内容.
extractContents()从文档中移除范围选区, 返回范围文档片段, 可以用于插入到文档中其他地方.
cloneContents()创建范围对象的一个副本, 然后在文档其他地方插入该副本.
insertNode()可以向范围选区的开始处插入一个节点.
surroundContents()环绕范围插入内容, 接受一个参数: 环绕范围内容的节点.
折叠范围, 指范围中未选择文档的任何部分.
collapse()方法用来折叠范围, 接受一个参数: 布尔值, 表示要折叠到范围的哪一端. true 表示起点, false 表示终点.
compareBoundaryPoints()确定范围是否有公共边界 (起点或终点). 接受 2 个参数: 表示比较方式的常量值, 要比较的范围. 比较方式常量值: Range.START_TO_START(0),Range.START_TO_END(1),Range.END_TO_END(2),Range.END_TO_START(3).compareBoundaryPoints() 可能返回的值: 第一个范围中的点位于第二个范围中的点前, 返回 - 1; 两点相等, 返回 0; 第一个范围中的点位于第二个范围中的点后, 返回 1.
cloneRange()复制范围, 创建调用它的范围的副本.
detach()调用完范围后, 从创建范围文档中分离出该范围. 通常与 range=null 连用.
来源: http://www.jianshu.com/p/5930aeab6b57