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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
又一个小巧的图片预加载类
May 05 Javascript
javascript延时重复执行函数 lLoopRun.js
Jun 29 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
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
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
canvas的神奇用法
2017/02/03 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
详解a++和++a的区别
2017/08/30 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python爬取51job中hr的邮箱
2016/05/14 Python
wxPython实现整点报时
2019/11/18 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
python实现猜单词游戏
2020/05/22 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
社区庆八一活动方案
2014/02/02 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2015年新学期寄语
2015/02/26 职场文书
生死抉择观后感
2015/06/09 职场文书
安全生产协议书
2016/03/22 职场文书