javaScript 原生DOM节点操作(最实用的dom节点操作大全)
时间:2022-07-22
本文章向大家介绍javaScript 原生DOM节点操作(最实用的dom节点操作大全),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简单介绍一下DOM
- DOM (Document Object Model) 译为文档对象模型,是
HTML
和XML
文档的编程接口。也就是说把文档编译成了一个对象模型,例如我们写的html
文件实际上是一个文档文件,通过我们的浏览器把它编译成了一个对象模型,这个模型就是document
对象。 - DOM 以树结构表达
HTML
文档。就好像是一个家族谱,有父级元素也有对应的子级元素,那么document对象就是我们最大的父级元素。 - 如下图,家族谱上面的每一个元素都是一个节点,通过对这些节点的操作,我们可以对这个页面为所欲为。
节点的分类
- 元素节点
- 属性节点
- 文本节点
节点的操作
元素节点操作
- 通过元素的id来获取相应的节点
document.getElementById("");
- 通过元素的标签名来获取节点
document.getElementsByTagName("");
- 通过元素的类名来获取节点
document.getElementsByClassName("");
- 通过元素的name属性来获取节点
document.getElementsByName("");
- 获取元素的所有子节点
node.childNodes;
- 创建元素节点
document.createElement("tagName");
- 往父节点最后添加子节点
fatherNode.append(childNode);
- 删除元素节点
fatherNode.removeChild(childNode);
- 替换节点
fatherNode.replaceChidl(newNode,oldNode);
注意:除了通过id选择节点的方式拿到的是一个确定的节点,其余的方式拿到的都会是一个数组,那么获取数组里面对应的节点需要用索引来取并且在Elements后面有s
例如:var body = document.ElementsByTagName("body")[0]
("fatherNode"表示父节点,"childNode"表示子节点)
属性节点操作
- 添加属性节点
node.setAttribute('attr',"attrValue");
- 删除属性节点
div.removeAttribute("attr");
- 修改属性节点
div.setAttribute("attr","new");
- 获取属性节点
div.getAttribute("style");
文本节点操作
- 创建文本节点
var textNode = document.createTextNode("hello");
- 获取文本节点
var textNode = div.childNodes[0];
- 删除起始位置开始的num个值
textNode.deleteData(starNum,num);
- 尾部添加内容
textNode.appendData("后面哦");
- 中间插入内容
te.insertData(1,"中间哦");
innerHTML 和 innerText的区别
innerHTML
<body>
<div id="div"></div>
<script type="text/javascript">
var div = document.getElementById("div");
div.innerHTML = "<h1>hello</h1>";
</script>
</body>
innerText
<body>
<div id="div"></div>
<script type="text/javascript">
var div = document.getElementById("div");
div.innerText = "<h1>hello</h1>";
</script>
</body>
看出来了吧,innerHTML
和innerText
是有本质上的区别的,innerHTML
写入的内容可以解析成标签,而innerText
写入的内容只能当作是文本在浏览器中显示。简单讲,innerHTML
可以在某种特定环境下重构某个元素节点的DOM结构,而innerText
只能修改文本值
总结
原生的DOM节点操作还是非常简单实用的,除了单词长了一点以外好像也没有什么明显的缺点,当然当我们刚开始使用DOM
节点操作的时候,还是会遇到一些坑的。
最容易出错的地方就是document.getElements
这里了,因为这里返回的是一个数组,记住是一个数组,而不是一个节点对象,所以一定要在数组的后面加上其对应的节点的索引值,就算这个数组里面只有一个元素,他还是一个数组。
把这里搞清楚剩下的就是靠大家的细心了,有一些操作是针对父级节点的,例如node.appendChild()
,还有很多,一定要分清楚父级节点和子级节点的关系,才能玩转DOM
节点操作。祝大家学习顺利,新年快乐!!!
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
- Thinking in React Implemented by Reagent
- ssm整合Redis
- 前端魔法堂——调用栈,异常实例中的宝藏
- 开启MySQL的binlog日志
- C#解析JSON
- 动手写个数字输入框1:input[type=number]的遗憾
- 小猪农场获百万天使轮,六声域名源自运营主体
- Intellij idea 的maven项目自动下载jar包
- python3和python2共存
- 揭密微信跳一跳小游戏那些外挂
- 特斯拉出现人才流失潮,竟因为一些工程师认为Autopilot自动驾驶技术并不安全
- 微信又更新了,这次放出年度大招!新变化让不少人拍手叫好!
- “JINAN”:未来电动汽车边跑边充电
- Bagging算法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 这几项超好用的云开发扩展能力,别说你还不知道!
- Ubuntu上一键卸载安装mysql脚本
- Python-批量修改图片全部颜色,批量修改图片的指定颜色,马甲包一键换主题UI
- 【SpringBoot DB 系列】h2databse 集成示例 demo
- MySQL 案例:analyze,慢查询,与查询无响应
- 万字图解Java多线程
- 金九银十要来了?不要慌,这些Android BAT高级面试题刷一刷
- 【SpringBoot DB 系列】Jooq 初体验
- Android轻量级APM性能监测方案
- 保持 Go 模块兼容
- Go 模块:v2 及更高版本
- 发布 Go Modules
- SRA toolkit下载数据
- 【测试开发-1】基于Springboot+layui实现接口自动化平台
- 【SpringBoot-2】SLF4J+logback进行日志记录