javascript学习笔记——DOM扩展，InnerHTML属性、outerHTML属性、contains()方法

1.querySelector()方法

接收css选择符，返回与该模式匹配的第一个元素，如果没有匹配元素则返回null；

通过document类型调用该方法则会在文档元素的范围内查找匹配元素；

通过Element类型调用该方法则则只会在该元素后代元素范围内查找匹配元素；

document.querySelector("#myDiv");

2.querySelectorAll()方法

接收css选择符，返回的是NodeList()的实例，如果找不到匹配的，实例为null；

var selector=document.querySelectorAll(".selector");

取得返回的NodeList中的每一个元素 ，可以使用item()方法；

var i,len,selsctor;
for(i=0,len=selector.length;i<len;i++){
  selector=selector[i];
  selector.className="important";
}

 3.HTML5

1）document.activeElement属性始终会引用DOM中当前获得了焦点的元素；

文档刚加载完成时，document.activeElement中保存的是document.body元素的引用，文档加载期间，document.activeElement的值为null；

2）document.hasFocus()方法用于确定文档是否获取了焦点；可以知道用户是不是正在与页面进行交互；

3）IE添加了检测页面的兼容模式的属性：document.compatMode;

标准模式：document.compatMode="CSS1Compat";

混杂模式：document.compatMode="BackCompat";

 4.插入标记

1）innerHTML属性（并不是所有的浏览器都支持该属性）

在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记；

在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点；

<div>
<p>this is me</p>
<ul>
  <li>11</li>
  <li>22</li>
  <li>33</li>
</ul>
</div>

​

对于上面的div元素来说，它的innerHTML属性会返回如下字符串；

<p>this is me</p>
<ul>
  <li>11</li>
  <li>22</li>
  <li>33</li>
</ul>

2）outerHTML属性

在读模式下，outerHTML返回调用它的元素及所有子节点的HTML标签；

在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用的元素；

 沿用上面innerHTML的属性的例子，则div元素调用outerHTML，会返回与上面相同的代码，包括<div>本身；

而使用outerHTML属性以下面这种方式设置值；

div.outerHTML="<p>this is me</p>";

这其实相当于DOM操作中，创建一个<p>元素取代DOM树中的<div>元素；

3）insertAdjacentHTML(插入位置，插入html文本)

“beforebegin”，在当前元素之前插入一个紧邻的同辈元素；

“afterbegin”，在当前元素之下插入一个新的子元素，或在第一个子元素之前再插入新的子元素；

“beforeend”，在当前元素之下插入一个新的子元素，或在第一个子元素之后再插入新的子元素；

“afterend”，在当前元素之后，插入一个紧邻的同辈元素；

//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin","<p>hello world</p>");

4）性能问题

①在使用innerHTML、outerHTML属性和inserAdjacentHTML()方法时，最好先手工删除被替换的元素的所有事件处理程序和js对象属性；因为元素被删除或替换后已经不存在文档树中，而元素与事件之间的绑定关系却依然还在内存中，没有一并删除，这将可能导致内存占用问题。

②在设置innerHTML和outerHTML时，就会创建一个HTML解析器，这个解析器是在浏览器级别的代码基础上运行的，因此比js快得多，但创建和销毁HTML解析器也会带来性能损失，所以，最好能够将设置innerHTML或outerHTML的次数控制在合理的范围内。

 5.contains()方法

1）调用contains()方法的应该是祖先节点也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点，如果检测得到就返回true；否则返回false；

alert(document.documentElement.contains(document.body));   //true

2）compareDocumentPosition()可以确定节点的关系；

返回一个表示该关系的位掩码

1  无关    2  居前    4居后     8 包含     16倍包含

var result=document.documentElement.compareDocumentPosition(document.body);
alert(!!(result & 16));      //20(4+16)  表示居后加上被包含

 6.插入文本

innerText属性：可以操作元素中包含的所有的文本内容，包含子文档树中的文本；

outerText属性：与innerText基本上没什么区别，就是作用范围扩大到了包含调用它的节点；这个属性会导致调用它的元素不存在，因此不常用；建议尽可能的不要使用这个属性；