Javascript入门学习第七篇 js dom实例操作第1/2页

更新时间：2008年07月06日 10:02:12 作者：

上篇文章我们讲了用dom方式创建节点，复制节点，插入节点。今天我们将讲删除节点，替换节点，查找节点等。

直接从方法说起：
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 下一页阅读全文

您可能感兴趣的文章:

ECMAScript6入门教程
本文详细讲解了ECMAScript6的基础教程，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
document.open() 与 document.write()
document.open() 与 document.write()...
2006-10-10
javaScript基础语法介绍
本文从javascript简介开始，介绍了javascript的语法以及注意事项、动态语言、引用外部JS文件、变量命名规则、判断是否已经声明、不存在块级作用域这些方面的内容，是篇相当不错的基础语法的介绍文章，推荐给小伙伴们
2015-02-02
Javascript的this详解
这篇文章主要介绍了Javascript的this的作用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
ES6基础语法之class类介绍
这篇文章介绍了ES6中class类的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
JavaScript的学习入门整理篇
每次刚开始学语言时，作者都喜欢用“hello world”例子l来侮辱我们的智商，我想大家都不是笨蛋，故而寥寥数笔写了一点
2008-09-09
浅析Javascript ES6中的原生Promise
ES6标准出炉之前，一个幽灵，回调的幽灵，游荡在JavaScript世界。正所谓世界本没有回调，写的人多了也就有了。接下来就来简单介绍Javascript ES6中的原生Promise，有需要的可以参考借鉴。
2016-08-08
JavaScript 学习笔记之语句
这篇文章主要介绍了JavaScript中的语句，包括条件分支语句、循环语句、迭代语句、Lable语句、break和continue语句、with语句、swith语句，十分全面细致，推荐给小伙伴们。
2015-01-01
JS JSON.stringify()的5个使用场景详解
JSON.stringify()方法用于将一个值转为JSON字符串,该字符串符合JSON格式,并且可以被JSON.parse()方法还原,下面这篇文章主要给大家介绍了关于JS JSON.stringify()的5使用场景,需要的朋友可以参考下
2023-01-01
JavaScript中的关键字"VAR"使用详解分享
JScript的语法教程里面说在声明变量时忽略var关键字是完全合法的。但是事实常常又证明想当然的结果是不可靠的。
2013-07-07