前端面试题-DOM常见的操作有哪些?（2024.1.30）

前面总体支架嫌麻烦的直接到最后

文章目录

• 前言
• 一、Dom是什么？
• 二、Dom组成
  • 1.文档对象
  • 2.节点对象
  • 3.元素对象
• 三、常见的dom操作
• 四、总结

---

前言

常见的 DOM 操作主要用于与页面交互，通过 JavaScript 可以实现动态地改变页面结构、内容和样式，通过 DOM 可以访问、操作文档的结构、样式和内容。

---

一、Dom是什么？

DOM 是文档对象模型（Document Object Model）的缩写。

二、组成

1.文档对象

表示整个文档，是 DOM 树的根节点

2.节点对象

表示文档中的元素，可以是标签、属性、文本等

3.元素对象

表示文档中的所有节点，包括元素节点、文本节点、注释节点等

---

三、常见的dom操作

1.查询元素

getElementById(id): 通过元素的 ID 获取元素。
getElementsByClassName(className): 通过类名获取元素。
getElementsByTagName(tagName): 通过标签名获取元素。
querySelector(selector): 通过 CSS 选择器获取第一个匹配的元素。
querySelectorAll(selector): 通过 CSS 选择器获取所有匹配的元素。

2.操作元素属性

getAttribute(attribute): 获取元素的属性值。
setAttribute(attribute, value): 设置元素的属性值。
removeAttribute(attribute): 移除元素的属性。

3. 修改元素内容

innerHTML: 获取或设置元素的 HTML 内容。
innerText 或 textContent: 获取或设置元素的文本内容。
createTextNode(text): 创建文本节点。

4.修改元素样式

style.property: 直接设置或获取元素的样式属性。
classList: 操作元素的类名，如 classList.add('className')
classList.remove('className')。

5.操作元素结构

appendChild(node): 将节点追加到元素的子节点列表的末尾。
removeChild(node): 从元素的子节点列表中移除指定的子节点。
cloneNode(deep): 复制节点。

 6.事件操作

addEventListener(event, handler): 给元素添加事件监听器。
removeEventListener(event, handler): 移除元素的事件监听器。
event.preventDefault(): 阻止事件的默认行为。

7.遍历和查找

parentNode: 获取父节点。
childNodes: 获取所有子节点。
nextSibling 和 previousSibling: 获取相邻的下一个或上一个节点。
firstChild 和 lastChild: 获取第一个和最后一个子节点

 8.动态创建元素

createElement(tagName): 创建一个元素节点。
createDocumentFragment(): 创建一个文档片段，用于高效操作大量节点。

四、总结（直接背的）

1. DOM基本操作：

   • 获取元素：document.getElementById、document.getElementsByClassName、document.getElementsByTagName、document.querySelector、document.querySelectorAll等方法。
   • 创建元素：document.createElement。
   • 插入元素：parentNode.appendChild、parentNode.insertBefore等方法。
   • 删除元素：parentNode.removeChild、element.remove等方法。
   • 替换元素：parentNode.replaceChild。

2. 属性和内容操作：

   • 获取和设置元素属性：element.getAttribute、element.setAttribute。
   • 获取和设置元素内容：element.innerHTML、element.innerText、element.textContent。
   • 操作元素样式：element.style。
   • 获取和设置元素值：对于表单元素，使用 element.value。

3. 遍历和查找：

   • 遍历子节点：parentNode.childNodes、parentNode.children。
   • 查找父节点、子节点：element.parentNode、element.childNodes、element.children。
   • 查找相邻节点：element.previousSibling、element.nextSibling。
   • 查找兄弟节点：element.previousElementSibling、element.nextElementSibling。

4. 事件处理：

   • 添加事件监听器：element.addEventListener。
   • 移除事件监听器：element.removeEventListener。
   • 触发事件：element.dispatchEvent。

5. 样式操作：

   • 获取和设置元素样式：window.getComputedStyle、element.style。
   • 操作类名：element.classList.add、element.classList.remove、element.classList.toggle。

6. 其他：

   • 滚动操作：element.scrollTop、element.scrollLeft。
   • 尺寸和位置：element.offsetWidth、element.offsetHeight、element.getBoundingClientRect。