JavaScript HTML DOM元素 节点操作汇总
前端  /  管理员 发布于 4年前   188
前言
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :
1. nodeName : 节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9。
一、添加和删除节点(HTML 元素)
1、创建节点
1)创建该元素(元素节点);
2)向一个已存在的元素追加该元素。
语法:appendChild(newnode)
eg:
这是一个段落
这是另一个段落
document.createElement("标签名"); // 创建元素节点
document.createTextNode("文本"); //创建文本节点
appendChild(); //方法向节点添加最后一个子节点。也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 用法:a.appendChild(b),把b添加到a内。
2.添加节点
appendChild(); //在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法,eg:同上。
insertBefore(); //insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:insertBefore(newnode,node);
eg:
- JavaScript
- HTML
3.删除节点
removeChild() //removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
语法:nodeObject.removeChild(node)
eg:
这是一个段落。
这是另一个段落。
DOM 需要清楚需要删除的元素,以及它的父元素。先找到希望删除的子元素,然后使用其 parentNode 属性来找到父元素。
4.替换节点
replaceChild //把一个给定父元素里面的一个子节点替换为另一个子节点。
语法:referencre = element.replaceChild(newChild,oldChild); //newChild: 必需,用于替换 oldChild的对象。 oldChild: 必需,被 newChild替换的对象。
eg:
JavaScript是一个很常用的技术,为网页添加动态效果。 将加粗改为斜体注意:当 oldnew 被替换时,所有与之相关的属性内容都将被移除。 newChild必须先被建立。
5.访问子节点
childNodes //访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法:elementNode.childNodes //可用childNodes[i]数组的形式表示第几个子元素
eg:
javascriptjavascript
jQueryPHP
6.访问子节点的第一和最后项
firstChild //返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.firstChild //与elementNode.childNodes[0]是同样的效果。
lastChild //返回‘childNodes'数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:node.lastChild //与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
eg:
javascript
jQueryPHP
7.访问父节点
parentNode //获取指定节点的父节点
语法:elementNode.parentNode
eg:
parentNode 获取指点节点的父节点
注意: 父节点只有一个,浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
8.访问兄弟节点
nextSibling //可返回某个节点之后紧跟的节点(处于同一树层级中)。
语法:nodeObject.nextSibling
previousSibling //可返回某个节点之前紧跟的节点(处于同一树层级中)。
语法:nodeObject.previousSibling
eg:
- Coffee
- Tea
点击按钮来获得首个项目的下一个同胞。
注意: 如果无此节点,则该属性返回 null。两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
解决问题方法:判断节点nodeType是否为1, 如是为元素节点,跳过。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
- 详解JS获取HTML DOM元素的8种方法
- JS控制HTML元素的显示和隐藏的两种方法
- JavaScript中获取HTML元素值的三种方法
- JavaScript通过HTML的class来获取HTML元素的方法总结
- javascript 控制 html元素 显示/隐藏实现代码
Top
- 相关文章
- 使用 Alpine.js 排序插件对元素进行排序(0个评论)
- 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
- 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
- 使用mock-server实现模拟接口对接流程步骤(0个评论)
- vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
- 近期文章
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布!(0个评论)
- Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
- Laravel 11.14版本发布 - 新的字符串助手和ServeCommand改进(0个评论)
- Laravel 11.12版本发布 - Artisan的`make`命令自动剪切`.php `扩展(0个评论)
- golang支持托盘的程序模板:fyneMiniProgram-程序带图标,程序最小化到系统栏(0个评论)
- Laravel的轻量型购物车扩展包:binafy/laravel-cart(0个评论)
- 在go语言中使用http实现multipart/form-data文件上传,不加载文件到内存功能示例(0个评论)
- 2024.07.09日OpenAI将终止对中国等国家和地区API服务(0个评论)
- 在go语言中使用crypto/bcrypt实现用户密码非明文存储示例(0个评论)
- 近期评论
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号