DOM节点操作

TIP：对于添加事件来说，可以脚本中编写添加事件循环，减少代码量，增加效率

if(window.getComputedStyle)

//通过属性的有无进行判断

console.log(window.getComputedStyle(a).fontSize);

// ie不支持

else

console.log(a.currentStyle.color);

//低版本ie支持，高版本浏览器不支持。

新建节点并且插入：

vartext2= document.createElement("p");

text2.innerHTML= "lalalallalalla";

vara= document.getElementById("div");

a.appendChild(text2);

//把一个子元素追加到父元素后面

console.log(text2);

vartext1=document.getElementById("text1");

vartext3= text1.cloneNode(true);

//克隆方法

// a.appendChild(text3);

a.insertBefore(text2,text1);

//加到前面，属性：新增的元素和在哪个元素前

获取节点：

用document.body来对body进行操作

console.log(ul.firstElementChild);

//只获取元素节点

console.log(ul.firstChild);

//空格和换行也默认为一个元素，会出错

varli2= document.getElementById("li2");

console.log(li2.parentNode);

console.log(ul.childNodes);

console.log(ul.children);

console.log(li2.ownerDocument);

console.log(ul.ownerDocument);

//同级

console.log(li2.previousSibling);

console.log(li2.previousElementSibling);

console.log(li2.nextSibling);

console.log(li2.nextElementSibling);

console.log(ul.attributes);

删除节点和替换：

functionremove() {

text= document.getElementById("text");

document.body.removeChild(text);

}

varn= document.createElement("p");

n.innerText= "替换";

document.body.replaceChild(n,text);