javascript DOM扩展

对DOM的扩展目前主要有两个，一个是Selectors API(选择符API)，另一个是HTML5.

选择符API

这个是通过CSS选择符选择与特定模式匹配的DOM元素，主要代表是jQuery。Selector API Level1的核心是两个方法：querySelector()和querySelectorAll().在兼容的浏览器中，可以通过Document和Element类型来调用它们。

querySelector()方法，参数为一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配元素返回null。使用document对象调用这个方法的时候，会在全文档内进行匹配。当使用element对象调用这个方法时，只在element的后代元素内查找匹配。

querySelectorAll()方法，接收参数同querySelector（）一样，返回一个NodeList的实例。

matchesSelector()方法，这个方法接受一个参数，CSS选择符，如果调用元素与该选择符匹配，返回true，否则返回false。为了解决浏览器兼容问题，可以使用下面的包装函数：

function matchesSelector(element,selector){

  if(element.matchSelector){

    return element.matchesSelector(selector);

  }else if(element.msMatchesSelector){//IE

  return element.msMatchesSelector(selector);

  }else if(element.mozMatchesSelector){//FireFox

  return element.mozMatchesSelector(selector);

  }else if(element.webkitMatchesSelector){//safari,chorme

  return element.webkitMatchesSelector(selector);

  }else{

  throw new Error("No supportted!");

  }

}

元素的遍历问题

为了解决一些浏览器兼容问题，Element Traversal API为DOM元素添加了5个属性。

childElementCount:返回子元素的个数

firstElementChild:返回第一个子元素

lastElementChild:返回最后一个子元素

previousElementSibling:返回前一个同辈元素

nextElementSibling:指向后一个同辈元素

HTML5扩展

HTML规则围绕如何使用新增标记定义了大量的js API，其中一些api与DOM重叠，定义了浏览器应该支持的DOM扩展。

与类相关的扩展

getElementsByClassName() ,接收一个参数，参数为一个包含一个或者多个的类名，返回的结果就是带有指定类的所有元素的NodeList。传入多个类名的时候，类名的先后顺序不重要。它与document.getElementsByTagName有类似的效果。

classList属性

使用这个属性的一些方法可以简化class属性的操作，例如：

add(value):将新的添加进去，已存在就不添加

contains(value)是否存在value，存在true，不存在false

remove（value）：删除value

toggle（value）：如果存在，删除它，如果不存在，添加它

焦点管理

document.activeElement属性在HTML5中始终代表当前焦点指向的元素。

另外，新增的document.hasFocus()用于确定文档是否获取了焦点。

HTML对HTMLDocument的扩展

readyState:  loading：表示正在加载  complete：表示完成

使用方式：   if(document.readyState=="complete"){   // 执行操作   }

兼容模式

页面采用标准模式的情况下   document.compatMode="CSS1Compat"

页面采用混杂模式的情况下   document.compatMode==“BackCompat”

head属性

引入新的属性引用html的head部分：document.head

兼容性js代码：

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

字符集属性

document.charset//文档实际使用的字符集

document.defaultCharset//文档的默认字符集

自定义数据属性

HTML5可以为元素添加非标准属性，但要添加前缀data-

例子:标签部分：

<div id="mydiv" data-appId="12345" data-myname="Nicholas"/>

获取属性的js部分

var div=document.getElementById("mydiv");

var appId=div.dataset.appId;

var myname=div.dataset.myname;

div.dataset.appId="000";

if(div.dataset.appId){

  alert(div.dataset.appId);

}

由于innerHTML的支持各个浏览器相同，因此在往innerHTML中插入文本的时候要预先做一下检查。

在读模式下，outerHTML属性返回调用它的元素以及所有子节点的HTML标签；写模式下，根据指定的HTML字符串创建新的DOM子树，然后这个DOM子树完全替换调用元素。

insertAdjecentHTML()，接收两个参数，插入位置和要插入的HTML文本。第一参数必须为下列值之一：

beforebegin,afterbegin,beforeend,afterend.第二个参数是一个HTML字符串。

效率上来说，这些方式比js的DOM操作效率高，但是需要注意的是太频繁的操作会带来性能上的损失。

窗口滚动方法

scrollIntoView()，屏幕滚动，如果参数设为true，或者不设，则调用元素的顶部与视口平齐；设为false则尽可能的全部出现在视口中。

document.forms[0].scrollIntoView();

另外还有一些其他的扩展，但是这些扩展都是为了弥补一些缺陷设立的，但是还没有纳入到一些公认的规范当中。