关于元素节点的各种操作(attributes)

简介

在日常使用的过程中,getAttribute、setAttribute、removeAttribute都是会用到的来操作元素的特性的一些方法,例如getAttribute可以用来获取元素的特性,那么这跟直接获取元素特性有什么区别呢?

获取元素特性的方式

这里先有这么一串代码

<div id = "myId" 
class = "myClass" 
title = "myTitle" 
lang = "myLang"></div>

这时候,如果想要获取该div元素上面的各种特性,有两种方法。
第一种:

var myId = document.getElementById("myId");
console.log(myId.getAttribute("id"));
console.log(myId.getAttribute("class"));
console.log(myId.getAttribute("title")
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 `MutationObserver` 监听 DOM 的变化时,可以通过观察目标节点的子节点列表和属性变化来捕获元素的添加、删除或修改等操作。如果你想捕捉哪个 div 删除了元素,可以在监听回调函数中检查 `MutationRecord` 对象的 `removedNodes` 属性,该属性返回一个 NodeList,包含被删除的节点列表。通过判断被删除节点的父节点是否是目标 div,即可确定哪个 div 删除了元素。 以下是一个示例代码: ```javascript // 目标 div 的选择器 const targetSelector = '.target-div'; // 创建 MutationObserver 实例 const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { // 判断是否有节点被删除 if (mutation.removedNodes.length) { // 遍历被删除节点列表 mutation.removedNodes.forEach((node) => { // 如果被删除节点的父节点是目标 div,则输出日志 if (node.parentElement.matches(targetSelector)) { console.log(`元素被删除了:${node.outerHTML}`); console.log(`被删除元素的父节点是:${node.parentElement.outerHTML}`); } }); } }); }); // 配置 MutationObserver const config = { childList: true, // 监听子节点列表的变化 attributes: false, // 不监听属性变化 subtree: true, // 监听目标节点及其子孙节点的变化 }; // 监听目标节点 const targetNode = document.querySelector(targetSelector); observer.observe(targetNode, config); ``` 在上面的代码中,我们先定义了一个目标 div 的选择器,然后创建了一个 `MutationObserver` 实例,并在回调函数中判断被删除节点的父节点是否是目标 div,如果是,则输出日志。最后,我们将 `MutationObserver` 实例绑定到目标节点上并启动监听。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值