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 = “样式名”;