JavaScript HTML DOM元素 节点操作汇总


Posted in Javascript onJuly 29, 2019

前言

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

1. nodeName : 节点的名称

2. nodeValue :节点的值

3. nodeType :节点的类型

节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9。

一、添加和删除节点(HTML 元素)

1、创建节点

1)创建该元素(元素节点);

2)向一个已存在的元素追加该元素。

语法:appendChild(newnode)

eg:

<div id="div1">
  <p id="p1">这是一个段落</p>
  <p id="p2">这是另一个段落</p>
</div>

<script>
  var para=document.createElement("p");
  var node=document.createTextNode("这是新段落。");
  para.appendChild(node);

  var element=document.getElementById("div1");
  element.appendChild(para);
</script>

document.createElement("标签名"); // 创建元素节点

document.createTextNode("文本"); //创建文本节点

appendChild(); //方法向节点添加最后一个子节点。也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 用法:a.appendChild(b),把b添加到a内。

2.添加节点

appendChild(); //在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法,eg:同上。

insertBefore(); //insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:insertBefore(newnode,node);

eg:

<ul id="test">
  <li>JavaScript</li>
  <li>HTML</li>
</ul> 
 
<script type="text/javascript">
   var otest = document.getElementById("test"); 
   var newli = document.createElement("li");
   newli.innerHTML="php";
   //otest.insertBefore(newli,otest.lastChild);
   otest.insertBefore(newli,otest.childNodes[1]);
</script>

3.删除节点

removeChild() //removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。

语法:nodeObject.removeChild(node)

eg:

<div id="div1">
  <p id="p1">这是一个段落。</p>
  <p id="p2">这是另一个段落。</p>
</div>

<script>
  var parent=document.getElementById("div1");
  var child=document.getElementById("p1");
  parent.removeChild(child);
</script>

DOM 需要清楚需要删除的元素,以及它的父元素。先找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素。

4.替换节点

replaceChild //把一个给定父元素里面的一个子节点替换为另一个子节点。

语法:referencre = element.replaceChild(newChild,oldChild); //newChild: 必需,用于替换 oldChild的对象。 oldChild: 必需,被 newChild替换的对象。

eg:

<div>
  <b id="oldnode">JavaScript</b>是一个很常用的技术,为网页添加动态效果。</div>
  <a href="javascript:replaceMessage()" rel="external nofollow" > 将加粗改为斜体</a>
 
  <script type="text/javascript">
    function replaceMessage(){
    var b=document.getElementById("oldnode");
    
var newNode=document.createElement("i");
    
newNode.innerHTML=b.innerHTML;
    
b.parentNode.replaceChild(newNode,b);
    }  
 </script>

注意:当 oldnew 被替换时,所有与之相关的属性内容都将被移除。 newChild必须先被建立。

5.访问子节点

childNodes //访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。

语法:elementNode.childNodes //可用childNodes[i]数组的形式表示第几个子元素

eg:

<div>
  javascript 
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
   var int=document.getElementsByTagName("div")[0].childNodes;
   for (var i=0;i<int.length;i++)
   {
     document.write("名字:"+int[i].nodeName+"<br>");
   }
   document.write("子节点个数:"+int.length+"<br>");
</script>

6.访问子节点的第一和最后项

firstChild //返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:node.firstChild //与elementNode.childNodes[0]是同样的效果。

lastChild //返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。

语法:node.lastChild //与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

eg:

<div id="con">
  <p>javascript</p>
  <div>jQuery</div>
  <h5>PHP</h5>
</div>
<script type="text/javascript">
  var x=document.getElementById("con");
  document.write("第一个子节点:"+x.firstChild.nodeName+"<br>");
  document.write("最后一个子节点:"+x.lastChild.nodeName);
</script>

7.访问父节点

parentNode //获取指定节点的父节点

语法:elementNode.parentNode

eg:

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

注意: 父节点只有一个,浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

8.访问兄弟节点

nextSibling //可返回某个节点之后紧跟的节点(处于同一树层级中)。

语法:nodeObject.nextSibling

previousSibling //可返回某个节点之前紧跟的节点(处于同一树层级中)。

语法:nodeObject.previousSibling

eg:

<ul id="myList">
  <li id="item1">Coffee</li>
  <li id="item2">Tea</li>
</ul>
<p id="demo">点击按钮来获得首个项目的下一个同胞。</p>
<button onclick="myFunction()">试一下</button>
<script>
  function myFunction()
  {
    var x=document.getElementById("demo"); 
    x.innerHTML=document.getElementById("item1").nextSibling.innerHTML;
  }
</script>

注意: 如果无此节点,则该属性返回 null。两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。

解决问题方法:判断节点nodeType是否为1, 如是为元素节点,跳过。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue.js 2.0实现简单分页效果
Jul 29 #Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 #Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 #Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 #Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 #Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 #Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 #Javascript
You might like
php 多个submit提交表单 处理方法
2009/07/07 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
js 表格隔行颜色
2009/12/02 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
python编辑用户登入界面的实现代码
2018/07/16 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
老教师工作总结的自我评价
2013/09/27 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
综合素质自我评价评语
2015/03/06 职场文书
新闻通讯稿模板
2015/07/22 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书