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

所属分类: 网络编程 / JavaScript 阅读数: 406
收藏 0 赞 0 分享
直接从方法说起:
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");
}
更多精彩内容其他人还在看

深入解析Vue 组件命名那些事

本篇文章主要介绍了深入解析Vue 组件命名那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue学习笔记进阶篇之vue-cli安装及介绍

这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jquery版轮播图效果和extend扩展

这篇文章主要为大家详细介绍了jquery版轮播图效果,以及extend扩展的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery Validate格式验证功能实例代码(包括重名验证)

本文通过实例代码给大家介绍了jQuery Validate格式验证功能,代码中包括重名验证的方法,需要的的朋友参考下吧
收藏 0 赞 0 分享

Angular.js中angular-ui-router的简单实践

本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现二维坐标点排序效果

这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue2.0路由如何配置问题

本篇文章主要介绍了vue2.0路由配置问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

基于bootstrap实现多个下拉框同时搜索功能

这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript 值类型和引用类型的初次研究(推荐)

这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
收藏 0 赞 0 分享

利用jQuery异步上传文件的插件用法详解

这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多