前端JS 获取DOM元素的n种方法

目录

getElementById()

getElementsByClassName()

getElementsByTagName()

getElementsByName()

querySelector()

querySelectorAll()

childNodes children

firstChild lastChild

firstElementChild lastElementChild

parentNode parentElement

previousSibling nextSibling

previousElementSibling nextElementSibling

closest()

matches()

contains()

---

getElementById()

根据元素的 id 属性值查找单个元素。

const element = document.getElementById('elementId');

getElementsByClassName()

根据元素的 class 属性值查找元素，返回 HTMLCollection（实时更新的集合）。

const elements = document.getElementsByClassName('className');

getElementsByTagName()

根据元素的标签名查找元素，返回 HTMLCollection。

const elements = document.getElementsByTagName('div');

getElementsByName()

根据元素的 name 属性值查找元素，返回 NodeList。

const elements = document.getElementsByName('elementName');

querySelector()

根据 CSS 选择器查找第一个匹配的元素，返回单个元素。

const element = document.querySelector('.className'); 
// 通过类名选择
 const element = document.querySelector('#elementId'); 
// 通过ID选择 
const element = document.querySelector('div > p');
 // 通过组合选择器

querySelectorAll()

根据 CSS 选择器查找所有匹配的元素，返回 NodeList（静态集合）。

const elements = document.querySelectorAll('.className'); 
const elements = document.querySelectorAll('div > p');

childNodes children

childNodes返回指定元素的所有子节点，包括文本节点和元素节点，返回 NodeList（实时更新的集合）。

children返回指定元素的所有子元素节点，不包括文本节点或注释节点，返回 HTMLCollection（实时更新的集合）

const parent = document.getElementById('parent');
const childNodes = parent.childNodes;
​const children = parent.children;

firstChild lastChild

分别返回指定元素的第一个/最后一个子节点。

const firstChild = parent.firstChild;
const lastChild = parent.lastChild;

firstElementChild lastElementChild

返回指定元素的第一个/最后一个子元素节点，不包括文本节点或注释节点。

const firstElementChild = parent.firstElementChild;
const lastElementChild  = parent.lastElementChild;

parentNode parentElement

返回当前节点的父节点/父元素节点。

const parentNode = element.parentNode;
const parentElement = element.parentElement;

previousSibling nextSibling

返回当前节点的前一个/下一个兄弟节点（包括文本节点和注释节点）。

const previousSibling = element.previousSibling;

const nextSibling = element.nextSibling;

previousElementSibling nextElementSibling

返回当前节点的前一个/下一个元素兄弟节点，不包括文本节点或注释节点。

const previousElementSibling = element.previousElementSibling;
const nextElementSibling = element.nextElementSibling;

closest()

从当前元素开始向上查找，返回与指定选择器匹配的第一个祖先元素。

const closestElement = element.closest('.parentClass');

matches()

检查当前元素是否匹配指定的 CSS 选择器，返回 True 或者  False

const isMatch = element.matches('.className');

contains()

检查当前元素是否包含指定的子元素,返回 True 或者  False

const containsChild = parent.contains(childElement);