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

原文地址:https://www.cnblogs.com/a1111/p/12815895.html