JS-DOM篇

Chosen_1
123 阅读5分钟

什么是DOM

DOM是一棵HTML解析树（如下图所示），修改DOM不会对原HTML文件进行修改，其内容包括各种节点和方法
其中节点主要包含各种元素节点、文本节点、注释节点、文档节点和文档类型节点等

image.png

DOM作用

  • 有利于让我们使用JS选择一些元素并进行操作（有可能会有增加修改操作）
  • 避免直接在原HTML文件上进行操作

DOM方法

1. 选择元素

方法：

  1. 选择单独的元素-----document.querySelector(".类名");
  2. 选择一系列元素-----document.querySelectorAll(".类名");

2. 添加和删除元素

添加元素

方法1：

  1. 创建空元素-----const 变量名 = document.createElement("元素名");
  2. 填充内容-----变量名.innerHTML="...";
  3. 添加类名-----变量名.classList.add("类名");
  4. 插入位置-----父容器.prepend/append/before/after(变量名);——其中prepend/append表示父容器内部之前/后，before/after表示父容器外部之前/后

方法2：

  1. 创建变量-----const html = "...";
  2. 插入位置-----父容器.insertAdjacentHTML("位置",html);——其中位置有afterbegin/beforeend表示父容器内部之前/后，beforebegin/afterend表示父容器外部之前/后

Notice：两种方法各有千秋，第一种更常见且有利于直接添加监听事件，第二种非常方便，具体情况看需求选择

删除元素

方法：元素.remove();

3. 修改/获取元素的CSS样式、HTML属性、类名

CSS样式

设置样式-----元素.style.属性="...";——属性包括颜色、字体大小等等

HTML属性

方法1：元素.属性 = "...";
方法2：元素.getAttribute(名);/元素.setAttribute(名，值);
方法3：自定义属性名为"data-...";

  • 元素.dataset.驼峰名;
  • 元素.getAttribute("data-...");
  • 元素.dataset[变量名]——动态的

Notice：当原始的src、href中的路径是相对路径时，用第一种方法获取图片/链接路径是绝对路径，第二种方法获取图片/链接路径是相对路径

类名

方法：元素.classList.操作("...");——其中操作有add/remove/toggle/contains(添加/删除/转换/是否包含)

4. 选择父元素、兄弟元素

在这一小节中只列出最常见的两个方法：

  • 选择满足条件的最近父元素-----el.closest(".类名");——常用于事件委托唯一确定元素
  • 选择所有相邻的兄弟元素-----el.closest(".类名1").querySelectorAll(".类名2");——用于对相邻所有组件进行操作

5. 添加和删除监听事件

- 添加监听事件

方法：元素.addEventListener("事件",回调函数);
其中事件包括"click"（点击）、"keydown"（键盘->要使用document）、"mouseover"（鼠标悬停）、"mouseout"（鼠标移出）等事件

- 删除监听事件

方法：元素.removeEventListener("事件",回调函数);
可以在添加监听事件的回调函数中删除，表示监听事件只执行一次，属于"一次性事件"

DOM特性

捕获和冒泡——事件委托

捕获和冒泡

如下图所示，捕获就是事件从DOM树自顶向下寻找目标元素的过程，冒泡就是事件从目标元素自底向上到顶端的过程

image.png

作用：可以利用冒泡特性来让相应的父元素也触发对应事件

事件委托

目的：节省空间，不必要让每个子元素都添加事件，动态添加事件

步骤：

  1. 确定父容器——querySelector(".类名");
  2. 寻找发生事件的目标元素——e.target.closest(".类名");
    (closest的作用是找到最近匹配条件的祖先，使用其目的是避免出现点击内部元素导致目标元素不响应；如果点击的就是目标元素返回自身)
  3. 添加保护条款——if(!...)return; 避免元素不存在的情况
  4. 对目标元素进行操作——添加监听事件、添加删除类等操作

image.png

代码样例如上图所示

DOM拓展

- 实现平滑滚动

方法：

// 1. 先获取目标元素 
const targetElement = document.querySelector(".target");
// 2. 调用平滑滚动（补充block参数，默认是"start"） 
targetElement.scrollIntoView({ 
behavior: "smooth", 
block: "center" // 使目标元素垂直居中显示 });

- 交叉观察器应用程序编程接口

用途：在滑动过程中显示某些组件

原理：通过观察者和目标对象之间交叉关系的变化，如从交叉到未交叉，从未交叉到交叉的变化来调用回调函数

步骤：

  1. 创建一个观察者
const 观察者 = new IntersectionObserver(fn,{
root:...//交叉观察的基准容器，默认值null，浏览器视口
threshold:...//交叉比例（可能是一个数字，也可能是一个数组）
rootMargin:...//字符串，扩大/缩小目标对象的边界——用于图片预加载
})

  1. 回调函数的实现

    步骤：

    1. 默认参数有对象数组entries、观察者observer
    2. 获取目标对象——const [entry] = entries;
    3. 通过isIntersecting的bool值来进行操作
    4. 获取目标元素——entry.target
    5. 如果只需要一次性使用，在最后删除观察者——observer.unobserve(entry.target);

3.用观察者观察目标对象——观察者.observe(目标对象)

- 轮播图

思路：

  1. 多个图片在同一行但是在不同的位置，通过改变基准数字（基准数字在临界值视情况而定）整体改变所有的图片位置——element.style.transform = "translateX(...)%"
  2. 对于左按钮、右按钮，设计两个函数引用改变所有图片位置的函数

最后

前端开发之路任重而道远，在未来仍有很多知识需要学习，小编也是一个初学者，让我们一起加油！如果这篇文章能帮到你的话，荣幸之至；如果有错误的话并指出来的话，小编将不胜感激。

avatar
文章
阅读
粉丝