JS监听页面元素删除子节点、增加子节点、修改子节点的内容

最新推荐文章于 2023-11-26 22:56:22 发布
最新推荐文章于 2023-11-26 22:56:22 发布
阅读量1.6k 收藏 2
点赞数 2
文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ttbat/article/details/120905011
版权

监听这个事件DOMSubtreeModified。
表示如果当前监听元素的子节点有改动：包括删除子节点、增加子节点、修改子节点的内容，都会触发这个事件。

var container = document.querySelector(".target")
container.addEventListener('DOMSubtreeModified', function () {
    
}, false);

ttbat
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
《Android 开发艺术探索》笔记4--View事件分发与滑动冲突
行动者&&职业化
09-07 1959
思维导图View事件分发机制点击事件传递规则事件分发的源码解析View的滑动冲突滑动冲突的解决方式参看文章 思维导图 View事件分发机制 点击事件传递规则 所谓点击事件的事件分发,就是对MotionEvent事件的分发过程,传递给某一个View. 在事件传递中有三个方法是贯穿始终的 dispatchTouchEvent():进行事件的分发 如果事件能传递到View那么此方法一定会被调用,返回值受当前View的onTouchEvent()和下级View的dispatchTouchEvent()的影.
Javascript: 修改元素节点内容的3大类方法及注意事项
LoneMouse
10-21 4710
DOM操作是前端必须掌握的技能之一, 而最经常做的就是读取和修改元素节点的文本内容,这里给大家列出7种获取/修改文本内容的方式, 供大家参考! 通过直接修改文本节点 节点一共具有三个属性, nodeType, nodeValue, nodeName 只有注释, 文本, 属性具备nodeValue 所以我们可以直接获取目标节点的子文本节点 target.firstChild.nodeValue //需要保证第一个子节点是文本节点 target.childNodes[0].nodeValue //同理 很
原生js监听dom节点属性变化
默默地博客
09-15 2730
// 选择需要观察变动的节点 const targetNode = document.getElementById('js-toc'); // 观察器的配置（需要观察什么变动） const config = { attributes: true, childList: true, subtree: true }; // 当观察到变动时执行的回调函数 const callback = function(mutationsList, observer) { // Use traditional 'for lo
监听dom页面动态插入元素以及元素属性变化
辉兔子
11-10 2359
工作中埋码需求，当某些动态插入的元素出现时触发埋码事件，因此需要对插入元素的父节点进行监听，子节点发生变化时触发相应埋码逻辑。 (function () { //事件触发时执行埋码内容 function do_track() { if ($("#LXB_CONTAINER > ins.lxb-cb-tip.lxb-cb-tip-feedback > ins.lxb-cb-tip-con > ins.success-tip-phone") &am...
JS .addEventListener( ) 事件监听器：监听元素的事件，并设置事件发生时触发的函数，以及事件流（冒泡、捕获）
热门推荐
weixin_41796631的博客
10-09 2万+
为什么使用事件监听？ 当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的 onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。 用.addEventListener( ) 可以为元素绑定多个事件，而且每个事件都可以被执行，实现事件监听。 语法： Element.add...
JS获取子节点、父节点和兄弟节点的方法实例总结
10-18
例如，在通过父节点获取子节点时，如果父节点是动态创建的，可以通过定时器或者事件监听器确保父节点存在后再执行子节点的获取操作。同时，在对节点集合进行操作时，要留意对数组索引的调整，因为DOM元素的增删可能...
删除javascript所创建子节点的方法
10-24
通常情况下，开发者可能会使用`ul_level2.innerHTML = ''`这种方式，将整个`ul_level2`元素的内容清空，从而删除所有子节点。尽管这种方法简单直接，但会丢失`ul_level2`中的所有事件监听器和元素属性。因此，推荐...
zTree获取当前节点的下一级子节点数实例
08-29
在本文中，我们将深入探讨如何使用zTree这个流行的JavaScript插件来获取当前节点的下一级子节点数。zTree是一款功能强大的树形控件，它提供了丰富的API接口和灵活的配置选项，使得开发者能够轻松地在网页中创建交互...
Javascript removeChild()删除节点及删除子节点的方法
11-25
由于删除节点会改变子节点的索引，所以我们需要从最后一个子节点开始向前遍历并删除，以确保不会跳过任何子节点。 总结，`removeChild()`方法在JavaScript中是处理DOM动态更新的重要部分，它可以有效地帮助我们删除...
jquery实现点击TreeView文本父节点展开/折叠子节点
10-27
根据提供的文件信息，可以提炼出以下几个知识点： ...要实现一个点击TreeView文本父节点展开/折叠子节点的功能，开发者需要具备对jQuery和TreeView控件工作的深入理解，以及编写和调试JavaScript代码的能力。
JavaScript监听DOM节点变化事件
qq_44849271的博客
12-09 4347
DOMCharacterDataModified监听的是元素中文本节点的变化，但是innerHTML、innerText与textContent都是监听不到的，使用el.firstChild.nodeValue才会触发DOMCharacterDataModified的监听。DOMNodeInserted监听的是元素的插入，属性节点的添加是监听不到的。DOMNodeRemoved监听的是元素的移除，属性节点移除是监听不到的。DOMAttrModified监听的是元素属性的变化。
js 捕获子元素的 focus 事件
352328759的博客
05-25 4377
focus 事件可以绑定任何元素,但只有可编辑元素才可以触发 focus 事件.且 focus 事件不会冒泡. 所以不能在父元素监听子元素的 focus 事件. focusin 事件与 focus 一样是在元素获取焦点时触发.但 focusin 可以冒泡.也就是说父元可以素监听子元素的 focusin 事件. 可编辑元素可以是原生的input, textarea. 也可以是 css(user-modify: read-write-plaintext-only;) 控制的div; 也可以是标签属性 (cont
JavaScript HTML DOM replaceChild替换子节点
编程界明世隐的博客
12-16 2043
目录 语法： 1.用已有的节点去替换 2.用新创建的节点去替换 replaceChild方法用新节点（新创建的节点或者已经存在的节点）替换某个子节点。 语法： replaceChild(newnode,oldnode); ​​​​​​​ newnode 新节点oldnode 要替换的节点 1.用已有的节点去替换 <!DOCTYPE html> <html> <head> <meta http-...
Js 修改元素内容的几种方法
qq_39275718的博客
11-19 6063
改变元素内容 Element.innerText //从起始位置到终止位置的内容,但它去除html标签，同时空格和换行也会 去掉 Element.innerHTML //起始位置到终止位置的全部内容,包括html标签，同时保留空格和换行 Element.insertAdjacentHTML("位置", "内容"); Element.insertAdjacentHTML(“位置”, “内容”) 将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。
【JS】MutationObserver 监视 DOM 树改变的api
最新发布
呆呆狗
11-26 1495
是一个构造函数，可以用来监听某个节点的变化，当节点发生变化时，可以执行一些回调函数。它不会立即执行，需要调用MutationObserver的observe方法，传入你想要监听的节点，以及一些配置，然后当节点发生变化时，就会执行你传入的回调函数。
JS创建、插入、删除和修改节点
m0_61685240的博客
09-26 1389
在 JavaScript 中，使用 HTML DOM 创建、插入、修改（替换）和删除节点需要分别调用 document 对象和元素对象的相应方法来实现，调用情况分别如下： 创建节点： 创建元素节点调用 document.createElement（节点名）； 创建文本节点调用 document.createTextNode（节点名）； 创建属性节点调用 document.createAttribute（节点名）; 元素节点的内容也可以使用：元素节点 .innerHTML 来设置。 节点的
js元素节点的新增，修改，删除
qq_56008371的博客
05-16 390
1.创建元素节点 //新增元素节点 书写格式：document.createElement("元素名称"); let pEle = document.createElement("p"); //添加节点 //书写格式：父元素节点.appendChild(子元素节点) let preEle = document.getElementById("container"); preEle.appendChild(pEle); 2.插入节点 /** * 插入节点 * 1、创建/获取:节点A
javascript获取和修改元素 节点的所有方法
Mr. Ding的小博客
11-05 373
一、获取和修改内联样式 html <div class="div1" style="width: 200px;"> </div> js var oDiv = document.getElementsByTagName("div")[0] console.log(oDiv.style.width);//200px oDiv.style.backgroundColor = "#000"//修改内联样式 二、获取和修改外联样式 js 这时候我们就需要用到getComp
JS监听html内容变化，JS监听html文档高度变化，JS监听html元素的宽高变化
qingdi1的博客
12-06 1578
JS监听html内容变化，JS监听html文档高度变化，JS监听html元素的宽高变化代码 代码 // 添加监听代码 let dom = document.querySelector('body') let MutationObserver = window.MutationObserver || window.webkitMutationObserver || window.MozMutationObserver; let mutationObserver = new MutationObserver(f
选择子节点的同时父节点也勾选js代码
04-01
这个问题的描述不够清晰，不过我猜测你是指在勾选父节点时，子节点也会被自动勾选，并且同时也会执行一些 JavaScript 代码。如果我的猜测正确，那么可以按照以下步骤实现： 1. 给父节点和子节点添加一个相同的 class，例如 "checkbox-item"。 2. 给父节点添加一个点击事件的监听器，当父节点被点击时，遍历所有子节点并将它们的勾选状态改为和父节点一样。 3. 在点击事件监听器中添加你想要执行的 JavaScript 代码。 以下是一个示例代码： ```html <ul> <li class="checkbox-item"> <input type="checkbox" id="parent-checkbox"> Parent <ul> <li class="checkbox-item"><input type="checkbox"> Child 1</li> <li class="checkbox-item"><input type="checkbox"> Child 2</li> <li class="checkbox-item"><input type="checkbox"> Child 3</li> </ul> </li> </ul> <script> const parentCheckbox = document.querySelector('#parent-checkbox'); const childCheckboxes = document.querySelectorAll('.checkbox-item input[type="checkbox"]:not(#parent-checkbox)'); parentCheckbox.addEventListener('click', function() { const isChecked = parentCheckbox.checked; childCheckboxes.forEach(function(checkbox) { checkbox.checked = isChecked; }); // 在这里添加你想要执行的 JavaScript 代码 }); </script> ``` 在以上代码中，我们首先获取了父节点和子节点的复选框元素，然后给父节点添加了一个点击事件监听器。当父节点被点击时，我们遍历了所有子节点的复选框元素，并将它们的勾选状态改为和父节点一样。同时，我们也可以在点击事件监听器中添加任何我们想要执行的 JavaScript 代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值