获取div
- querySelectorAll
// 获取所有的 div 元素
const divs = document.querySelectorAll('div');
console.log(divs); // 输出 NodeList [div, div, div, ...]
- getElementByTagName
const divs = document.getElementsByTagName('div');
console.log(divs); // 输出 HTMLCollection [div, div, div, ...]
和NodeList的区别
document变化时HTMLCollection会自动更新
获取dom元素的父元素/子元素
- 访问父元素 parentElement属性
只返回元素节点
const childDiv = document.querySelector('.child');
const parentDiv = childDiv.parentElement;
console.log(parentDiv); // 输出父 div
- 访问子元素 children属性
所有子元素
const parentDiv = document.querySelector('.parent');
const childDivs = parentDiv.children;
console.log(childDivs); // 输出所有子 div
- 其他方法
parentNode 返回所有子节点,(元素节点,文本节点……
const childDiv = document.querySelector('.child');
const parentDiv = childDiv.parentElement;
console.log(parentDiv); // 获取该子 div 的父 div