文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

原生JavaScript对dom节点操作总结

韦小宝
发布： 2018-03-09 14:10:09
原创
2178人浏览过

在开发javascript程序的时候使用到最多的就是对dom的操作，今天我们也就把就把原生javascript对dom节点的操作进行一个总结，大家对javascript操作dom节点理解的不完全的可以看看。

1、获取元素节点

获取单个元素：document.getElementById(); document.querySelector()//获取第一个元素;

获取多个元素(可以通过下标来选取单个元素，返回一个元素集合，相当于一个数组)：

document.getElementsByTagName(); 
document.getElementsByName(); 
document.getElementsByClassName();// 动态，实时的 
document.querySelectorAll();// 查找速度比上面的块 //是静态的，非实时的，
登录后复制

创建元素，文本 

立即学习“Java免费学习笔记（深入）”；

document.createElement(“p”)； 
document.createNode(“hello”) //创建文件节点。
登录后复制

插入到文档 

parentNode.appendChild(newNode)， 
parentNode.insertBefore(newNode，positionNode)；
登录后复制

属性操作 

ele.setAttribute(name，value)//设置属性 
ele.getAttribute(name)//获取元素的属性 
ele.removeAttribute(name)//移除属性
登录后复制

节点移除 

ele.remove(),parentNode.removeChild(childNode)
登录后复制

替换子元素 

parentNode.replaceChild(newNode,oldNode)
登录后复制

复制元素 

ele.cloneNode(boolean);// boolean为true， 深复制。
登录后复制

2、获取子元素、父元素、兄弟元素 

ele.previousElementSibling;//上一个兄弟元素 
ele.parentNode;//父元素 
ele.children//子元素 
ele.nextElementSibling//下一个兄弟元素
登录后复制

更多关于节点操作：

jQuery中DOM节点操作方法总结

以上就是原生JavaScript对dom节点操作总结的详细内容，更多请关注php中文网其它相关文章！

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：commonJS详解 下一篇：VUE-CLI @2.9.1以后版本的问题
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js怎样实现文件分片上传 大文件分片上传与断点续传实战 文件分片上传通过将大文件切分为小块提升上传效率与稳定性。其核心实现步骤如下：1.前端使用FileReader和slice()方法进行文件切割；2.利用fetch或XMLHttpRequest逐个上传分片，并附带分片索引等元数据；3.通过localStorage记录已上传分片实现断点续传，后端需存储并验证分片状态；4.服务器接收所有分片后按序合并成完整文件；5.合理选择4MB-8MB的分片大小以平衡请求次数与失败率；6.上传失败时采用重试机制，设置最大重试次数与延迟间隔；7.监听上传进度事件实现U
2025-06-25 10:19:01
634
js如何实现粒子动画效果 Canvas打造炫酷粒子特效 如何实现粒子动画效果？1.使用JavaScript操作Canvas，初始化Canvas元素并获取上下文；2.定义Particle类，包含位置、速度、大小、颜色等属性，并实现draw()和update()方法；3.创建粒子数组，随机生成多个粒子实例；4.使用requestAnimationFrame创建动画循环，不断更新和绘制粒子；5.可添加交互效果，如鼠标移动影响粒子运动。优化性能的方法包括减少粒子数量、使用离屏Canvas、优化更新逻辑、减少状态切换、使用WebWorkers、合理使用透明度、
2025-06-25 10:13:01
792
js如何判断变量是否为数组 5个判断数组类型的实用技巧分享 判断JavaScript变量是否为数组的最推荐方法是使用Array.isArray()。1.Array.isArray()：最推荐的方法，简单直接，跨frames/windows安全，兼容现代浏览器（不支持旧版IE）；2.instanceof：存在多frames/windows下不可靠、原型链可能被修改的问题；3.Object.prototype.toString.call()：通用可靠，适用于所有类型，但代码稍长；4.constructor：易受constructor属性被修改的影响；5.鸭子
2025-06-25 10:08:01
190
js怎么解析xml数据 js解析xml数据的4种常用方法解析 JS解析XML数据的核心方法包括使用DOMParser、XMLHttpRequest和第三方库如xml2js。①DOMParser是浏览器内置的解析器，适用于小型XML文档，语法简单但处理大型文件效率较低；②XMLHttpRequest用于异步加载服务器端XML数据，结合DOMParser解析，适合需要从网络获取数据的场景；③xml2js将XML转换为JSON对象，便于操作，但需引入额外依赖，适合Node.js环境或复杂数据结构处理；④若项目已使用jQuery，可利用$.parseXML()简化
2025-06-25 10:06:02
359
js怎样实现网格布局动画 js网格动画的5种交互效果 JavaScript实现网格布局动画的核心是结合CSSGrid布局与DOM操作，通过动态修改样式属性触发视觉效果。1.创建CSSGrid容器并定义行列结构；2.使用JavaScript操控网格项的样式或借助GSAP、Anime.js等库实现动画；3.通过事件监听实现交互效果如悬停放大、颜色渐变、翻转、涟漪和随机位移；4.优化性能可通过减少DOM操作、使用requestAnimationFrame、硬件加速、节流防抖及缓存计算；5.实现响应式动画需采用auto-fit、媒体查询、相对单位及动态计算
2025-06-25 08:48:02
257
js如何检测NFC设备 Web NFC API实战应用指南 要检测设备是否支持NFC，首先检查'NDEFReader'inwindow以确认浏览器是否支持WebNFCAPI。接着尝试实例化NDEFReader对象并处理可能的异常，若失败则说明NFC功能被禁用或存在其他问题。可选地，使用PermissionsAPI查询NFC权限状态，并在必要时请求权限。确保网站部署在HTTPS环境下，这是WebNFCAPI的基本要求。对于NFC设备未检测到的情况，需区分是“未检测到”还是“检测到但无法读取”，分别可能是API不支持、用户禁用了NFC或标签格式错误、权限不足
2025-06-25 08:38:02
370
js如何实现文本差异对比 4种差异比对算法快速找出文本变化内容 JS实现文本差异对比需遵循以下步骤：1.预处理文本，如清洗字符；2.选择算法如LCS、Diff、Levenshtein距离或基于单词的对比；3.用JS实现所选算法；4.将结果以高亮或报告形式展示。LCS通过动态规划找出最长公共子序列，可优化空间与提前结束运算。Diff算法识别插入、删除、替换操作，可用jsdiff库生成带颜色标记的差异报告。Levenshtein距离计算编辑操作数，用于文本相似度评估。基于单词的对比适合长文本，分割单词后比较增删内容。大规模文本对比可通过分块、WebWorkers
2025-06-25 08:34:01
654
js怎样检测用户操作空闲状态 js检测用户空闲状态的5种实用方案 检测用户在JavaScript中的空闲状态可通过监听用户活动事件并设置定时器实现，具体包括以下5种方案：1.监听mousemove、keydown、touchstart、click事件并在事件触发时重置定时器；2.使用防抖优化频繁触发事件的性能；3.利用localStorage或BroadcastChannel同步多个标签页的状态；4.使用心跳机制定期发送请求以避免误判用户空闲；5.注意隐私保护、可配置性、移动端适配及充分测试。每种方法均围绕用户活动监测和定时控制展开，确保检测机制准确可靠且性能
2025-06-25 08:28:02
111
js怎么判断数组包含元素 js判断数组包含元素的3种方法对比 判断JS数组是否包含元素的方法有includes()、indexOf()和find()/findIndex()。1.includes()直接返回布尔值，适用于只需判断是否存在元素的场景；2.indexOf()返回元素索引，适用于需要获取位置或兼容老浏览器的情况；3.find()/findIndex()支持复杂条件查找，适用于对象数组或需自定义逻辑的场景。处理NaN时，includes()可正确识别，而indexOf()不可靠。对于对象元素，严格相等比较无效，推荐使用find()或findInde
2025-06-24 21:35:01
719
js如何解析JSON字符串 JSON解析的3种安全处理方式 JSON解析，说白了，就是把一堆看起来像乱码的字符串，变成JavaScript能懂的对象或数组。但这里面藏着不少坑，一不小心就掉进去了。直接告诉你答案：JSON.parse()是主力军，但用的时候得小心。另外，还有一些奇技淫巧可以防身。JSON.parse()的威力与陷阱JSON.parse()是JavaScript内置的方法，专门用来解析JSON字符串。用起来很简单：constjsonString='{"name":"张三","age":30}';constobj=JSO
2025-06-24 21:29:01
260
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部