querySelector()、querySelectorAll()获取元素和集合

querySelector()和querySelectorAll()都是DOM API中的方法，用于获取HTML文档中的元素或元素集合。

querySelector()方法返回匹配到的第一个元素，如果没有匹配到则返回null。它的参数是一个CSS选择器，可以是标签名、类名、ID等。

querySelectorAll()方法返回匹配到的所有元素，以NodeList对象的形式返回。它的参数也是一个CSS选择器，可以匹配多个元素。

下面是一个示例代码，演示如何使用querySelector()和querySelectorAll()方法获取元素和元素集合：

// 获取id为myDiv的元素
let myDiv = document.querySelector('#myDiv');
console.log(myDiv);

// 获取class为myClass的所有元素
let myClassElems = document.querySelectorAll('.myClass');
for (let i = 0; i < myClassElems.length; i++) {
  console.log(myClassElems[i]);
}

相关问题

document.querySelector('selector') 和 document.querySelectorAll('selector')的区别

document.querySelector('selector')和document.querySelectorAll('selector')的区别在于返回值的类型和数量。

- document.querySelector('selector')返回的是一个对象，即匹配到的第一个元素。如果没有匹配到任何元素，则返回null。

- document.querySelectorAll('selector')返回的是一个集合，即匹配的所有元素组成的NodeList。如果没有匹配到何元素，则返回一个空的NodeList。

示代码如下：

// 使用document.querySelector('selector')获取一个匹配的元素
var element = document.querySelector('.example');
console.log(element); // 输出：第一个匹配的元素

// 使用document.querySelectorAll('selector')获取所有匹配的元素
var elements = document.querySelectorAll('.example');
console.log(elements); // 输出：所有匹配的元素组成的NodeList

btn: document.querySelectorAll('.box button')和const btn=document.querySelector('.box buttin'）一样吗

btn: document.querySelectorAll('.box button') 和 const btn = document.querySelector('.box button') 是不同的。

1. btn: document.querySelectorAll('.box button') 是一个使用 CSS 选择器来获取所有 class 为 'box' 的元素下的所有 button 元素的集合。返回的是一个 NodeList 对象，可以通过索引来访问其中的元素。

2. const btn = document.querySelector('.box button') 是使用 CSS 选择器来获取 class 为 'box' 的元素下的第一个 button 元素。返回的是一个单个元素，可以直接访问该元素的属性和方法。

所以，它们的作用是不同的，前者返回多个元素的集合，后者返回单个元素。