@Dreamingboy 2017-05-07T12:55:32.000000Z 字数 6167 阅读 1070

11 DOM 扩展

JavaScript

11.1.1 querySelector()方法

接收一个CSS选择符，返回与该模式匹配的第一个元素，否则返回null

document.querySelector("body");
document.querySelector("#myid");

对Document使用这个方法时会对整个文件进行遍历搜索，对Element使用时会对元素的子元素进行遍历搜索，然后返回第一个元素

11.1.2 querySeletorAll()

接收一个CSS选择符，返回一个带有所有属性和方法是NodeList。这个方法不会持续不断地对整个文档进行搜素的动态查询，而是返回执行的那个时刻的NodeList
适用于Document、Element和DocumentFragment

var a=document.getElementById("myId").querySelectorAll("em")
var a=document.getElementById("myId").querySelectorAll("p")

对于返回的NodeList，要去的其中的子元素，可以采用item()方法和直接使用索引

11.1.3 matchesSelector()

接收一个CSS选择符，如果调用元素与该选择符匹配，返回true，反之返回false。

11.2 元素遍历

为了解决IE和其他浏览器在解析空格上面的差异带来的兼容性问题，Element Traversal API新增加了一些属性

childElemenCount：返回子元素（不包括文本节点和注释）的个数
firstElementChild：指向第一个子元素
lastElementChild：指向最后一个元素
previousElementSibling：指向前一个同辈元素
nextElementSibling：指向下一个同辈元素

支持的浏览器：IE9+、Firefox3.5+、Safari4+、Chrome和Opera10＋
遍历子元素

var i,len, child=element.firstElenmentChil;
while(child !== element.lastElementChild){
  processChild(child);
  child =   child.nextElementSubling;
  }

11.3 HTML5

11.3.1 类的相关扩充

1、getElementByClassName()
接收一个参数，包含一个类名或者是多个类名的字符串，返回指定类的所有元素的NodeList，对类名的顺序不要求

var a = documentByClassName("current next");//返回同时具有这两个类名的元素的NodeList
var b = documentByCalssName{"a").getElementByClassName("b");

支持的浏览器：IE9+、Firefox3+、Safari3.1+、Chrome和Opera9.5+

2、classList属性
为了方便对元素的类名进行修改，HTML5增加了一个新的集合类型：DOMTokenList
classList是其一个实例

DOMTokenList
1、length、item()和数字索引访问每个元素
2、常见的方法：

add（value）：将指定的字符串添加到列表中，如果值存在就不添加
contains（value）：检查列表中是否具有给定的字符串，有的话返回true，反之则是false
remove（value）：删除给定的字符串
toggle（value）：列表中若存在给定的值，删除，反之添加。

div.className.add("a");
div.className.remove("b");

11.3.2　焦点管理

document.activeElement属性
始终引用DOM中当前获得焦点的元素。
获得焦点的方式：页面加载、用户输入和调用focus()方法。
默认情况下，文档刚刚加载结束时，document.activeElement中保存的是document.body元素的引用，而加载期间，document.activeElement为null

var b = document.getElementsByClassName("a");
 b[0].focus();
 alert(ducoment.activeElement === b);//true

document.hasFocus()方法
用于确定文档是否获得焦点

var a=docuemnt.getElementById("b");
b.focus();
alert(document.hasFocus(););//true

兼容性：IE4+、Firefox3+、Safari4+、Chrome和Opera8+

11.3.3 HTMLDocument的变化

1、readyState

loading：表示文档
complete：
可以使用这个属性来作为判断文档是否加载完毕的指示器。
兼容性
IE4+、Firefox3.6+、Safari、Chrome和Opera9+

if (document.readyState == "loading"){
   do something
   }

2、兼容模式
document.compatMode
检测浏览器使用的是那种渲染模式
兼容性：Firefox、Safari3.1+、Opera和Chrome
标准模式：CSS1Compat；混杂模式：BackCompat

if (document.compatMode == "CSS1Compat"){
  do something
  }

3、head属性
可以直接引用<head>标签
兼容性：chrome和Safari5

var a = document.head|| document.getElementsByTagName("head")[0];

11.3.4 字符串属性

1、charset属性
表示文档中实际使用的字符集，默认情况下是UTF-16
兼容性：IE、Safari、Opera和Chrome

alert(document.charset);
document.charset = "UTF-8"

2、defaultCharset 属性
表示根据默认额浏览器及操作系统的设置，当前文档默认的字符集应该是什么
兼容性：IE、Safari和Chrome

11.3.5 自定义数据属性

HTML可以自定义非标准的属性，但是要在前面添加data-，这些属性可以随意添加，随便命名

<div id="a" data-apply="1234" data-myName="Tom"></div>

1、dataset属性
访问自定义的属性的值
**dataset属性的值是一个名值对的映射 **

var div = document.getElementById("a");
var a= div.dataset.apply;
var b= div.dataset.myName;
var a= 456;
var b= "Mike";

11.3.6 插入标记

1、innerHTML
读的模式：返回与调用元素的所有子节点(包括元素、注释和文本节点）对应的HTML标记
写的模式：根据指定的值创建新的DOM树，之后用新的DOM树替换调用元素原先的所有子节点

读的模式下：

<div id = "a">
  <ul>
   <li></li>
   <li></li>
   <li></li>
  </ul>
</div>
var b = document.getElementById("a");
var c = b.innerHTML;
c;
//"<ul><li></li><li></li><li></li></ul>"

写的模式下：

function innerhtml(){
        var a = document.getElementById("text");
        var b = a.innerHTML;
        var b = "Hello World";
        alert(b);
    }
    innerhtml();//Hello World

innerHTML的限制性

大多数浏览器不支持插入元素。但是IE8及更早的版本支持，不过条件是为<script>指定defer属性，<script>必须位于有作用域的元素之后，所以，在插入脚本的时候可以使用一个具有作用域的元素来包含这个<script>

div.innerHTML = "_<script defer>alert('hello');</script>";
div.innerHTML = "<div><script defer>alert('hello');</script>;"
div.innerHTML = "<input type = \"hidden\"><script defer>alert'hello'</script></input>;//首选

多数浏览器可以插入元素，但是在IE8及更早的版本中也是没有作用域的元素，所以还是要在前面加一个具有作用域的元素。
支持innerHTML属性的元素：<col>/<colgroup>/<frameset>/<head>/<html>/<style>/<table>/<tbody>/<thead>/<tfoot>/<tr>

window.toStaticHTML()
只有IE8支持这个属性，接收一个HTML的字符串，返回一个经过无害处理的版本（删除所有脚本节点和事件处理程序属性）

2、outHTML
读的模式：返回调用它的元素及所有子节点的HTML标签
写的模式：根据指定的HTML字符串创建新的DOM子树，用这个DOM子树完全替换调用元素。

兼容性：IE4+、Safari4+、Chrome、Opera8+、Firefox7+

读的模式

<div id = "a">
  <ul>
   <li></li>
   <li></li>
   <li></li>
  </ul>
</div>
var b = document.getElementById("a");
var c = b.outerHTML;
alert(c);
//"<div id="a"><ul><li></li><li></li><li></li></ul></div>"

写的模式

<div id = "a">
  <ul>
   <li></li>
   <li></li>
   <li></li>
  </ul>
</div>
var b = document.getElementById("a");
var c = b.outerHTML;
var c = "<p>hello</p>";
alert(c);
//"<p>hello</p>"//整个<div>被替换成<p>标签

3、insertAdjacentHTML()
插入相邻的HTML。
接收两个参数：要插入的位置和要插入的HTML文本，第一个参数的几种选择：

beforebegin：在当前元素之前插入一个紧邻的同辈元素
afterbegin：在当前元素之下插入一个新的子元素或者在第一个子元素之前再插入新的子元素
beforeend：在当前元素之前插入新的子元素或者是在最后一个子元素之后再插入新的子元素
afterend：在当前元素之后插入一个紧邻的同辈元素

11.3.7 scrollIntoView()

可以所有的HTML元素上面调用这个方法，通过滚动浏览器创窗口或者是某个容器元素，调用元素就会出现在视口中。传入true或者是不传入参数，窗口滚动之后调用元素会尽可能和视口顶部平齐，传入false，调用元素会尽可能全部出现在视口中

兼容性：IE、Firefox、Safari、opera

11.4 专有扩展

11.4.1 文档模式

强制使用某种文档模式：在<meta>中声明

IE的常见的版本：

Edge：始终以最新的文档模式渲染页面，忽略文档类型声明
EmulateIE9：如果有文档声明使用IE9标准模式来渲染页面，否则将文档模式设置为IE5
EmulateIE8：如果有文档声明使用IE8标准模式渲染页面，否则将文档模式设置为IE5
EmulateIE7：如果有文档声明使用IE7标准模式渲染页面，否则将文档模式设置成IE5
9：强制以IE9标准渲染页面
8：强制以IE8标准渲染页面
7：强制以IE7标准渲染页面
5：强制以IE5标准渲染页面

<meta http-equiv="x-UA-Complatible" content="IE=EmulateIE8">
<meta http-equiv="x-UA-Complatible" content="IE=8">

document.documentWode：获知当前文档使用的是哪种文档模式

11.4.2 children属性

children：包含元素中属于元素的子节点，属性值和childNodes一样

11.4.3 contains()属性

用于直接检测一个节点是不是另外一个节点的子节点。如果是，返回true反之则是false
接收一个参数：要检测的子节点

兼容性：IE、Firefox、Safari、Opera、Chrome

2、compareDocumentPosition()方法
用于确定两个节点之间的关系，返回表示关系的位掩码

掩码	节点关系
1	无关（给定的节点不在当前文档中）
2	给定的节点位于参考节点之前
4	给定的节点在参考节点之后
8	给定的节点是参考节点的祖先
16	给定的节点是参考节点的后代

var a = document.documentElement.compareDocumentPosition(document.body);
alert(a);//4

11.4.4 插入文本

1、innerText属性

读：按照由浅入深的顺序，将子文档树中的所有文本拼接起来
写：删除元素的所有子节点，插入包含对应文本值的文本节点

兼容性：IE4+、Safari3+、Opera8+、Chrome

<div id="text">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>
var a=document.getElementById("text");
alert(a.innerText);//item1,item2,item3
var b=a;
b.innerText="another world!";
alert(b);//another world!

textContent属性
作用类似于innerText
兼容性：Firefox、IE9+、Safari3+、Opera10+和Chrome

2、outerText属性
类似于outerHTML，其作用范围包括元素自身和子元素，在写的模式下，替换包括元素自身及其子节点。
兼容性：IE4+、Safari3+、Opera8+、Chrome

11.4.5 滚动

scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或者是容器元素，最终让它可见。将alignCenter指定为true时，尽量将元素显示在视口中部。作用对象是元素的容器
scrollByLines(lineCount)：将元素的内容滚动指定的行高，linecount可以是正值也可以是负值。作用对象是元素本身
scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。作用对象是元素本身