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 相关文章推荐
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
微信内置浏览器图片查看器的代码实例
Oct 08 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
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
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
详解Python中的文件操作
2016/08/28 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
运动会方队口号
2014/06/07 职场文书
双拥工作宣传标语
2014/06/26 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2015年暑假工作总结
2015/07/13 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js