javascript

DOM操作

常用的DOM操作

Posted by Starrynight on 2024-03-05
Estimated Reading Time 5 Minutes
Words 1.2k In Total
Viewed Times

常用的 DOM 操作

1️⃣ 选择 DOM 元素

getElementById()

通过 id 选择一个元素。

1
let element = document.getElementById("myElement");

getElementsByClassName()

通过类名选择一组元素。

1
let elements = document.getElementsByClassName("myClass");

getElementsByTagName()

通过标签名选择一组元素。

1
let elements = document.getElementsByTagName("div");

querySelector()

通过 CSS 选择器选择第一个匹配的元素。

1
let element = document.querySelector(".myClass"); // 选择第一个 .myClass 元素

querySelectorAll()

通过 CSS 选择器选择所有匹配的元素。

1
let elements = document.querySelectorAll(".myClass"); // 返回所有匹配 .myClass 的元素

2️⃣ 修改 DOM 元素内容

innerHTML

修改或获取元素的 HTML 内容。

1
2
3
let element = document.getElementById("myElement");
element.innerHTML = "Hello, world!"; // 设置 HTML 内容
let content = element.innerHTML; // 获取 HTML 内容

innerText

修改或获取元素的文本内容（会忽略 HTML 标签）。

1
2
3
let element = document.getElementById("myElement");
element.innerText = "Hello, world!"; // 设置文本内容
let text = element.innerText; // 获取文本内容

textContent

与 innerText 类似，但不考虑样式和 HTML 标签的影响。

1
2
3
let element = document.getElementById("myElement");
element.textContent = "Hello, world!"; // 设置文本内容
let text = element.textContent; // 获取文本内容

3️⃣ 修改 DOM 元素属性

setAttribute()

设置元素的属性。

1
2
let element = document.getElementById("myElement");
element.setAttribute("src", "image.jpg"); // 设置 img 元素的 src 属性

getAttribute()

获取元素的属性。

1
2
let element = document.getElementById("myElement");
let src = element.getAttribute("src"); // 获取 src 属性

removeAttribute()

删除元素的属性。

1
2
let element = document.getElementById("myElement");
element.removeAttribute("src"); // 删除 src 属性

classList.add(), classList.remove(), classList.toggle()

操作元素的类名。

1
2
3
4
let element = document.getElementById("myElement");
element.classList.add("active"); // 添加 class
element.classList.remove("active"); // 移除 class
element.classList.toggle("active"); // 如果有则移除，如果没有则添加 class

style（内联样式）

设置或获取元素的内联样式。

1
2
3
let element = document.getElementById("myElement");
element.style.color = "red"; // 设置颜色为红色
let color = element.style.color; // 获取颜色值

4️⃣ 创建和插入新的 DOM 元素

createElement()

创建一个新的 HTML 元素。

1
2
let newDiv = document.createElement("div");
newDiv.innerText = "Hello, World!";

appendChild()

将一个新元素添加到父元素的子元素列表末尾。

1
2
3
4
let parent = document.getElementById("parent");
let newDiv = document.createElement("div");
newDiv.innerText = "New child element";
parent.appendChild(newDiv); // 将新元素添加到 parent 元素下

insertBefore()

将一个新元素插入到另一个元素之前。

1
2
3
4
let parent = document.getElementById("parent");
let newDiv = document.createElement("div");
let referenceNode = document.getElementById("reference");
parent.insertBefore(newDiv, referenceNode); // 将 newDiv 插入到 referenceNode 前

insertAdjacentHTML()

将 HTML 插入到指定的位置。

1
2
let element = document.getElementById("myElement");
element.insertAdjacentHTML("beforeend", "<p>New paragraph</p>"); // 在元素末尾插入新段落

5️⃣ 删除 DOM 元素

removeChild()

删除指定的子元素。

1
2
3
let parent = document.getElementById("parent");
let child = document.getElementById("child");
parent.removeChild(child); // 从 parent 元素中删除 child 元素

remove()

直接删除元素本身。

1
2
let element = document.getElementById("myElement");
element.remove(); // 删除当前元素

6️⃣ 事件操作

addEventListener()

为元素添加事件监听器。

1
2
3
4
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Button clicked!");
});

removeEventListener()

移除事件监听器。

1
2
3
4
5
6
let button = document.getElementById("myButton");
function handleClick() {
    alert("Button clicked!");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

dispatchEvent()

触发一个自定义事件。

1
2
3
let event = new Event("myEvent");
let element = document.getElementById("myElement");
element.dispatchEvent(event); // 触发自定义事件

7️⃣ 滚动和视图相关操作

scrollTop

获取或设置元素的垂直滚动位置。

1
2
3
let element = document.getElementById("myElement");
let scrollPos = element.scrollTop; // 获取滚动位置
element.scrollTop = 100; // 设置滚动位置为 100px

scrollIntoView()

使元素滚动到视口中可见的位置。

1
2
let element = document.getElementById("myElement");
element.scrollIntoView(); // 滚动到该元素的位置

8️⃣ 获取元素尺寸与位置

getBoundingClientRect()

返回元素的大小和位置（相对于视口）。

1
2
3
let element = document.getElementById("myElement");
let rect = element.getBoundingClientRect();
console.log(rect.top, rect.left, rect.width, rect.height);

clientWidth 和 clientHeight

获取元素的可视区域的宽度和高度（不包括滚动条）。

1
2
3
let element = document.getElementById("myElement");
let width = element.clientWidth;
let height = element.clientHeight;

9️⃣ 文档相关操作

document.createElement()

创建一个新的 DOM 元素。

1
2
3
let newElement = document.createElement("div");
newElement.innerText = "Hello!";
document.body.appendChild(newElement);

document.querySelector()

选择文档中第一个匹配的元素。

1
let element = document.querySelector(".myClass");

document.querySelectorAll()

选择文档中所有匹配的元素，返回一个 NodeList。

1
let elements = document.querySelectorAll(".myClass");

0️⃣ 动画与过渡

requestAnimationFrame()

调用一个函数来执行动画，通常用于创建平滑的动画效果。

1
2
3
4
5
function animate() {
    // 动画逻辑
    requestAnimationFrame(animate); // 继续执行下一个动画帧
}
requestAnimationFrame(animate);

总结

这些 DOM 操作可以帮助你动态地操作页面内容和结构，增加页面的交互性。常见操作包括选择元素、修改元素的属性或内容、添加或删除子元素、处理事件、获取元素位置、创建动画效果等。

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。 也欢迎您共享此博客，以便更多人可以参与。 如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。 谢谢 ！

特色标签
javascript
链友
ESC