javascript--11DOM扩展

二、DOM扩展
1. 呈现模式
①document对象的compatMode属性
□值为“CSS1Compat”即标准模式。
□值为“BackCompact”即混杂模式。
②IE8为document对象引入documentMode新属性，返回数值：5（混杂模式）、7（仿真模式）、8（标准模式）
2. 滚动
□滚动方法都是作为HTMLElement类型的扩展存在，可再元素节点上使用。
□scrollIntoView(bool)：滚动浏览器窗口或容器元素，以便在视口（viewport）中看到元素。（参数为true或省略，则滚动到顶部）。
□scrollIntoViewIfNeeded(bool)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，让当前元素可见。（Safari和Chorme实现）。
□scrollByLines(lineCount)：将元素的内容滚动指定的行数的高度，lineCount可为正/负数。（safari和Chrome可用）
3. children属性
□children属性中只包含元素的子节点中那些也是元素的节点。
□作为HTMLCollection对象。
□Firefox不支持，IE中的children集合会包含注释节点。
4. contains()方法
□应在作搜索起点的祖先节点上调用，传入要检测的节点作参数。返回true则传入节点作为当前节点后代。
□Firefox不支持contains()方法，在DOM3级实现替代的compareDocumentPosition()方法，确定两个节点间关系。Safari2.x以下版本不支持。
兼容各浏览器代码：
function contains(refNode, otherNode){
if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engin.webkit >=552)){
return refNode.contains(otherNode);
}else if(tyepof refNode.compareDocumentPosition =="function"){
return !!(refNode.compareDocumentPosition(otherNode)&16);
}else{
var node = otherNode.parentNode;
do{
if(node === refNode){
Return true;
}else{
node = node.parentNode;
}
}while(node !== null);
return false;
}
}
5. 操作内容
①innerText属性
□可读取节点文档书中由浅入深的所有文本。
□通过inner.Text属性设置节点文本，会移除先前存在的所有子节点，完全改变了DOM树。
□赋给此属性的文本将自动进行HTML编码。
□Firefox不支持innerText，但支持作用类似的textContent属性。
□innerText：支持IE、Safari、Opera、Chrome
□textContent：支持Safari、Firefox、Opera、Chrome
兼容代码：
function getInnerText(element){
return (typeof element.textContent == "string")?element.textContent:element.innerText;
}

function setInnerText(element, text){
if(typeof element.textContent == "string"){
element.textContent = text;
}else{
element.innerText = text;
}
}
②innerHTML属性
□读取信息时，返回当前元素所有子节点的HTML表现。
□写入信息时，会按照指定的值创建新的DOM子树，并以该子树替换当前元素的所有子节点。
□innerHTML限制：插入<script>元素不会被执行。插入<style>也有类似问题。
□并不是所有元素都有innerHTML属性。不支持的元素有<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<title>和<tr>。
③outerText属性
□与innerText基本相同，区别在于写入信息时，会替换包含节点
□Firefox不支持
□不建议使用。
④outerHTML属性
□与innerHTML基本相同，区别在于写入信息时，会替换包含节点。
□Firefox不支持
□不建议使用
⑤内存与性能问题
□innerText、innerHTML、outerText、outerHTML替换子节点可能会导致浏览器的内存问题。被删除的子树中的元素设置的事件处理程序或具有值为JS对象的属性，依旧存在于内存中。
□插入大量新HTML时，使用HTML要比通过多次DOM操作有效率得多。
三、DOM操作技术
1. 动态脚本
①插入外部文件：
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
②指定JavaScript代码方式
□IE中将<script>视为一个特殊元素，不允许DOM访问其子节点。
兼容方式：
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text = code;
}
document.body.appendChild(script);
}
2. 动态样式
①外部链接
function loadStyles(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
②使用<style>元素来包含嵌入式CSS
□IE将<style>视为一个特殊的、与<script>类似的节点，不允许访问其子节点。
□在重用一个<style>元素并再次设其styleSheet.cssText属性，有可能导致浏览器崩溃。
fucnction loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
3. 操作表格
①为<table>元素添加的属性和方法
□caption：保存着对<caption>元素（如果有）地指针；
□tBodies：是一个<tobdy>元素的 HTMLCollection;
□tFoot：保存着对<tfoot>元素（如果有）的指针；
□tHead：保存着对<thead>元素（如果有）的指针；
□rows：是一个表格中所有行的HTMLCollection；
□createTHead()：创建<thead>元素，将其放到表格中，返回引用。
□createCaption()：
□deleteTHead()：删除<thead>元素。
□deleteTFoot()：
□deleteCaption()：
□deleteRow(pos)：
□insertRow(pos)：向rows集合中指定位置插入一行。
②为<tbody>元素添加的属性和方法有：
□rows：保存着<tbody>元素中行的HTMLCollection。
□deleteRow(pos)：删除指定位置的行；
□insertRow(pos)：向rows集合中的指定位置插入一行，返回插入行的引用。
③为<tr>元素添加的属性和方法
□cells：保存着<tr>元素中单元格的HTMLCollection；
□deleteCell(pos)：删除指定位置的单元格。
□insertCell(pos)：向cells集合中指定位置插入一单元格，返回插入的单元格引用。
4. 使用NodeList
□NodeList及其“近亲”NamedNodeMap（Element类型中的attribute属性）和HTMLCollection，这三个集合都是“动态的”，每当文档结构发生变化时，它们都会得到更新。
□尽量减少访问NodeList的次数。因每次访问NodeList，都会运行一次基于文档的查询。可考虑将从NodeList取得的值缓存起来。

标签：desclassstylelogcomsi使用it代码
1.对 DOM 的两个主要的扩展是 Selectors API（选择符 API）和 HTML5
2.Selectors API Level 1 的核心是两个方法： querySelector()和 querySelectorAll()。
3.querySelector()：方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。用法如下：
1//取得 body 元素
2varbody = document.querySelector("body");
3//取得 ID 为"myDiv"的元素
4varmyDiv = document.querySelector("#myDiv");
5//取得类为"selected"的第一个元素
6varselected = document.querySelector(".selected");
7//取得类为"button"的第一个图像元素
8varimg = document.body.querySelector("img.button");
通过 Document 类型调用 querySelector()方法时，会在文档元素的范围内查找匹配的元素。而通过 Element 类型调用 querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
querySelectorAll()：方法接收的参数与 querySelector()方法一样，都是一个 CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个 NodeList 的实例（一张快照，不是动态查询的结果）。如果没有找到匹配的元素， NodeList 就是空的。
能够调用 querySelectorAll()方法的类型包括 Document、DocumentFragment 和 Element。
要取得返回的 NodeList 中的每一个元素，可以使用 item()方法，例如： strongs.item(i) 也可以使用方括号语法，例如： strong = strongs[i];
matchesSelector()：适用于Element 类型，这个方法接收一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。例如：
1if(document.body.matchesSelector("body.page1")){
2//true
3}
在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被 querySelector()或querySelectorAll()方法返回。
元素遍历：对于元素间的空格，就会有在使用 childNodes 和 firstChild 等属性时的行为不一致。
childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素； firstChild 的元素版。
lastElementChild：指向最后一个子元素； lastChild 的元素版。
previousElementSibling：指向前一个同辈元素； previousSibling 的元素版。
nextElementSibling：指向后一个同辈元素； nextSibling 的元素版。
HTML5中的DOM扩展：
getElementsByClassName()：HTML5 添加的 getElementsByClassName()方法,接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。传入多个类名时，类名的先后顺序不重要。例如：
1//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
2varallCurrentUsernames = document.getElementsByClassName("username current");
3//取得 ID 为"myDiv"的元素中带有类名"selected"的所有元素
4varselected = document.getElementById("myDiv").getElementsByClassName("selected");
在 document 对象上调用getElementsByClassName()始终会返回与类名匹配的所有元素，在元素上调用该方法就只会返回后代元素中匹配的元素。
classList 属性：HTML5 新增了一种操作类名的方式，新集合类型 DOMTokenList 的实例。DOMTokenList 有一个表示自己包含多少元素的 length 属性，而要取得每个元素可以使用 item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
使用方法如下：
1//删除"user"类
2//首先，取得类名字符串并拆分成数组
3varclassNames = div.className.split(/\s+/);
4//找到要删的类名
5varpos = -1,
6i,
7len;
8for(i=0, len=classNames.length; i < len; i++){
9if(classNames[i] == "user"){
10pos =i;
11break;
12}
13}
14//删除类名
15classNames.splice(i,1);
16//把剩下的类名拼成字符串并重新设置
17div.className = classNames.join(" ");
以上代码采用classList只用下面一行就可以了： div.classList.remove("user");
辅助管理 DOM 焦点的功能：
document.activeElement 属性：这个属性始终会引用 DOM 中当前获得了焦点的元素。
元素获得焦点的方式有页面加载、用户输入（通常是通过按 Tab 键）和在代码中调用 focus()方法。例如：
1varbutton = document.getElementById("myButton");
2button.focus();
3alert(document.activeElement === button); //true
默认情况下，文档刚刚加载完成时， document.activeElement 中保存的是 document.body 元素的引用。文档加载期间， document.activeElement 的值为 null。
document.hasFocus()方法：新增的方法，这个方法用于确定文档是否获得了焦点。
1varbutton = document.getElementById("myButton");
2button.focus();
3alert(document.hasFocus()); //true
文档中的元素button获得了焦点，这样就可以算作文档获得了焦点
HTMLDocument的变化：
readyState 属性：Document 的 readyState 属性有两个可能的值：
loading，正在加载文档；
complete，已经加载完文档。
检测页面的兼容模式就成为浏览器的必要功能。IE 为此给 document 添加了一个名为 compatMode 的属性，这个属性就是为了告诉开发人员浏览器采用了哪种渲染模式。在标准模式下， document.compatMode 的值等于"CSS1Compat"，而在混杂模式下， document.compatMode 的值等于"BackCompat"。
document.head 属性：用来引用文档的<head>元素，可以使用下面的方法， varhead = document.head || document.getElementsByTagName("head")[0];
字符集属性：
charset 属性：示文档中实际使用的字符集，也可以用来指定新字符集。默认情况下，这个属性的值为"UTF-16"。但可以通过<meta>元素、响应头部或直接设置 charset 属性修改这个值。例如： alert(document.charset); //"UTF-16"document.charset = "UTF-8";
defaultCharset属性：表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。如果文档没有使用默认的字符集，那 charset 和 defaultCharset 属性的值可能会不一样。
自定义属性：
HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 dataset 属性的值是 DOMStringMap 的一个实例，也就是一个名值对儿的映射。在这个映射中，每个 data-name 形式的属性都会有一个对应的属性，只不过属性名没有 data-前缀（比如，自定义属性是 data-myname，那映射中对应的属性就是 myname）。例如：
1<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
2vardiv = document.getElementById("myDiv");
3//取得自定义属性的值
4varappId =div.dataset.appId;
5varmyName =div.dataset.myname;
6//设置值
7div.dataset.appId = 23456;
8div.dataset.myname = "Michael";
插入标记：
innerHTML 属性：在读模式下， innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。在写模式下， innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
不要指望所有浏览器返回的 innerHTML 值完全相同。
在写模式下， innerHTML 的值会被解析为 DOM 子树，替换调用元素原来的所有子节点。因为它的值被认为是 HTML，所以其中的所有标签都会按照浏览器处理 HTML 的标准方式转换为元素（同样，这里的转换结果也因浏览器而异）。
为 innerHTML 设置的包含 HTML 的字符串值与解析后 innerHTML 的值大不相同。例如设置如下：div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>"; ，解析之后的结果如下：<div id="content">Hello & welcome, <b>"reader"!</b></div>原因在于返回的字符串是根据原始 HTML 字符串创建的 DOM 树经过序列化之后的结果。
使用 innerHTML 属性也有一些限制。比如，在大多数浏览器中，通过 innerHTML 插入<script>元素并不会执行其中的脚本。
outerHTML 属性：在读模式下， outerHTML 返回调用它的元素及所有子节点的 HTML 标签。在写模式下， outerHTML会根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素。例如：
1<div id="content">
2<p>This is a <strong>paragraph</strong> with a list following it.</p>
3<ul>
4<li>Item 1</li>
5<li>Item 2</li>
6<li>Item 3</li>
7</ul>
8</div>
如果在<div>元素上调用 outerHTML，会返回与上面相同的代码，包括<div>本身。不过，由于浏览器解析和解释 HTML 标记的不同，结果也可能会有所不同。
使用 outerHTML 属性以下面这种方式设置值：div.outerHTML = "<p>This is a paragraph.</p>";结果，就是新创建的<p>元素会取代 DOM 树中的<div>元素。
insertAdjacentHTML()方法：接收两个参数：插入位置和要插入的 HTML 文本。第一个参数必须是下列值之一：
"beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
"afterend"，在当前元素之后插入一个紧邻的同辈元素。
scrollIntoView()方法:scrollIntoView()可以在所有 HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入 true 作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入 false 作为参数，调用元素会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐.
专有扩展：
文档模式
children属性：这个属性是 HTMLCollection 的实例，只包含元素中（同样还是元素）的子节点。即在元素只包含元素子节点时，children 属性与 childNodes 没有什么区别。
contains()方法：调用 contains()方法的应该是祖先节点，也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法返回 true；否则，返回 false。
插入文本：
innertText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。例如：
1<div id="content">
2<p>This is a <strong>paragraph</strong> with a list following it.</p>
3<ul>
4<li>Item 1</li>
5<li>Item 2</li>
6<li>Item 3</li>
7</ul>
8</div>
9InnerTextExample01.ht
读取这个div的innerText的时候：返回This is a paragraph with a list following it.
Item 1
Item 2
Item 3
使用 innerText 属性设置这个<div>元素的内容的时候： div.innerText = "Hello world!"; ，得到的页面的HTML的代码是 <div id="content">Hello world!</div> ，设置该属性移除了先前存在的所有子节点，完全改变了 DOM子树。
设置 innerText 永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点，
就必须要对文本进行 HTML 编码。利用这一点，可以通过 innerText 属性过滤掉 HTML 标签。方法是
将 innerText 设置为等于 innerText，这样就可以去掉所有 HTML 标签，例如： div.innerText = div.innerText;
outerText 属性：作用范围扩大到了包含调用它的节点，在读取文本值时， outerText 与 innerText 的结果完全一样。但在写模式下， outerText 就完全不
同了： outerText 不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。
滚动
尽管DOM 作为API 已经非常完善了，但为了实现更多的功能，仍然会有一些标准或专有的扩
展。2008 年之前，浏览器中几乎所有的DOM 扩展都是专有的。此后，W3C 着手将一些已经
成为事实标准的专有扩展标准化并写入规范当中。
对DOM 的两个主要的扩展是Selectors API（选择符API）和HTML5。这两个扩展都源自开发社区，
而将某些常见做法及API 标准化一直是众望所归。此外，还有一个不那么引人瞩目的Element Traversal
（元素遍历）规范，为DOM 添加了一些属性。虽然前述两个主要规范（特别是HTML5）已经涵盖了大
量的DOM 扩展，但专有扩展依然存在。本章也会介绍专有的DOM 扩展。
11.1
选择符API
众多JavaScript 库中最常用的一项功能，就是根据CSS 选择符选择与某个模式匹配的DOM 元素。
实际上，jQuery（www.jquery.com）的核心就是通过CSS 选择符查询DOM 文档取得元素的引用，从而
抛开了getElementById()和getElementsByTagName()。
Selectors API（www.w3.org/TR/selectors-api/）是由W3C 发起制定的一个标准，致力于让浏览器原
生支持CSS 查询。所有实现这一功能的JavaScript 库都会写一个基础的CSS 解析器，然后再使用已有的
DOM 方法查询文档并找到匹配的节点。尽管库开发人员在不知疲倦地改进这一过程的性能，但到头来
都只能通过运行JavaScript 代码来完成查询操作。而把这个功能变成原生API 之后，解析和树查询操作
可以在浏览器内部通过编译后的代码来完成，极大地改善了性能。
Selectors API Level 1 的核心是两个方法：querySelector()和querySelectorAll()。在兼容的浏
览器中，可以通过Document 及Element 类型的实例调用它们。目前已完全支持Selectors API Level 1
的浏览器有IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和Opera 10+。
11.1.1 querySelector()方法
querySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹
配的元素，返回null。请看下面的例子。
//取得body 元素
var body = document.querySelector("body");
//取得ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
//取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");
通过Document 类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素。而
通过Element 类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
CSS 选择符可以简单也可以复杂，视情况而定。如果传入了不被支持的选择符，querySelector()
会抛出错误。
11.1.2 querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS 选择符，但
返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList 的实例。
具体来说，返回的值实际上是带有所有属性和方法的NodeList，而其底层实现则类似于一组元素
的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用NodeList 对象通常会引起的大
多数性能问题。
只要传给querySelectorAll()方法的CSS 选择符有效，该方法都会返回一个NodeList 对象，
而不管找到多少匹配的元素。如果没有找到匹配的元素，NodeList 就是空的。
与querySelector()类似，能够调用querySelectorAll()方法的类型包括Document、
DocumentFragment 和Element。下面是几个例子。
//取得某<div>中的所有<em>元素（类似于getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");
要取得返回的NodeList 中的每一个元素，可以使用item()方法，也可以使用方括号语法，比如：
var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
strong = strongs[i]; //或者strongs.item(i)
strong.className = "important";
}
同样与querySelector()类似，如果传入了浏览器不支持的选择符或者选择符中有语法错误，
querySelectorAll()会抛出错误。
11.1.3 matchesSelector()方法
Selectors API Level 2 规范为Element 类型新增了一个方法matchesSelector()。这个方法接收
一个参数，即CSS 选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。看例子。
if (document.body.matchesSelector("body.page1")){
//true
}
在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被querySelector()或
querySelectorAll()方法返回。
截至2011 年年中，还没有浏览器支持matchesSelector()方法；不过，也有一些实验性的实现。
IE 9+通过msMatchesSelector()支持该方法，Firefox 3.6+通过mozMatchesSelector()支持该方法，
Safari 5+和Chrome 通过webkitMatchesSelector()支持该方法。因此，如果你想使用这个方法，最
好是编写一个包装函数。
function matchesSelector(element, selector){
if (element.matchesSelector){
return element.matchesSelector(selector);
} else if (element.msMatchesSelector){
return element.msMatchesSelector(selector);
} else if (element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
} else if (element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
} else {
throw new Error("Not supported.");
}
}
if (matchesSelector(document.body, "body.page1")){
//执行操作
}

DOM的两个主要的扩展是Selectors API(选择符API)和HTML5
11.1 选择符API
根据CSS选择符选择与某个模式匹配的DOM元素，从而抛开getElementById(),getElementsByTagName_r()。
querySelector(); //(Selectors API Level1)接收一个CSS选择符，返回与该模式匹配的第一元素，如果没有找到匹配的元素就返回null。
querySelectorAll(); //(Selectors API Level1)返回的是所有匹配的元素，是一个NodeList的实例，结果不是动态的
matchesSelector(); //(Selectors API Level2,目前还没有浏览器支持)，接收一个CSS选择符，如果调用元素与该选择符匹配，返回true,反之false
11.2 元素遍历(Element Traversal)
childElementCount //返回子元素(不包括文本节点和注释)的个数
firstElementChild,lastElementChild,previousElementSibing,nextElementSibling //针对Element类型
11.3 HTML5
getElementsByClassName(); //通过document或所有HTML元素调用该方法
classList //所有元素新增该属性，是新集合类型DOMTokenList的实例,length,add(value),contains(value),remove(value),toggle(value)
document.activeElement //该属性始终会引用DOM中当前获得了焦点的元素
document.hasFocus() //用于确定文档是否获得了焦点
document.readyState //loading(正在加载文档),complete(已经加载完文档)
document.compatMode //CSS1Compat(标准模式),BackCompat(混杂模式)
document.head //
document.charset //表示文档中实际使用的字符集
document.defaultCharset //根据默认浏览器及操作系统的设置，当前文档默认的字符集
dataset //可为元素添加非标准、前缀为'data-'的属性，通过元素的dataset属性来访问，其为DOMStringMap的实例
innerHTML //调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标签
outerHTML //调用元素及所有子节点的HTML标签
insertAdjacentHTML()//接收两个参数：插入位置和要插入的HTML文本
scrollIntoView() //可以在所有HTML元素上调用该方法，调用元素出现在视口中。
11.4 专有扩展
IE的文档模式, document.documentMode
children属性 //元素中还是元素的子节点
contains(); //判断某节点是不是另一个节点的后代，document.documentElement.contains(document.body)
compareDocumentPosition(); //DOM3,也能确定节点间的关系
innerText,outerText属性,
textContent属性 //DOM3，同innerText
scrollIntoViewIfNeeded(alignCenter), scrollByLines(lineCount), scrollByPages(pageCount)

javascript--11DOM扩展

猜你喜欢