【千锋前端】DOM操作-获取元素的方式

DOM操作中获取元素的方式主要包括以下几种，根据不同需求选择合适方法：

1. 获取整个HTML文档节点

   语法：document.documentElement

   示例：

   var doc = document.documentElement;console.log(doc); // 返回整个<html>标签对象

2. 获取head标签

   语法：document.head

   示例：

   var head = document.head;console.log(head); // 返回<head>标签对象

3. 获取body标签

   语法：document.body

   示例：

   var body = document.body;console.log(body); // 返回<body>标签对象

1. 通过ID获取单个元素

   方法：document.getElementById('id值')

   特点：ID唯一，返回单个DOM对象

   示例：

   <div id="box"></div><script> var box = document.getElementById('box'); console.log(box); // 返回<div id="box"></div></script>

2. 通过Class获取元素集合

   方法：document.getElementsByClassName('class值')

   特点：返回伪数组（HTMLCollection），即使只有一个元素

   示例：

   <div class="box"></div><script> var boxes = document.getElementsByClassName('box'); console.log(boxes[0]); // 通过索引0获取第一个元素</script>

3. 通过标签名获取元素集合

   方法：document.getElementsByTagName('标签名')

   特点：返回伪数组，需通过索引访问

   示例：

   <div></div><script> var divs = document.getElementsByTagName('div'); console.log(divs.length); // 输出集合长度</script>

4. 通过name属性获取元素集合

   方法：document.getElementsByName('name值')

   特点：常用于表单元素，返回伪数组

   示例：

   <input type="text" name="username"><script> var inputs = document.getElementsByName('username'); console.log(inputs[0].value); // 访问第一个元素的value属性</script>

1. 获取第一个匹配元素

   方法：document.querySelector('选择器')

   特点：支持任意CSS选择器，返回第一个匹配元素

   示例：

   console.log(document.querySelector('div')); // 第一个divconsole.log(document.querySelector('.box')); // 第一个class为box的元素console.log(document.querySelector('#box')); // id为box的元素

2. 获取所有匹配元素集合

   方法：document.querySelectorAll('选择器')

   特点：返回NodeList伪数组，需通过索引访问

   示例：

   var allDivs = document.querySelectorAll('div');allDivs.forEach(item => { console.log(item); // 遍历所有div});

• 兼容性：querySelector和querySelectorAll在IE8及以下版本不支持。
• 性能：

  ID选择器（getElementById）速度最快，适合精确查找。

  类选择器或标签选择器返回集合，需注意索引访问。

• 动态性：通过getElementsByClassName等方法获取的集合是动态的，DOM变化会自动更新集合。

总结：根据需求选择方法——唯一ID用getElementById，类或标签名用getElementsBy*系列，复杂选择用querySelector系列，非常规节点直接访问document属性。