DOM
1.DOM节点树
2.获得节点的方法
getElementById();
getElementsByTagName();
getElementsByClassName();
querySelectorAll();3.修改
元素节点的内容
innerHTML
样式
obj.style.color="#333"4.节点的类型判断（nodeType）
4.1 元素节点：1
4.2 属性节点：2
4.3 文本节点：35.创建节点
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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.10.10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读