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 οnclick="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
转载于:https://www.cnblogs.com/xxcn/p/11267818.html
JavaScript HTML DOM元素节点常用操作接口相关推荐
- vue获取dom元素节点并操作元素的样式($el的用法操作元素样式)
在vue中操作dom元素 第一种:$refs <div ref="box"></div> 在标签身上可以写一个ref属性,然后就可以通过this.$refs ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 添加和删除节点(HTML 元素) <div id="div1"> <p id="p1"& ...
- Selenium(2): DOM元素定位、操作
DOM 元素定位 定位过程 WebDriver对象的findElement函数定义一个Web页面元素: findElements方法可以定位页面的多个元素: 使用WebElement对象来存储定位的元 ...
- 如何使用纯JavaScript隐藏DOM元素
How do you hide a DOM element using plain JavaScript? 如何使用纯JavaScript隐藏DOM元素? Every element exposes ...
- JavaScript 要点(十四)HTML DOM 元素(节点)
A.创建新的 HTML 元素 如需向 HTML DOM 添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. <div id="div1"> ...
- 【web前端】JavaScript DOM元素(节点的创建appendChild(),删除removeChild(),修改replaceChild())
创建新的 HTML 元素 (节点) - appendChild() 实例: <!DOCTYPE html> <html><head><meta charset ...
- javascript基础:元素增删改操作
前面聊了一些对属性的一些操作,当然js也可以对元素的添加删除,毕竟在网页中很多的页面元素需要根据后台返回的数据而呈现的. 当然先聊一下通过元素层级关系得到元素之前的节点. 节点 这个前面说过现在再重复 ...
- DOM基础,classList属性提供的方法和属性,DOM中节点的操作,追加节点
1. 什么是DOM: Document Object Modei :文档对象模型 2.DOM核心:document对象 3.DOM作用: 可以访问和操作xtml和HTML文档中的标签,标签的属性, ...
- JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
最新文章
- 去掉linux开关机图片,在Deepin Linux系统下去掉NVIDIA开机Logo的方法
- 28. Leetcode 25. K 个一组翻转链表 (链表-反转链表)
- 【自动驾驶】8. MDC通信架构 + DDS + SOME/IP
- 深度解读「无影云电脑远程办公解决方案」
- 统计方形++(洛谷P2241题题解,Java语言描述)
- SpringBoot2.0 基础案例(11):配置AOP切面编程,解决日志记录业务
- Codeforces976E Well played! 【贪心】
- python zope 工作流_使用C语言来扩展Python程序和Zope服务器的教程
- 电视盒子_刷机固件_免费合集分享
- Spring学习笔记(三十六)——SpringBoot 实现大文件分片上传、断点续传及秒传
- ts无损剪辑合并_视频如何合并?视频合并太难?其实很简单
- python读取多张图片_Python批量导出多个PPT/PPTX文件中每个幻灯片为独立JPG图片
- android 资源文件类型,命名规则(配置限定符名称),及其加载规则
- 好看的皮囊 · 也是大自然的杰作 · 全球高质量 · 美图 · 集中营 · 美女 · 2017-08-21期...
- [CSS] css使用first-child 和last-child 实现三条杠效果
- 啃完这本阿里手册,应届七面进阿里
- PHP 输出各个时区对应的时差表
- 2015 android 5.0 手机排行榜,智能手机排行榜2015前十名 2015智能手机排行榜
- 丽江文化旅游学院易腾创想Java实训第14组总结
- Nginx服务器部署
热门文章
- 计算机操作系统(11):负载均衡
- Qt 设置当前窗口出现在左右窗口的最前面
- 宁波python学习_python学习第五天
- oracle中出现会话被锁
- 爬虫之request
- linux shell 用sed命令在文本的行尾或行首添加字符
- [Unity3D]unity3d5.0简单的调用摄像头
- codeforces C. Xor-tree
- realloc invalid pointer错误解析
- 富士通01018z平板电脑评测_档案扫描好帮手,富士通ix1500无线双面高速扫描仪评测...