html5 dom扩展,JS学习10（DOM扩展）

选择符API

这个API存在的主要目的就是让JS原生支持CSS查询。

querySelector()

这个方法接收一个CSS选择符，返回与该模式匹配的第一个元素或null。

var body = document.querySelector("body");

querySelectorAll()

这个方法同样接收一个CSS选择符，以静态NodeList的形式返回所有匹配的元素。

var strongs = document.querySelectorAll("p strong");

strong = strongs[i];

strong = strongs.item(i);

matchesSelector()

接收一个CSS选择符，并返回调用元素与该选择符是否匹配。

if (document.body.matchesSelector("body.page1")){

//true

}

元素遍历

由于空白text类型节点的问题，childNodes里面会包含空的文本节点。这导致遍历元素很不方便。于是有了这几个属性，它们都只返回真正的元素：

childElementCount

firstElementChild

lastElementChild

previousElementSibling

nextElementSibling

这样一来遍历元素就不用判断节点类型了：

var i,

len,

child = element.firstElementChild;

while(child != element.lastElementChild){

processChild(child);

child = child.nextElementSibling;

}

HTML5

与类相关的扩充

getElementsByClassName()

接收一个或多个类名，返回动态NodeList。

var selected = document.getElementById("myDiv").getElementsByClassName("username current");

classList

这个是便于大家添加，删除类名的，之前使用className属性获得的是一个字符串，每次要改变都得找出要改的那个，删除或改变，再拼出新的字符串。有了这个属性就方便多了。

classList是新的类型DOMTokenList的实例。提供了4个方法：

add(value)

contains(value)

remove(value)

toggle(value) 如果存在就删除，不存在就添加

div.classList.add("current");

div.classList.toggle("user");

div.classList.remove("user");

if (div.classList.contains("bd")) {

}

焦点管理

添加了document.activeElement属性，这个属性始终引用DOM中当前获得焦点的元素。默认情况下，当文档刚刚加载完成时，这里面保存的是body元素，加载过程中是null。

添加了document.hasFocus()方法，用于确定元素是否获得焦点。

var button = document.getElementById("myButton");

button.focus();

alert(document.activeElement === button); //true

alert(document.hasFocus()); //true

HTMLDocument的变化

readyState属性

指示文档是否加载完成，有两个可能的值：loading和complete。

if (document.readyState == "complete"){

}

兼容模式

区分渲染页面的模式是标准的还是混杂的。属性为document.compatMode。标准模式时值为CSS1Compat，混杂模式时为BackCompat。

if (document.compatMode == "CSS1Compat"){

alert("Standards mode");

} else {

alert("Quirks mode");

}

head属性

像body一样可以直接访问了document.head。

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

字符集属性

HTML5新增了几个与文档字符集有关的属性

charset表示文档中实际使用的字符集，默认为UTF-16，可以通过

来设置，或者响应头部，或者在JS中直接设置这个属性。

alert(document.charset);

alert(document.defaultCharset);

另一个属性是defaultCharset，代表根据默认浏览器设置，字符集应该是什么。

自定义数据属性

使用data-加自定义名，可以定义自己的节点特性，在JS里使用dataset访问，这个属性的值是一个DOMStringMap的一个实例，也就是一个键值对的映射。访问时不用带data-前缀。

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

var appId = div.dataset.appId;

var myName = div.dataset.myname;

div.dataset.appId = 23456;

div.dataset.myname = "Michael";

alert(div.dataset.myname);

alert(div.dataset.appId);

//就算原来没有写在DOM里的也可以设置,会同步到DOM里

div.dataset.haha = "hahaha";

alert(div.dataset.haha);

插入标记

使用插入标记，可以直接插入HTML字符串来构建DOM树。

innerHTML

在读模式下，返回与调用元素所有子节点对应的HTML标记的字符串。

在写模式下则会根据指定的值创建新的DOM树，然后替换调用元素所有子节点。

alert(document.body.innerHTML);

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

div.innerHTML = "

balalalabalalala";

虽然绝大部分浏览器不支持在innerHTML中添加script节点，但是IE8是支持的，虽然有些特殊，要插入在有作用域的元素后。而且通过onclick等事件插入可执行的代码也是可能的。所以为了安全，在使用innerHTML时一定要注意安全。

style元素是被支持的。在IE8中有些特殊，要插入在有作用域的元素后。

//style元素是被支持的。在IE8中有些特殊，要插入在有作用域的元素后。

//失败

div.innerHTML = "";

//成功

div.innerHTML = "_";

//成功

div.innerHTML = "";

outerHTML

这个就是不止替换子元素，调用元素本身也被替换。

insertAdjacentHTML()

这个方法是在指定位置插入HTML文本，可以指定的位置有4个：

before begin：在当前元素之前插入一个同辈元素

after begin：插入在当前元素的所有子元素之前，作为当前元素的子元素

beforeend：插入在当前元素的所有子元素之后，作为当前元素的子元素

afterend：在当前元素之后插入一个同辈元素

element.insertAdjacentHTML("afterend", "

Hello world!");

内存与性能问题

在使用这个几个方法替换节点时，节点如果有一个事件处理程序或者引用了其他对象作为属性，这些东西可能还在内存中。所以最好先手动删除这些。

不过在插入新元素时，这个方法不管在编写上还是执行上都比我们使用DOM操作要高效的多，在执行这个方法时会创建一个HTML解析器，这个通常时浏览器级别的C++代码。

但是创建和销毁HTML解析器是要开销的，所以尽量减少调用次数，将字符串一次拼好在调用。

scrollIntoView()

div.scrollIntoView();

这个就是让屏幕滚动到这个元素所在的位置让大家能看见。传入true则尽量元素顶部与屏幕平齐，传入false则尽量多显示元素。

把当前元素设置为焦点也可以达到这个效果。

专有拓展

这些都是各个浏览器自己实现的，有的很普遍，有的很不普适。

文档模式

决定了可以使用什么功能，IE5，IE7，IE9等。

可以强制浏览器以什么方式渲染，通过HTTP头部的 X-UA-Compatible或meta标签。

其中IEVersion可以是Edge、EmulateIE9、EmulateIE8、EmulateIE7、9、8、7、5。

JS里也可以获取，IE中才有貌似。

var mode = document.documentMode;

children属性

只返回元素子节点，没有乱七八糟的文本节点

var childCount = element.children.length;

contains()方法

一个节点是不是另一个的后代

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

插入文本

innerText

This is a paragraph with a list following it.

Item 1

Item 2

Item 3

对content使用innerText读：

This is a paragraph with a list following it.

Item 1

Item 2

Item 3

写的话就覆盖所有子节点，且会进行HTML编码去掉HTML标签避免生成多个节点。这个可以用来过滤用户输入哦。

有的浏览器不支持这个，但是支持textContent。

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;

}

}

outerText

读时与innerText一样，写时覆盖调用节点。