1.DOM节点树
2.获得节点的方法
getElementById();
getElementsByTagName();
getElementsByClassName();
querySelectorAll();
3.修改
元素节点的内容
innerHTML
样式
obj.style.color="#333"
4.节点的类型判断(nodeType)
4.1 元素节点:1
4.2 属性节点:2
4.3 文本节点:3
5.创建节点
creatElement()//创建元素节点
creatTextNode()//创建文本节点
eg:
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#conbox{
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background: pink;
}
</style>
</head>
<body>
<script>
var bod = document.getElementsByTagName("body")[0];
var box = document.createElement("div");
box.setAttribute("id","conbox");
var spans= document.createElement("span");
var txt = document.createTextNode("你好");
spans.appendChild(txt);
// console.log(div_box.innerHTML);
box.appendChild(spans);
bod.appendChild(box);
</script>
</body>
6.增加节点
appendChild(node)将新元素作为父元素的最后一个子元素添加;
代码参考上节;
7.删除节点
<div id="con">
<ul id="friuts">
<li>apple</li>
<li>pear</li>
<li>banana</li>
</ul>
</div>
<script>
var ull = document.getElementById("friuts");
var lii = document.getElementsByTagName("li");
ull.removeChild(lii[1]);
</script>
8.替换节点
eg:
<div id="con">
<ul id="friuts">
<li>apple</li>
<li>pear</li>
<li>banana</li>
</ul>
</div>
<script>
var ull = document.getElementById("friuts");
var lii = document.getElementsByTagName("li");
// ull.removeChild(lii[1]);
var newLi = document.createElement("li");
var orange = document.createTextNode("orange");
newLi.appendChild(orange);
// console.log(newLi);
ull.replaceChild(newLi,lii[0]);
</script>