javascript高级程序设计 第十一章--DOM扩展
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript高级程序设计 第十一章--DOM扩展相关的知识，希望对你有一定的参考价值。
javascript高级程序设计 第十一章--DOM扩展
DOM最主要的扩展就是选择符API、html5和Element Traversal
Selectors API：定义了两个方法 querySelector() 和 querySelectorAll()，能够基于CSS选择符从DOM中取得
元素。querySelector()方法接收一个CSS选择符，返回该模式匹配的第一个元素，querySelectorAll()接收的参
数一样，但是返回NodeList实例； matchesSelector()方法返回布尔值。 元素遍历：处理元素间的空格或者空
白文本节点
Element Traversal ：为DOM元素定义了额外的属性，能够方便地从一个元素跳到另一个元素。
HTML5：为标准的DOM定义了很多的扩展功能。与类相关的扩充：新增了getElementsByClassName()方法，
返回与类名匹配的所有元素，新增了操作类名的classList属性，用于添加、删除或替换类名。
焦点管理： document.activeElement属性，这个属性始终会引用DOM中当前获得了叫焦点的元素，新增了
document.hasFocus()方法用于确定文档是否获得了焦点。 HTMLDocument的变化：Document的readyState
属性，loading表示正在加载的文档，complete表示已经加载完成的文档，通过它来实现一个指示文档已经加载
完成的指示器；兼容模式，document.compatMode属性在标准模式下返回“CSS1Compat”,在混杂模式下
返回“BackCompat”；新增了document.head属性 字符集属性：charset和defaultCharset这两个属性
可以得到文档使用的字符编码的具体信息 自定义数据属性：添加 data-前缀可以添加任意命名的属性，
通过元素的dataset属性来访问自定义属性的值。
插入标记：innerHTML属性：在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记。
在写模式下，innerHTML属性会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的
所有子节点。outerHTML：在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签，在写模式
下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
如： div.outerHTML="<p>this is a p</p>" 相当于 var p=document.createElement("p"); p.appendChild
(document.createTextNode("this is a p")); div.parentNode.replaceChild(p,div); 新创建的额<p>元素会取代
DOM树中所有的<div>元素。 insertAdjacentHTML()方法，接收两个参数，插入的位置和要插入的HTML文
本，第一个参数必须是：beforebegin afterbegin beforeend afterend
scrollIntoView()方法：这个方法用来控制页面滚动，这个方法可以对所有HTML元素使用，通过滚动浏览器窗口
或某个容器元素，调用元素就可以出现在视口中。 children属性：指包含元素中同样还是元素的子节点，与
childNodes的值相同， element.children contains()方法：用来检测节点是不是某个节点的后代节点，返回
布尔值，alert(document.documentElement.contains(document,body)); 这个例子检测<body>元素
是否为<html>元素的后代，返回true。 插入文本的innerText属性：通过innerText属性可以操作元素中包含的
所有文本，包含子文档树中的文本。innerText属性读取值的时候，将子文档树中的所有文本拼接起来；写入值
的时候，会删除元素的所有子节点，插入包含相应文本值的文本节点。设置innerText属性移除了先前存在的所有
子节点，完全改变了DOM子树，同时也会对HTML的语法字符重新编码； outerText属性：与innerText属性
不同的是， outerText属性在写模式下，不只是替换调用它的元素子节点，而是会替换整个元素。例子：
div. outerText="hello world"; 相当于 var text = document.createTextNode("hello world");
div.parentNode.replaceChild(text,div)
以上是关于javascript高级程序设计 第十一章--DOM扩展的主要内容，如果未能解决你的问题，请参考以下文章