【DOM】【dom操作】【属性】【方法】【添加】【替换】【删除】【克隆】

已于 2022-10-05 20:10:30 修改
阅读量84 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
于 2022-09-14 10:33:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57517704/article/details/126847660
版权

1.属性

nodeName 返回节点的名称

parentNode 返回当前节点的父级节点

childNodes 返回所有子节点 得到是一个类数组

firstChild 返回第一个子节点

firstElementChild 返回第一个子节点

lastchild 返回最后一个子节点

lastElementChild 返回最后一个子节点

previousSibling 返回上一个节点

previousElementSibling 返回上一个节点

nestSibling返回下一个节点

nestElementSibling 返回下一个节点

2.方法

hasChildNodes() 返回布尔值 判断是否有子节点

docum.createElement（“节点名称”） 创建节点

3.添加

appendChild() 父元素.appendChild(新节点) 向当前节点末尾添加节点

insertBefore（新节点,参照节点） 指定位置添加

4.替换

父元素.replaceChild（新节点，替换节点） 

5.删除

父元素.removeChild(子节点) 删除

6.克隆

cloneNode（布尔值）true克隆节点 false不克隆节点 默认不克隆

欢lele
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS DOM详解之节点的增加、删除、替换、复制，属性设置和获取，样式设置和获取
吉帅振博客
07-12 2979
写在前面：DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript，为了能够使JavaScript操作Html，JavaScript就有了一套自己的dom编程接口。对于Html，dom使得html形成一棵dom树，类似于一颗家族树一样，一层接一层，子子孙孙。所以说，有了DOM，在我看来就是相当于Java...
DOM相关属性及方法
Internet_Z的博客
10-15 1560
DOM操作相关知识
DOM节点的插入、替换、克隆及删除
weixin_60200454的博客
01-16 206
插入DOM节点 插入内部的尾部： 父节点.appendChild(创建节点) 插入内部的某个前面： 父节点.insertBefore(创建的节点，已知的子节点) 替换DOM节点 父节点.replaceChild(新节点，老节点) 克隆DOM节点 深度克隆：包含子节点一起克隆 浅克隆：只会将找到的这个节点克隆，子节点不会克隆 需要被复制的节点.cloneNode(true/false) //true 深度克隆 //false 浅克隆 删除DOM节点 删除当前节点 节点.re
DOM实现图片的显示、替换、删除
qizhichao110的专栏
04-16 3866
题意：就是用Dom完成下面图片排的样式 首先在程序中添加一个images文件夹，里面放上十五张图片；            Image     {         width:100px;         height:100px;         }                 function addnode() {             //添加
【DOM】DOM操作之如何修改元素的内容与属性_02
青春木鱼的博客
05-04 3389
DOM操作之如何修改元素的内容与属性。元素的内容修改分为3种：元素开始标签到结束标签之间的原始的HTML内容、纯文本内容以及获取或修改表单元素的值；元素的属性修改分为3种：字符串类型的HTML标准属性、bool类型的HTML标准属性、自定义扩展属性
day14 - JavaScript中DOM节点的操作--新增、删除和替换、获取父节点、兄弟节点、克隆节点、查找元素
小高今天早睡了吗？
12-24 1522
一、DOM的新增 1.innerHTML: innerHTML会把原来的内容先清空，然后再添加新的内容，原来的内容已经没有了。只不过是新添加的内容与原来的内容长得一样而已（原本具有的事件不具存在。innerHTML 只能解析字符串 <body> <div class="a"> <span>hello</span> </div> <script> var oDiv = docume
DOM节点类型及其属性和方法
叶子yes的博客
08-23 5449
DOM是JS操作网页的接口，全称为“文档对象模型它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。文档——文档表示的就是整个的HTML网页文档对象——对象表示将网页中的每一个部分都转换为了一个对象模型——使用模型来表示对象之间的关系，这样方便我们获取对象文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。
JavaScript之DOM常用属性及方法详解
发果叁
10-21 6124
自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute ('属性〉获取。element.getAttribute(‘属性’)//自己定义的element.setAttribute(‘属性’,‘值’)//主要针对自定义属性removeAttribute(‘属性’)但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性设置H5自定义属性H5规定自定义属性data-开头做为属性名并且赋值。
DOM元素对象，属性，方法
qq_42238554的博客
02-27 1243
addEventListener() 向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄 语法： element.addEventListener(event, function, useCapture) 参数说明： event 必须。字符串，指定事件名。 注意: 不要使用 “on” 前缀。 例如...
JS实现添加,替换,删除节点元素的方法
10-22
主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf
11-13
JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 在 JavaScript 中，DOM（Document Object Model）是指文档对象模型，它是 HTML 和 XML 文档的编程接口。通过 DOM，我们可以动态地操作文档的结构、样式和...
domster:轻巧，快速的DOM包装器
05-18
它放弃了较新的方法，而取而代之的是较旧的和优化效果更好的方法，它比其他方法查询DOM的速度要快得多。 适用于IE9 + 通过npm i domster或[removed][removed] 如果您遇到错误或需要其他功能，请告诉我们。 遍历 ...
动态操作dom
01-18
动态操作dom方法文/1、document.createElement() 动态创建一个元素标签 //2、appendChild:把创建的标签添加到容器的末尾 // 容器.appendChild(newEle) //3、insertBefore:把创建的标签增加到容器中某一个标签的...
整理JavaScript对DOM中各种类型的元素的常用操作_.docx
10-10
DOM 操作涉及到对不同类型的元素的操作，包括元素、属性、文本、注释、文档等。以下是对 DOM 中各种类型的元素的常用操作的整理。 节点类型 在 DOM 中，每个元素都可以看作是一个节点（node），每个节点都有一个 ...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 597
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1329
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 493
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 557
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
dom操作 添加dom
06-09
要添加DOM节点，可以使用JavaScript中的appendChild()方法或insertBefore()方法。例如，假设我们有一个空的div元素，我们想向其中添加一个p元素，可以使用以下代码： ```javascript var div = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值