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基本上没什么区别,就是作用范围扩大到了包含调用它的节点;这个属性会导致调用它的元素不存在,因此不常用;建议尽可能的不要使用这个属性;