Dom的一些扩展

querySelector

该方法接受一个css选择符，如果没有匹配的元素则返回null。

元素遍历

Element Traversal API为Dom元素添加了5个属性：

childElementCount firstElementChild lastElementChild previousElementSibling nextElementSibling

HTML5中

classList属性：

该属性可以运用4个方法：

add contains（表示列表中是否存在给定的值，存在返回true，否则返回false） remove toggle（如果列表中给定值则删除，没给定则添加）

<html>
<style>
	.node2{
		color:red
	}
</style>
<body>
<div class="node1 node2">123</div>
</body>
<script type="text/javascript">

	var dothing=function (){
		var object=document.querySelector(".node1")
		object.classList.remove("node2")
	}
	setTimeout(dothing,5000)

</script>
</html>

　　当不存在classList的时候可以进行添加

if (!("classList11" in document.documentElement)) {
    Object.defineProperty(HTMLElement.prototype, 'classList11', {
        get: function() {
            var self = this;
            function update(fn) {
                return function(value) {
                    var classes = self.className.split(/s+/g),
                        index = classes.indexOf(value);

                    fn(classes, index, value);
                    self.className = classes.join(" ");
                }
            }

            return {
                add: update(function(classes, index, value) {
					
                    if (!~index) classes.push(value);
                }),

                remove: update(function(classes, index) {
                    if (~index) classes.splice(index, 1);
                }),

                toggle: update(function(classes, index, value) {
                    if (~index)
                        classes.splice(index, 1);
                    else
                        classes.push(value);
                }),

                contains: function(value) {
                    return !!~self.className.split(/s+/g).indexOf(value);
                },

                item: function(i) {
                    return self.className.split(/s+/g)[i] || null;
                }
            };
        }
    });
}

　　焦点管理

document.activeElement 属性始终会引用DOM中当前焦点的元素

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

插入文本

innerText属性，操作元素中包含的所有的文本内容

兼容性

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;
 }
}

　　滚动

scrollIntoView() 是唯一一个错有连蓝旗都支持的方法，因此还是这个方法最常用