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

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

相关文章

1. 参考文章 @ALISONLY
2. 参考文章 @盏茶作酒 kk

相关知识

1. window.onsize = function(){}
   缺点: 只能监听视口的变化不能监听 dom 元素的变化.
2. MutationObserver
   优点: MutationObserver 可以用来监听整个 DOM 中的变化。
3. 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>

相关依赖

1. v-resize-observer
   文档地址 @文档
2. vue-resize

Js 批量处理 dom 元素

问题

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

解决办法

1. 可以尝试使用 querySelectorAll api 获取 dom 元素,然后使用 forEach 对 dom 元素进行统一处理
2. 可以使用 for 循环 对 dom 元素进行统一处理
3. 可以使用 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 元素添加点击事件的几种方式

1. 直接在 html 中添加 onclick 事件 (onclick='clickHandler')
2. 在 js 中添加 onclick 事件 (target.onclick)
3. 在 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("类名"); // 切换类名 存在则删除，不存在则添加

ClassList contains() 判断是否包含某个类名

• contains() 方法可以判断目标 dom 元素中是否包含某个类名

var node = document.getElementById("element");
if (node.classList.contains("test")) {
  console.log("包含 test 这个class");
}

ClassList item() 判断目标元素有多少类名

const div = document.getElementById("header");

console.log(div.classList.item(0)); // "navbar"

JS 获取dom标签内容（innerhtml)

function getDomInnerHtml(className) {
  let titleDomArr = document.querySelectorAll(className);
  let titleContentArr = [];
  for (let i = 0; i < titleDomArr.length; i++) {
    titleContentArr.push(titleDomArr[i].innerHTML);
  }
  console.log("titleContentArr", titleContentArr);
}

HTML &nbsp； &ensp； &emsp； &thinsp；空格的区别

参考文章@暂时先用这个名字

1.  

它叫不换行空格，全称 No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下 space 键产生的空格。在 HTML 中，如果你用空格键产生此空格，空格是不会累加的（只算 1 个）。要使用 html 实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

2.  

它叫“半角空格”，全称是 En Space，en 是字体排印学的计量单位，为 em 宽度的一半。根据定义，它等同于字体度的一半（如 16px 字体中就是 8px）。名义上是小写字母 n 的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是 1/2 个中文宽度，而且基本上不受字体影响

3.  (中文推荐使用)

它叫“全角空格”，全称是 Em Space，em 是字体排印学的计量单位，相当于当前指定的点数。例如，1 em 在 16px 的字体中就是 16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

4.  

它叫窄空格，全称是 Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是 em 之六分之一宽。

5. ‌

它叫零宽不连字，全称是 Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode 中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML 字符值引用为：‌

6. ‍

它叫零宽连字，全称是 Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的 Unicode 码位是 U+200D (HTML: ‍ ‍）。

7. 其他

浏览器还会把以下字符当作空白进行解析：空格（ ）、制表位（	）、换行（
）和回车（
）还有（　）等等。