DOM基础知识总结

大纲：
1.DOM概述
2.获取元素的五种类型
3.查询和遍历
4.属性
5.内容
6.判断 创建 添加 移除 替换 复制

DOM即文档对象模型，它提供了一套针对XML和HTML进行增删改查的API。DOM把文档映射成文档树。

节点分类：

文本节点——标签节点——属性节点

nodetype nodevalue nodeName;

获取

getElementById(); 只能通过document调用 非标准浏览器下会返回name；定义在document对象上;

document.getElementsByName(); 在IE浏览器中只对表单元素的name起作用定义在HTMLdocument类中，只针对HTML文档有效;

context.getElementsByTagName(); 获取指定上下文中子子孙孙辈分的元素

context.getElementsByClassName(/可以设置多个参数/); 指定上下文，子子孙孙 非标准浏览器不兼容

cnotext.querySelect;
context.querySelectAll();
通过他们两个获取的节点不存在映射关系；

---

作为节点树的文档

---父子关系；

parentNode;
childNodes;

firstChild;
lastChild;
--兄弟关系

nextSibling
previousSibling

作为元素树的文档
childeren;

firstElementChild;
lastElementChild;

nextElementSibling;
previousElementSibling;


遍历：获取第n层的父元素；
function parent(e,n){
    if(n===undefined) n=1;
    while(n-- && e) e = e.parentNode;
    if(!e || e.nodeType!==1) return null;
    return e;
}

---

属性：

判断属性：hasAttribute();
获取属性：getAttribute();
设置属性：setAttribute();
移除属性：removeAttribute();

内容：textContent   innerHTML;

---

创建 添加 移除 替换节点

0.判断

parentNode.hasChildNodes();

1.创建

createElement;
createTextNode;
createAttribute;
createDocumentFragment;
    var frg = document.createDocumentFragment();
        for(var i=0;i<arr.length;i++){
            var oLi = document.createElement("li");
            oLi.innerHTML = "<span>"+(i+4)+"</span>"+arr[i].title;
            frg.appendChild(oLi);
        }

        uLi.appendChild(frg);

2.添加

parentElement.insertBefore(newElement, referenceElement);
    1.假如reference为null,则只是追加到父级元素的末尾，相当于appendChild();
    2.假如newElement在元素中已经存在，则先删除元素再添加

parentElement.appendChild(newElement);    参数为要添加的元素,context为要添加元素的父级;

3.移除

parentNode.removeChild(node);

4.替换

parentNode.replace(newEle,oldEle);

5.复制

node.cloneNode(deep);默认为true,即深克隆

---