前端 JavaScript 基础面试题, 常见的 DOM 操作有哪些?
前端 JavaScript 基础面试题, 常见的 DOM 操作有哪些?
QA
Step 1
Q:: 常见的 DOM 操作有哪些？
A:: 常见的 DOM 操作包括：获取元素、创建元素、删除元素、修改元素属性、修改元素内容、添加事件监听器等。例如，通过 document.getElementById 获取元素，通过 document.createElement 创建新元素，通过 element.setAttribute 修改元素属性，通过 element.innerHTML 修改元素内容，通过 element.addEventListener 添加事件监听器等。
Step 2
Q:: 如何通过 JavaScript 获取 DOM 元素？
A:: 通过 JavaScript 获取 DOM 元素的方法有多种，包括：
1. getElementById(id)：通过元素的 ID 获取单个元素。
2. getElementsByClassName(className)：通过类名获取元素集合。
3. getElementsByTagName(tagName)：通过标签名获取元素集合。
4. querySelector(selector)：通过 CSS 选择器获取单个元素。
5. querySelectorAll(selector)：通过 CSS 选择器获取元素集合。
Step 3
Q:: 如何创建和添加新的 DOM 元素？
A:: 创建和添加新的 DOM 元素的步骤如下：
1. 使用 document.createElement(tagName) 创建新元素。
2. 设置元素的属性和内容，例如 element.setAttribute 和 element.innerHTML。
3. 将新元素添加到文档中，例如 parentElement.appendChild(newElement)。
Step 4
Q:: 如何删除 DOM 元素？
A:: 删除 DOM 元素的步骤如下：
1. 选择要删除的元素，例如 var element = document.getElementById('myElement')。
2. 使用 parentElement.removeChild(element) 从其父元素中移除该元素。
3. 如果不知道父元素，可以使用 element.parentNode.removeChild(element)。
Step 5
Q:: 如何修改 DOM 元素的属性和内容？
A:: 可以通过以下方法修改 DOM 元素的属性和内容：
1. 使用 element.setAttribute(attr, value) 修改属性。
2. 直接设置属性，例如 element.id = 'newId'。
3. 使用 element.innerHTML 或 element.textContent 修改元素内容。
Step 6
Q:: 如何为 DOM 元素添加事件监听器？
A:: 为 DOM 元素添加事件监听器的方法如下：
1. 使用 element.addEventListener(event, function) 方法，例如 element.addEventListener('click', function) 添加点击事件监听器。
2. 可以使用匿名函数或命名函数作为事件处理器。