JavaScript操作DOM元素

一、DOM：

DocumentObjectModel（文档对象模型）

二、DOM的分类：

1.DOMCore（核心）

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里面

varmain=document.getElementById(“main”);varinp=document.createElement(“input”);inp.setAttribute(“type”,“button”);main.appendChild(inp);

十、删除节点：

removeChild：删除指定节点，eg:删除main里面的最后一个节点。

varmain=document.getElementById(“main”).lastElementChild;document.getElementById(“main”).removeChild(main);

十一、style属性：

语法：HTML元素.style.样式属性=值。

eg：设置main里面的字体颜色

document.getElementById(“main”).style.color=“red”;

十二、className:

给元素添加class样式

语法：元素.className=“样式名”;