简述列举文档对象模型DOM里document的常用的查找访 ？
参考回答
在DOM（文档对象模型）中，document 是一个非常重要的对象，它代表整个HTML或XML文档。常用的查找访问方法允许开发者通过不同的方式查找文档中的元素。以下是一些常见的 document 查找访问方法：
document.getElementById()：通过元素的ID属性查找元素。var element = document.getElementById('myElement');document.getElementsByClassName()：通过元素的类名查找元素，返回一个类数组对象。var elements = document.getElementsByClassName('myClass');document.getElementsByTagName()：通过元素的标签名查找元素，返回一个类数组对象。var elements = document.getElementsByTagName('div');document.querySelector()：返回文档中匹配指定CSS选择器的第一个元素。var element = document.querySelector('.myClass');document.querySelectorAll()：返回文档中所有匹配指定CSS选择器的元素，返回一个NodeList对象。var elements = document.querySelectorAll('div.myClass');document.getElementsByName()：通过元素的name属性查找元素，返回一个类数组对象。var elements = document.getElementsByName('myName');
详细讲解与拓展
1. document.getElementById()
- 功能：根据指定的ID查找一个元素。由于ID是唯一的，所以返回的结果是单个元素对象。
- 返回值：返回与ID匹配的元素，若未找到则返回
null。 - 示例：
var header = document.getElementById('header');
2. document.getElementsByClassName()
- 功能：根据类名查找元素，返回一个类数组对象，这个对象可以通过索引来访问各个元素。
- 返回值：一个类数组对象（
HTMLCollection），即使只有一个元素，也返回一个类似数组的对象。 - 示例：
var items = document.getElementsByClassName('item'); console.log(items[0]); // 访问第一个匹配的元素
3. document.getElementsByTagName()
- 功能：根据标签名查找元素，返回一个类数组对象。
- 返回值：一个类数组对象（
HTMLCollection），包含所有匹配的元素。 - 示例：
var divs = document.getElementsByTagName('div'); console.log(divs.length); // 输出所有 div 元素的数量
4. document.querySelector()
- 功能：返回文档中匹配指定CSS选择器的第一个元素。支持复杂的CSS选择器。
- 返回值：返回第一个匹配的元素，若未找到则返回
null。 - 示例：
var firstDiv = document.querySelector('div.myClass');
5. document.querySelectorAll()
- 功能：返回文档中所有匹配指定CSS选择器的元素。与
querySelector的区别在于，它返回所有匹配的元素，而不是第一个。 - 返回值：一个
NodeList对象，可以像数组一样通过索引访问元素。 - 示例：
var divs = document.querySelectorAll('div.myClass'); console.log(divs.length); // 输出所有匹配的 div 数量
6. document.getElementsByName()
- 功能：根据元素的
name属性查找元素。常用于查找表单元素（如<input>和<select>）。 - 返回值：一个类数组对象（
NodeList），包含所有匹配的元素。 - 示例：
var inputs = document.getElementsByName('username'); console.log(inputs[0].value); // 访问第一个具有name="username"的元素的值
总结：
- 以上方法都用于在文档中查找元素，但它们的返回类型和使用场景有所不同。
getElementById()用于根据唯一的ID查找，getElementsByClassName()和getElementsByTagName()用于根据类名和标签名查找多个元素，querySelector()和querySelectorAll()提供了更灵活的选择器功能，可以使用CSS选择器来查找元素，getElementsByName()则适用于根据name属性查找表单元素。