DEV Community
·
初学者的DOM速查表
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
文章介绍了在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;
🏷️
标签
➡️
