DEV Community
·
初学者的DOM速查表
内容提要
文章介绍了在JavaScript中操作DOM元素的方法，包括通过ID、类名、标签名和选择器选择元素，创建和插入新元素，修改文本、HTML、样式和属性，移除元素，以及添加和移除事件监听器。还讲解了如何遍历DOM节点，如获取父节点、子节点、首尾子节点及兄弟节点。
关键要点
-
通过ID选择元素：const element = document.getElementById('myId');
-
通过类名选择元素：const elements = document.getElementsByClassName('myClass');
-
通过标签名选择元素：const elements = document.getElementsByTagName('div');
-
使用查询选择器选择元素：const element = document.querySelector('.myClass');
-
使用查询选择器选择所有元素：const elements = document.querySelectorAll('.myClass');
-
创建新元素：const newElement = document.createElement('div');
-
向新元素添加文本：newElement.textContent = 'Hello, World!';
-
将新元素插入DOM：document.body.appendChild(newElement);
-
在特定元素之前插入新元素：document.body.insertBefore(newElement, referenceElement);
-
修改元素文本：element.textContent = 'New Text';
-
修改元素HTML：element.innerHTML = '<strong>New HTML Content</strong>';
-
修改元素样式：element.style.color = 'red';
-
修改元素属性：element.setAttribute('href', 'https://example.com');
-
移除元素：elementToRemove.parentNode.removeChild(elementToRemove);
-
添加事件监听器：element.addEventListener('click', function() { alert('Element clicked!'); });
-
移除事件监听器：element.removeEventListener('click', handleClick);
-
获取父节点：const parent = element.parentNode;
-
获取子节点：const children = element.childNodes;
-
获取第一个子节点：const firstChild = element.firstChild;
-
获取最后一个子节点：const lastChild = element.lastChild;
-
获取下一个兄弟节点：const nextSibling = element.nextSibling;
-
获取上一个兄弟节点：const previousSibling = element.previousSibling;
延伸解读
DOM选择器的使用场景
在JavaScript中，选择DOM元素的方法多种多样。通过ID选择元素适合唯一标识的情况，而类名和标签名选择则适用于多个元素的操作。使用querySelector和querySelectorAll可以更灵活地选择元素，尤其是在复杂的DOM结构中。了解这些选择器的适用场景，有助于提高代码的效率和可读性。
动态创建和修改元素的技巧
动态创建和插入DOM元素是构建交互式网页的关键。使用createElement方法可以创建新的元素，而appendChild和insertBefore方法则可以灵活地将其插入到指定位置。修改元素的文本、HTML和样式时，注意使用textContent和innerHTML的区别，以避免潜在的安全问题。
事件处理的重要性
事件监听器是实现用户交互的核心。通过addEventListener方法，可以为元素添加多种事件响应。需要注意的是，移除事件监听器时，必须确保使用相同的函数引用，这样才能正确移除。掌握事件处理的技巧，可以提升用户体验和页面的响应速度。
延伸问答
如何通过ID选择DOM元素？
使用 const element = document.getElementById('myId');
如何创建并插入一个新的DOM元素？
使用 const newElement = document.createElement('div'); 然后使用 document.body.appendChild(newElement);
如何修改一个元素的文本内容？
使用 element.textContent = 'New Text';
如何移除一个DOM元素？
使用 elementToRemove.parentNode.removeChild(elementToRemove);
如何为DOM元素添加事件监听器？
使用 element.addEventListener('click', function() { alert('Element clicked!'); });
如何获取一个元素的父节点？
使用 const parent = element.parentNode;
