js常见问题总结-DOM节点增删改查

最新推荐文章于 2024-10-31 15:49:24 发布
最新推荐文章于 2024-10-31 15:49:24 发布
阅读量162 收藏
点赞数
分类专栏： javascript常见问题 文章标签： 前端 javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nahedan/article/details/119874959
版权
本文总结了JavaScript中DOM节点的增删改查操作，包括查找节点、创建节点、替换节点、删除节点及常见问题。详细介绍了createElement()、appendChild()、replaceChild()、removeChild()等方法，并提供了创建和插入特定属性节点的实例。
摘要由CSDN通过智能技术生成

DOM节点的增删改查

文章目录

1.查找节点

getElementById()

getElementsByClassName()

getElementsByTagName()

querySelector()

querySelectorAll()

firstChild

Children

lastChild

childNodes

someNode.previousSibling

someNode.nextSibling

someNode.parentNode

getAttribute

2.增加节点

2.1 创建节点
createElement()：创建一个dom节点
document.createElement('div');
2.2 父节点插入子节点

appendChild()：子节点末尾追加

const element = document.createElement('div');
element.textContent="新加的按钮";
document.body.appendChild(element);
2.3 同级插入节点

节点.insertBefore(插入的标签，参照标签)

const newNode = document.createElement('div');
document.body.insertBefore(newNode);

3.修改节点

3.1 替换节点

replaceChild()：替换子节点。接受两个参数，第一个为要插入的节点，第二个为要替换的节点

const newNode=document.createElement('span');
const oldNode=document.querySelector('#root');
document.body.replaceChild(newNode,oldNode);
3.2 clone节点
var box =document.getElementById("box");
//复制box节点(浅拷贝）
var new_box1 =box.cloneNode(false);
console.log(new_box1);
//复制box节点（深拷贝）
var new_box2 =box.cloneNode(true);
console.log(new_box2);
clone

4.删除节点

4.1删除节点

removeChild()：删除子节点

const element=document.querySeletor('#root');
document.body.removeChild(element);

5.常见操作实现问题

创建一个textContent=‘年薪一百万’，className=‘selected’，data_val='1000000’的div标签

创建10（i从1到10）个textContent=‘100000i’，className=‘selected’，data_val='100000i’的li标签，并将此标签插入到上面div标签之前

综合案例

<!DOCTYPE html>
 <html lang
最低0.47元/天 解锁文章
_he_dan_
关注
专栏目录
JavaScript 实现HTML DOM增删改查操作的常见方法详解
10-15
JavaScript实现HTML DOM增删改查操作的常见方法详解主要介绍了如何使用JavaScript对HTML文档对象模型（DOM）进行元素的查找、增加、删除和修改操作。这些操作是Web开发中非常基础且常用的功能，能够对网页元素进行...
JavaScript针对网页节点的增删改查用法实例
10-24
JavaScript网页节点增删改查实例知识点总结如下： 1. HTMLDOM概念 HTMLDOM，即HTML文档对象模型，是Web页面加载和表示的方式。它把网页当作一个具有层次结构的树形对象集合，每个HTML标签对应一个元素节点，而包含...
JS中编程中什么时候用Document和document
liu511623的博客
03-13 446
document"对象提供了一些与文档相关的属性和方法，例如"document.title”、"document.URL"和"document.getElementById()"等。在编程中，一般建议在访问和操作文档中的元素和数据时，优先使用"document"对象，因为它更简洁，易于阅读和编写。通常来说，"Document"通常是指代文档对象模型（DOM）的接口，它包含了表示整个HTML文档的方法和属性，因此在使用DOM操作时，需要使用"Document"接口来访问和操作文档中的元素和数据。
webpack工程化——缓存（用增量更新代替全量更新）
zhaoge's blog
06-23 492
1.输出文件的文件名 使用substitution（可替换模板字符串）的方式 output: { filename: "[name].[contenthash].js", ... }, 2.提取引导模板 如果要验证这一块的功能，现将./src/index.js文件中异步import的方法注释，换上第一章在的代码 // async function getComponent() { // const element = document.createElement("div"); // cons
JavaScript之操作DOM对象 添加节点 删除节点 替换节点 父节点 子节点
你好，Java！的博客
06-24 1492
DOM HTML DOM 　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）； 　文档：DOM的D 　如果没有ducument文档，DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中，DOM就悄然而生，它会根据你的网页文档创建一个文档对象。 　对象：DOM的O 　JavaScript中的对象分为三种，用户自定义对象，内在对象（如：Array，...
JavaScript基础复习(二) DOM详解
赵乘风_i
11-13 343
学过JavaScript的同学应该知道，JS由三部分组成，ECMAScript，DOM，BOM。这节我们详细了解一下DOM（Document Object Model 文档对象模型）。 很久不直接操作DOM了，现在要写还是需要回忆许久的。首先查阅了之前的笔记，列出如下导图，文章也将按照导图的点来进行详解。 一、基础DOM 1、DOM概述 Document Object ...
原生js的dom操作(常用的整理)
jonsen的博客
05-29 1990
父节点parentNode第一个子节点 只会获取到元素节点firstElementChild ★★★★★ ​第一个子节点 (如果有文本节点将会获取到文本节点)firstChild​最后一个节点 只会获取到元素节点lastElementChild ★★★★★最后一个子节点 (如果有文本节点将会获取到文本节点)lastChild ​当前节点的后一个（下一个）节点 注：只会获取到元...
js - DOM节点的增删改查
m0_74417967的博客
06-30 66
1 获取父节点的方法2 获取子节点方法 3 获取兄弟节点方法
jQuery实现对网页节点的增删改查功能示例
10-19
jQuery操作DOM节点的增删改查 #### 增加节点 在网页中增加节点，通常是指动态地向文档中添加新的HTML元素。在jQuery中，可以使用`append()`或`prepend()`方法向指定的元素内部增加内容。例如，以下代码演示了如何...
js节点的添加 删除 插入 替换
DDD_Yi的博客
10-07 656
一.创建元素节点createElement添加节点 node.appendChild(child) -->node父级 child 子级 元素追加到最后面 效果图 二.插入节点insertBeforenode.insertBefore(child,指定元素)-->node父级 child 子级 效果图 三.删除节点node.removeChild(child)-->node父级 child 子级 四.替换节点 父级.replac...
js操作dom常见问题
杰克拉乌的博客
04-17 544
自己是菜鸡的时候不理解，为什么用jquery选择不了dom,还有有的时候绑定不上事件。后来慢慢理解才知道，dom没有渲染上，你怎么绑定事件呢。比如jquery,你在拼接字符串的时候，就用选择器选择字符串中的类或id，当然选择不到了，因为他还没挂载在dom上。添加事件也是如此，比如你请求成功了，回调函数中拼接字符串添加dom，但是你在回调外写的绑定事件，当代码执行的时候，异步回调函数是在队列中，等同...
JS操作DOM节点实现网页更新
星.云计算
01-17 392
DOM节点操作可以使网页变得更像应用程序，而不是一般的静态页面。可以让页面在不与服务器进行通信的情况下，根据用户输入的内容发生改变，以及在脚本控制下更新页面。 尽管可以用innerHTML这样的技术实现相同的效果，但是它并不是W3C官方支持的。W3C建议符合标准的浏览器采用节点操作的方式支持网页，即规定浏览器应该如何处理文档对象模型（Document Object Model，DOM）。 ...
WEBRTC教程:局域网怎么调试，http://172.19.18.101:8080 ,无法访问摄像头和麦克风，请检查权限
keyboard专栏
10-25 1131
在局域网中使用 WebRTC 时，无法访问摄像头和麦克风通常是因为浏览器的安全策略限制了API 的使用。如果你在非localhost或非 HTTPS 环境下访问网页，浏览器会阻止访问摄像头和麦克风。localhost大多数浏览器允许在localhost上使用，即使没有 HTTPS。所以你可以在服务器和客户端同一台机器上使用localhost进行测试。如果你需要在局域网的 IP 地址上（如）进行访问，那么使用 HTTPS 是解决方案之一。通过配置 HTTPS，你可以避免浏览器的安全限制。使用openssl。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 456
使用filterable。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 633
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
前端 常见开发工具使用
最新发布
weixin_45534301的博客
10-31 329
【代码】前端 常见开发工具使用。
CSS3新增盒子属性（三）
。
10-28 946
介绍CSS3新增盒子属性。
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 212
Google Recaptcha V2 简单使用
vue父子通讯
Jsjendndn的博客
10-28 286
下面是子组件子组件使用Props发送。
JavaScript操作DOM节点：增删改查实例解析
本文实例讲解了如何使用JavaScript进行DOM节点的增删改查操作。 一、DOM基本概念 DOM是Document Object Model的缩写，它是HTML和XML文档的一种标准表示形式。它将网页内容视为一系列相互关联的节点，包括文档节点、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值