BOM操作querySelector querySeletorAll获取标签对象

下面是“BOM操作querySelector querySeletorAll获取标签对象”的完整攻略：

下面是“BOM操作querySelector querySeletorAll获取标签对象”的完整攻略：

什么是BOM

BOM（Browser Object Model）是浏览器对象模型，主要针对浏览器窗口和框架（frameset）进行编程。BOM由许多对象组成，包括Window、Navigator、Screen、History、Location、Document等。

使用querySelector获取标签对象

querySelector是一种常用的基于CSS选择器的DOM操作方法，可以用于获取单个HTML元素的标签对象。

// 获取id为example的元素
var example = document.querySelector('#example');

上述代码中，我们用querySelector方法根据CSS选择器匹配了ID为example的元素，并将其赋值给变量example。

使用querySelectorAll获取标签对象集合

querySelectorAll和querySelector的差别在于，querySelectorAll可以匹配多个符合要求的HTML元素，它会返回一个可以操作的NodeList对象。

// 获取类名为example的元素集合
var examples = document.querySelectorAll('.example');

上述代码中，我们用querySelectorAll方法根据CSS选择器匹配了类名为example的所有元素，并将它们保存到名为examples的NodeList对象中。

注意事项

• querySelector和querySelectorAll方法只有在支持CSS选择器的浏览器中才可用。
• 在使用querySelector和querySelectorAll时，CSS选择器的写法应该考虑兼容性问题，在尽量不影响语义的前提下，保持语法简洁易懂。

除了querySelector和querySelectorAll，还有getElementById、getElementsByClassName、getElementsByTagName等方法可以用于获取HTML元素的标签对象，但它们的使用场景更加特定。