JavaScript 操作DOM元素及DOM元素相关属性

i小杨

已于 2024-04-02 16:40:19 修改

阅读量162

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-09-13 16:57:48 首次发布

本文链接：https://blog.csdn.net/i_satan/article/details/132858406

版权

js 动态监听 dom 元素的高度变化.

相关文章

参考文章 @ALISONLY
参考文章 @盏茶作酒 kk

相关知识

window.onsize = function(){}
缺点: 只能监听视口的变化不能监听 dom 元素的变化.
MutationObserver
优点: MutationObserver 可以用来监听整个 DOM 中的变化。
ResizeObserver
缺点：兼容性不好。

<script>
export default {
  methods: {
    handleResize() {
      console.log("handle resize");
    }
  },
  mounted() {
    const dom = this.$refs.target.$el;   // 假设this.$refs.target返回是VueComponent对象
    this.observer = new ResizeObserver(this.handleResize);
    this.observer.observe(dom, { box: "border-box" });
  },
  beforeDestroy() {
    this.observer.disconnect();
  }
};
</script>

相关依赖

v-resize-observer
文档地址 @文档
vue-resize

Js 批量处理 dom 元素

问题

使用 getElementsByTagName , getElementsByClassName 等 api 获取 dom 元素使用 forEach 时报错

解决办法

可以尝试使用 querySelectorAll api 获取 dom 元素,然后使用 forEach 对 dom 元素进行统一处理
可以使用 for 循环对 dom 元素进行统一处理
可以使用 Object.entries 对获取的 dom 元素进行处理

原因

getElementsByClassName 获取到的 DOM 是对象，原型链上也没有 forEach 方法，所以报错。

<div class="container">
  <div class="dom box1">元素1</div>
  <div class="dom box2">元素2</div>
  <div class="dom box3">元素3</div>
  <hr />
  <div class="dom1 box1">元素1</div>
  <div class="dom1 box2">元素2</div>
  <div class="dom1 box3">元素3</div>
  <hr />
  <div class="dom2 box1">元素1</div>
  <div class="dom2 box2">元素2</div>
  <div class="dom2 box3">元素3</div>
</div>

<script>

  -------------------------------------------   方法一   ----------------------------------

    let domArr = document.getElementsByClassName("dom");
    for (let i = 0; i < domArr.length; i++) {
      domArr[i].style.background = "tomato";
      console.log("基础for循环", domArr[i]);
    }
    console.log("domArr", domArr);


  -------------------------------------------   方法二   ----------------------------------

    let classList = document.getElementsByClassName("dom1");
    for (let [key, domItem] of Object.entries(classList)) {
      domItem.style.background = "pink";
      console.log("entries遍历", key, domItem);
    }
    console.log("classList", classList);

  -------------------------------------------   方法三   ----------------------------------

    let classList2 = document.querySelectorAll(".dom2");
    classList2.forEach((item) => {
      item.style.background = "lightBlue";
      console.log("querySelectorAll 选择器", item);
    });
    console.log("classList2", classList2);
</script>

dom 元素添加点击事件的几种方式

直接在 html 中添加 onclick 事件 (onclick='clickHandler')
在 js 中添加 onclick 事件 (target.onclick)
在 js 中添加事件监听器 (addEventListner)

参考文章@MuYs

方法一----------------------------------------------------
  <button onclick="btnHandler()">按钮一:便签点击</button>

      function btnHandler() {
        console.log("按钮一被点击了");
      }

方法二----------------------------------------------------

    <button id="btn1">按钮二:动态点击</button>

      let btn1 = document.getElementById("btn1");
      btn1.addEventListener("click", function () {
        console.log("按钮二被点击了");
      });
方法三----------------------------------------------------
    <button id="btn2">按钮三:事件监听</button>

      let btn2 = document.getElementById("btn2");
      btn2.onclick = function () {
        console.log("按钮三被点击了");
      };

dom 元素触发点击事件

获取需要触发点击事件的 dom 元素后调用 click() 方法.

参考文章@苏喂苏喂苏喂 su

<div id="div"></div>;
let div = document.getElementById("div");
div.click();

JS 创建 dom 元素

创建元素: document.createElement('标签名')

imageData.map((image) => {
  let img = document.createElement("img");
  img.src = image;
  document.body.appendChild(img);
});

JS 插入其他 dom 元素

插入元素: document.body.appendChild(img)
删除元素: document.body.removeChild(img)
插入元素前: document.body.insertBefore(img, document.body.firstChild)
插入元素后: document.body.insertBefore(img, document.body.lastChild)

console 控制台查看 dom 元素(以对象形式查看)相关属性.

一格式化

console.log('%O', myElement)

二使用非公开 api

console.dir(myElement);

三转换成数组

console.log([myElement]);

JS 给 Dom 元素添加自定义属性.

参考文章@牛译伟

1. 直接在 html 标签上添加自定义属性.

尽量使用 data- 前缀, 避免与 html5 标准冲突.

2. 使用 js 添加自定义属性.

element.属性 = ‘值’; 设置内置属性值
element.setAttribute(‘属性’,‘值’); 主要针对自定义属性(css 属性选择器可以选择到)

var div = document.querySelector("div");
console.log(111111);
// element.属性 = ‘值’
div.id = "box";
div.className = "navs";
//element.setAttribute('属性名','值')
div.setAttribute("index", "111");
div.setAttribute("class", "footer");

获取属性值

element.属性获取属性值
element.getAttribute(‘属性名’) 获取自定义属性值

//element.属性  获取内置属性（元素本身自带的属性）
console.log(div.className);
//element.getAttribute('属性')  获得自定义属性
console.log(div.getAttribute("index"));

移出属性

element.removeAttribute(‘属性名’) 移出自定义属性

var div = document.querySelector("div");
div.removeAttribute("index");

判断是否包含指定的属性

element.hasAttribute(‘属性名’) 判断是否包含指定的属性

let box = document.getElementById("box");
for (let i = 0; i < 10; i++) {
  let item = document.createElement("div");
  item.style.width = "200px";
  item.style.height = "200px";
  item.innerText = i;
  item.setAttribute("lv", i); //  setAttribute添加的属性 使用hasAttribute 判断,  结果为 true
  // item["lv"] = i; //   使用hasAttribute 判断,  结果为 false
  box.appendChild(item);
  console.log(item.hasAttribute("lv"));
}

JS 给 Dom 元素添加类名

方法一: DOM.className = ‘类名’

说明: 一次只能设置一个类值，如果当前属性本身存在类值，会被替换。

方法二: DOM.classList.add(‘类名’,‘类名 2’)

DOM.classList.add("类名一", "类名二", "类名三"); // 添加一个或多个类名

DOM.classList.remove("类名一", "类名二", "类名三"); // 删除一个或多个类名

DOM.classList.toggle("类名"); // 切换类名 存在则删除，不存在则添加