DOM方法总结及DOM库扩展

常用DOM方法

常用DOM方法：

方法	作用
document.getElementById(“id”);	通过元素的ID来获取元素对象
context.getElementsByTagName(“table”);	通过元素的标签名来获取元素对象,把容器中所有子子孙孙的元素都获取到
document.getElementsByName(“abc”);	通过元素的name属性来获取元素对象
context.getElementsByClassName(“abc”);	通过元素的class属性来获取元素对象
document.documentElement	返回文档的根节点
document.body	获取body元素
context.querySelector(“#id”);	移动端获取一个元素，节点集合不存在DOM映射
context.querySelectorAll(“#id”);	移动端获取多个元素，节点集合不存在DOM映射
appendChild(newListItem);	把元素添加到指定的容器中（末尾）
document.createElement(“div”);	创建一个元素标签对象
insertBefore(newItem,existingItem);	把新元素添加到老元素之前
removeChild();	删除元素
cloneNode(false/true);	克隆元素：false：只克隆当前元素；true：把元素内的子子孙孙都克隆
replaceChild(newnode,oldnode);	替换元素
getAttribute(“target”);	获取元素属性
setAttribute(“type”,”button”);	添加指定的属性，并为其赋指定的值，如：设置input元素的type属性为button，不能修改class属性
removeAttribute(“abc”);	删除属性
document.createDocumentFragment();	创建文档碎片
innerHTML	获取对象的内容或向对象插入内容

DOM节点和关系属性：

节点	含义
childNodes	获取所有子节点
children	获取所有元素子节点
parentNode	获取父亲节点
previousSibling	获取上一个哥哥节点（所有节点，包括文本节点）
previousElementSibling	获取上一个哥哥节点（元素节点）
nextSibling	获取弟弟节点
firstChild	获取所有节点中的第一个
lastChild	获取所有节点中的最后一个

节点	nodeType	nodeName	nodeValue
元素节点（元素标签）	1	大写的标签名	null
属性节点	2	小写属性名	属性内容
文本节点（文字）	3	#text	文字内容
注释节点（注释）	8	#comment	注释内容
document	9	#document	null

DOM的盒子模型：

名称	含义
clientWidth/clientHeight	width+左右padding；height+上下padding
clientTop/clientLeft	上边框的高度；左边框的宽度
offsetWidth/offsetHeight	clientWidth+左右边框；clientHeight+上下边框
offsetLeft/offsetTop	当前元素的外边框距离父级参照物的左偏移量；当前元素的外边框距离父级参照物的上偏移量
scrollWidth/scrollHeight	约等于真实内容的宽度(包含溢出的内容)+左padding；约等于真实内容的高度(包含溢出的内容)+上padding
scrollLeft/scrollTop	当前滚动条卷去的宽度；当前滚动条卷去的高度

DOM方法扩展

1.children——作用：获取某一个容器中所有的元素子节点（还可以筛选出指定标签名）

HTML代码：

<div id="div1">
    <div></div>
    <div></div>
    <div>
        <p></p>
        <p></p>
    </div>
    <p id="p1"></p>
    <p></p>
    <p></p>
</div>

获取div1下的所有元素子节点(儿子级别)：

var oDiv = document.getElementById("div1");
console.log(oDiv.children.length); //6

但是children方法在非标准浏览器下不兼容，故需重写children方法
算法分析：首先获取所有的子节点（childNode），在所有的子节点中，把元素节点过滤出来，即nodeType===1。如果多传一个标签名，进行二次筛选，获取指定标签名的集合。代码如下：

function children(curEle, tagName) {
   
    var ary = [];
    if (/MSIE (6|7|8)/i.test(navigator.userAgent)) { //判断是不是IE浏览器
        var nodeList = curEle.childNodes;
        for (var i = 0; i < nodeList.length; i++) {
            var curNode = nodeList[i];
            curNode.nodeType === 1 ? ary[ary.length] = curNode : null;
        }
        nodeList = null;
    } else { //标准浏览器中直接使用children
        ary = Array.prototype.slice.call(curEle.children); //children返回的是类数组，为了和上面保持一致，将类数组转为数组
    }
    if (typeof tagName === "string") {
        for (var j = 0; j < ary.length; j++) { //小心数组塌陷
            var curEleNode = ary[j];
            if (curEleNode.nodeName.toLowerCase() !== tagName.toLowerCase()) { //不是想要的那个标签
                ary.splice(j, 1);
                j--;
            }
        }
    }
    return ary;
}
var oDiv = document.getElementById("div1");
console.log(children(oDiv,"div")); //Array(3)

2.getElementsByClass——作用：通过元素的样式类名获取一组元素集合（兼容所有浏览器）

jQuery中没有此方法，但jQuery的一部分选择器也是基于这个方法的原理来实现的
getElementsByClassName()原方法：写一个样式类名的话，只要包含这个样式类名就可以；写两个的话，只要同时包含这两个就可以，但和样式的顺序以及中间有多少个空格是没有关系的；如果不写，结果是一个空的集合

var flag = "getComputedStyle" in window; //判断是否兼容
//参数className是要获取的样式类名（可能是多个也可能是一个）
//context是获取的上下文，不传递值的话默认是document
function getElementsByClass(className, context) {
   
    context = context || document;
    if (flag) {
        return listToArray(context.getElementsByClassName(className)); //this.listToArray类数组转为数组
    }
    //把传递进来的样式类名的首尾空格去掉，然后在按照中间的空格把里面的每一项拆分成数组
    var ary = [], classNameAry = className.replace(/(^ +| +$)/g, "").split(/ +/g);
    //获取指定上下文元素中的所有的元素标签，循环这些标签，获取每个标签的className的样式类名字符串
    var nodeList = context.getElementsByTagName("*"); //获取所有的元素标签
    for (var i = 0; i < nodeList.length; i++) {
        var curNode = nodeList[i];
        //判断curNode.className是否包含参数，如果两个都包含，curNode就是想要的，否则不是
        var isOK = true; //假设curNode中包含了所有的样式
        for (var j = 0; j < classNameAry.length; j++) { //循环classNameAry这个数组
            var reg = new RegExp("(^| +)" + classNameAry[j] + "( +|$)"<