JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (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, 如是为元素节点,跳过。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- 详解JS获取HTML DOM元素的8种方法
- JS控制HTML元素的显示和隐藏的两种方法
- JavaScript中获取HTML元素值的三种方法
- JavaScript通过HTML的class来获取HTML元素的方法总结
- javascript 控制 html元素 显示/隐藏实现代码
文章同步发布: https://www.geek-share.com/detail/2775368631.html
JavaScript HTML DOM元素节点常用操作接口的更多相关文章
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript基础DOM介绍和常用操作(5)
day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html JavaScript引入方式 location对象 window.location ...
- HTML DOM元素关系与操作
<html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
- 【python+selenium的web自动化】- 元素的常用操作详解(一)
如果想从头学起selenium,可以去看看这个系列的文章哦! https://www.cnblogs.com/miki-peng/category/1942527.html 本篇主要内容:1.元素 ...
- go语言之进阶篇文件常用操作接口介绍和使用
一.文件常用操作接口介绍 1.创建文件 法1: 推荐用法 func Create(name string) (file *File, err Error) 根据提供的文件名创建新的文件,返回一个文件对 ...
- JavaScript HTML DOM 元素操作(节点)
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点 ...
- JavaScript HTML DOM 元素(节点)
添加和删除节点(HTML 元素) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 例如:这段代码创建新的 < ...
- JavaScript 要点(十四)HTML DOM 元素(节点)
A.创建新的 HTML 元素 如需向 HTML DOM 添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> ...
随机推荐
- Windows安装pip、wxpy
版权归作者所有,任何形式转载请联系作者.作者:为什么不是学霸(来自豆瓣)来源:https://www.douban.com/note/696046743/ # 适用于0基础 1.安装好python. ...
- ora-8176原因及解决方法
在oracle undo_retention范围内,且_undo_autotune=false的情况下,一个语句执行的时候仍然发生ora-8176,语句如下: INSERT INTO XXX SELE ...
- XNOR-Net:二值化卷积神经网络
https://www.jianshu.com/p/f9b015cc4514 https://github.com/hpi-xnor/BMXNet BMXNet:基于MXNet的开源二值神经网络实现 ...
- PostMan Request Export
- [转]详解Linux(centos7)下安装OpenSSL安装图文方法
OpenSSL是一个开源的ssl技术,由于我需要使用php相关功能,需要获取https的文件所以必须安装这个东西了,下面我整理了两种关于OpenSSL安装配置方法. 安装环境: 操作系统:CentO ...
- 调用百度API接口 正解析地址和逆解析
地址解析(结构化地址 解析得到 经纬度): public void SaveLocation(DataRequest<Location> request, DataResponse< ...
- 【Java】Spring之面向方面编程(AOP)(五)
面向方面编程(AOP)通过提供另一种思考程序结构的方式来补充面向对象编程(OOP).OOP中模块化的关键单元是类,而在AOP中,模块化单元是方面.方面实现了跨越多种类型和对象的关注点(例如事务管理)的 ...
- 筛选出dataframe中全为数字的列的值
In [1]: import pandas as pd In [2]: import numpy as np In [3]: students = [ ('jack', 'Apples' , 34) ...
- plsql 的三种循环
set serveroutput on declare pnum ; begin loop dbms_output.put_line(pnum); pnum :; end loop; end; / s ...
- Jenkins - 构建项目
1 - 登录 进入起始界面 2 - 创建并运行第一个Jenkins项目 新建Item:创建新项目 --->Freestyle project:通用的项目创建方法 --->在新建项目页面(添 ...