JavaScript操作DOM元素

一、DOM：
Document Object Model（文档对象模型）
二、DOM的分类：
1.DOM Core（核心）
2.HTML-DOM
3.CSS-DOM
三、节点属性：
1.lastElementChild:最后一个节点
2.firstElementChild:第一个节点
3.nextElementSibling：下一个节点
4.previousElementSibling：上一个节点
四、节点信息：
1.nodeName:节点名称
2.nodeType:节点类型
3.nodeValue:节点值
五、注意事项：nodeName属性包含某个节点的名称,元素节点的nodeName是标签名称，属性节点的nodeName是属性名称，文本节点的nodeName永远是#text，文档节点的nodeName永远是#document
六、nodeValue是节点值,文本，包含文本。属性，包含属性值。
七、nodeType对应的值：
元素：1
属性：2
文本：3
注释：8
文档：9
八、操作节点的属性：
1.获取节点的属性：
getAttribute(“属性名”)
eg:获取img的图片路径：
doucument.getElementsByTagName(“img”)[0].getAttribute(“src”);
2.设置节点值：
setAttribute(“属性名”,“值”);
eg:改变图片：
doucument.getElementsByTagName(“img”)[0].setAttribute(“src”,“img/1.jpg”);
九、创建和插入节点：
1.createElement():创建节点
2.appendChild():在某个节点的后面追加新的节点。
eg:创建一个按钮追加到main里面
var main = document.getElementById(“main”);
var inp = document.createElement(“input”);
inp.setAttribute(“type”,“button”);
main.appendChild(inp);
十、删除节点：
removeChild()：删除指定节点，eg:删除main里面的最后一个节点。
var main = document.getElementById(“main”).lastElementChild;
document.getElementById(“main”).removeChild(main);
十一、style属性：
语法：HTML元素.style.样式属性 = 值。
eg：设置main里面的字体颜色
document.getElementById(“main”).style.color = “red”;
十二、className:
给元素添加class样式
语法：元素.className = “样式名”;