DOM

一.dom操作

dom的组成

元素节点
属性节点
文本节点

通过nodeType查看类型

1 元素节点 ,2 属性节点 ,3 文本节点

节点名称
nodeName

console.log(oBox.nodeName);  //返回值是大写标签名称
console.log(oBox.childNodes[0].nodeValue); //了解
console.log(oBox.innerText);

二.元素节点

获取所有节点

childNodes=文本节点+元素节点
children 微软 推荐使用
// 注意:在ie6 7 8 下会把注释当做元素

parentNode 父节点

        //parentNode找到了html标签后的父节点是document
        //parentElement 找亲父亲
        //parentElement找到了html标签后的父节点是null
        var oInner = document.getElementById("inner");
        // oInner.parentNode.style.color = "red";
        // oInner.parentElement.style.border = "1px solid red";

兄弟节点

• 获取后一个兄弟

// xxx.nextElementSibling||xxx.nextSibling

• 获取前一个兄弟

(XXX.previousElementSibling || XXX.previousSibling)

子节点

//获取第一个元素
 (oBox.firstElementChild || oBox.firstChild)
//获取最后一个孩子
(oBox.lastElementChild || oBox.lastChild)

三.获取属性

 //获取所有属性 attributes
 //设置属性 setAttribute("属性名","属性值")
 //获取属性 getAttribute("属性") 返回属性的值
 // 删除属性 removeAttribute(属性名称)
 //动态属性 (checked,selected,disabled)
//不可以使用 setAttribute,getAttribute, removeAttribute

createElement()//创建一个元素节点
createTextNode()//创建文本节点
appendChild()//将一个新的节点添加到某个节点的子节点末尾
insertBefore()//把节点插入到指定的节点前面
replaceChild()//把节点替换成指定的节点
removeChild()//删除指定子节点
cloneNode()//克隆  true深克隆