JavaScript之的DOM扩展

选择符 API

• querySelector()方法接收一个css选择符, 返回与该模式匹配的第一个元素, 如果没有匹配的元素返回null
• 通过Document类调用这个方法时会在文档元素的范围内查找匹配的元素, 通过Element类调用时只会在该元素后代元素的范围查找匹配的元素
• querySelector()方法接收css选择符, 与前一个方法不同的是, 这个方法返回一个NodeList实例. 可以用item()方法或方括号取得具体元素
• 上面两个方法都可以被Document, Element对象调用, 如果传入的参数有语法错误则会跑出错误
• matchesSelector()方法也接收css选择符. 若找到元素匹配则返回true, 反之返回false. 不过这个元素不常用, 因为少有浏览器实现这个方法

元素遍历

• childElementCount返回子元素(不包括文本节点和注释)的个数
• firstElementChild 指向第一个子元素, 与之对应的firstChild指向第一个节点, 注意是节点
• lastElementChild指向最后一个子元素, 与之对应的lastChild指向最后一个节点
• previousElementSibling指向前一个兄弟元素, 与之对应的previousSibling指向前一个兄弟节点
• nextElementSibling 指向后一个兄弟元素, 与之对应的nextSibling指向后一个兄弟节点

HTML5

• getElementsByClassName()接收一个参数, 这个参数是类名. 它返回NodeList. document对象及所有HTML元素都可以调用该方法.
• 在docuemnt对象上调用该方法返回与类名匹配的所有元素, 在元素上调用该方法返回元素的后代元素中匹配的元素
• classList属性用于给元素中添加或者删除类名. 有一个length属性, 它是DOMTokenList的实例. 它有以下方法:
  
  • add(value)将给定的类名value添加到列表中. 如果值已经存在就不添加
  • contains(value)判断列表是否存在类名value, 存在则返回true. 反之则返回false
  • remove(value)将列表中类名为value的值删除
  • toggle(value)若列表中已存在value, 则删除. 若不存在则添加value
• document.activeElement引用DOM中获得焦点的元素.
• 元素获得焦点方法除了有页面加载, 用户输入外, 还有在代码中调用focus()方法.
• 默认情况下文档刚刚加载完成时, document.activeElement中保存的时document.body元素的引用. 文档加载期间, 它保存的值为null
• 可以用document.hasFocus()方法确定文档是否获得了焦点
• document.readyState表示文档的加载状态, 为loading时表示正在加载文档 ,为complete时表示已经加载完文档
• document.compatMode用来检测浏览器的渲染模式, 当值为CSS1Compat时为标准模式, 为BackCompat时为混杂模式.
• doucument.charset定义了文档的字符集. 还有一个document.defaultCharset属性为浏览器和操作系统默认设置的字符集. 这两个值有可能不一样
• 元素若有自定义属性必须加上data-前缀区分. 可以使用dataset属性引用自定义属性, 它是一个DOMStringListMap的实例, 可以被任意元素引用. 假入div元素中设置了data-x属性, 则可以使用+ document.getElementById('div').dataset.x来访问data-x.
• 可以使用innerHTML来操作元素的子节点对应的标签. 在读模式下, innerHTML属性返回调用元素的所有子节点(包括注释, 元素, 文本等)对应的HTML标签. 在写模式下, innerHTML的值会被解析为DOM子树, 替换调用元素原来的所有子节点
• 在大多数浏览器中通过innerHTML插入<script>元素并不会执行其中的脚本.
• outerHTML可以操作元素及其子节点的标签. 在读模式下, outerHTML返回调用它的元素及所有子节点的html标签. 在写模式下, outerHTML 会根据指定的HTML字符串创建新的DOM子树完全替换调用元素.
• insertAdjacentHTML()方法也用来插入标记, 它接收两个参数, 插入位置和插入的HTML. 且第一个参数必须为下列值之一:
  + "beforebegin" 表示在当前元素之前插入一个紧邻的兄弟元素
  
  • "afterbegin" 表示在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素.
  • "beforeend" 表示在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素.
  • "afterend" 表示在当前元素之后插入一个紧邻的兄弟元素
• scrollIntoView()可以在所有HTML元素上调用, 这个方法将元素出现在视口中, 如果这个方法传入true或不传参会让窗口滚动并使调用元素的顶部和视口顶部尽可能平齐. 若传入false参数, 则调用元素会尽可能出现在视口中(会出现元素底部和视口底部平齐的现象), 顶部也不一定平齐.

专有扩展

下面的方法或属性并没有成为DOM的标准, 只有少量浏览器实现了它.

• children属性和childNodes属性功能类似, 都返回元素的子节点. children返回的是HTMLCollection的实例. 它是IE浏览器的产物
• children在各个浏览器的返回值略有差异, 有的返回值包含注释节点如IE8及更早版本, 有的则不包含如IE9之后的版本.
• IE也有一个contains()方法用于检测是否包含后代节点. 若被检测的节点是后代节点则返回true, 反之返回false
  使用DOM Level3中的compareDocumentPosition()方法可以确定节点间的关系. 当其返回值为1时表示给定节点不在当前文档中, 为2时表示给定节点在DOM树中位于参考节点之前, 为4时表示给定节点在DOM树中位于参考节点之后, 为8表示给定的节点是参考节点的祖先, 为16表示给定的节点时参考节点的后代.
• innerText既可以操作元素的素有文本内容(包括子文档树的文本). 在读取值时, 它将子文档树中的所有文本按序拼接起来. 写入值时, 会删除元素的所有子节点, 再插入文本节点.
• 我们常用的是元素的textContent属性
• outerText属性在读取文本时和innerText一样, 但是在写入文本时, 则会替换掉整个元素.
• 对于滚动我们还可以用scrollIntoViewIfNeeded(alignCenter)方法, scrollByLines(lineCount)方法, scrollByPages(pageCount)方法.