Javascript入门学习第七篇 js dom实例操作第1/2页
直接从方法说起：
1， 删除节点。removeChild():
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var msg = document.getElementById("cssrain");
var b = document.getElementById("b");
msg.removeChild(b);
</script>
如果不知道要删除的节点的父节点是什么？可以使用parentNode属性。
比如：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var b = document.getElementById("b");
var c = b.parentNode;
c.removeChild(b);
</script>
2， 替换节点。repalceChild()
element.repalceChild( newNode , oldNode ); // 新节点是客人，肯定先服务他咯。。oldNode必须是Element的一个子节点。
例子：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var cssrain = document.getElementById("cssrain");
var msg = document.getElementById("b");
var para = document.createElement("p");
cssrain.replaceChild( para , msg );
</script>
3，查找节点
相对上面的方法，查找节点是比较简单的。
因为很多人都用过。(记得我认识js的第一句就是getElementById();)
getElementById();
返回一个对象， 对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。
getElementsByTagName() 查找标签名的所有元素。
返回一个集合，可以用循环取出每个对象，对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。
例子：
var ps = document.getElementsByTagName(“p”);
for(var i=0 ; i< ps.length ; i++){
ps[i].setAttribute(“title”,”hello”);
//也可以使用: ps.item(i).setAttribute("title","hello");
}
1， 删除节点。removeChild():
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var msg = document.getElementById("cssrain");
var b = document.getElementById("b");
msg.removeChild(b);
</script>
如果不知道要删除的节点的父节点是什么？可以使用parentNode属性。
比如：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var b = document.getElementById("b");
var c = b.parentNode;
c.removeChild(b);
</script>
2， 替换节点。repalceChild()
element.repalceChild( newNode , oldNode ); // 新节点是客人，肯定先服务他咯。。oldNode必须是Element的一个子节点。
例子：
<body>
<div id="cssrain">
<div id="a">a </div>
<div id="b">b </div>
<div id="c">c </div>
</div>
</body>
<script>
var cssrain = document.getElementById("cssrain");
var msg = document.getElementById("b");
var para = document.createElement("p");
cssrain.replaceChild( para , msg );
</script>
3，查找节点
相对上面的方法，查找节点是比较简单的。
因为很多人都用过。(记得我认识js的第一句就是getElementById();)
getElementById();
返回一个对象， 对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。
getElementsByTagName() 查找标签名的所有元素。
返回一个集合，可以用循环取出每个对象，对象拥有 nodeName , nodeType , parentNode , ChildNodes 等属性。
例子：
var ps = document.getElementsByTagName(“p”);
for(var i=0 ; i< ps.length ; i++){
ps[i].setAttribute(“title”,”hello”);
//也可以使用: ps.item(i).setAttribute("title","hello");
}
12下一页阅读全文
相关推荐
星星有所不知 2020-10-12
zuncle 2020-09-28
huaoa 2020-09-14
北京老苏 2020-08-17
luvhl 2020-08-17
Kakoola 2020-07-29
drdrsky 2020-07-29
书虫媛 2020-07-08
liaoxuewu 2020-07-08
SIMONDOMAIN 2020-07-08
爱读书的旅行者 2020-07-07
tianzyc 2020-07-04
Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children
Lophole 2020-07-04
Lophole 2020-06-28
liaoxuewu 2020-06-26
ApeLife技术 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14