量角器获取活动元素 - JavaScript

在编写 JavaScript 程序时，有时我们需要动态地获取页面上的活动元素。这个过程可以通过使用量角器（也称为选择器）来实现。量角器是用于在文档中选择指定元素的工具。

创建量角器对象

在 JavaScript 中，可以使用 querySelector 来创建量角器对象。querySelector 方法接受一个 CSS 选择器作为参数，并返回匹配该选择器的第一个元素。

const element = document.querySelector('css选择器');

获取标签元素

要获取一个特定的标签元素，可以使用该标签的名称作为选择器。

const title = document.querySelector('h1');

此代码将返回文档中的第一个 <h1> 元素。

获取元素的类

如果要获取具有特定类的元素，可以使用 . 加类名作为选择器。

const section = document.querySelector('.section');

此代码将返回文档中具有 section 类的第一个元素。

获取元素的ID

要获取具有特定ID的元素，可以使用 # 加ID名称作为选择器。

const main = document.querySelector('#main');

此代码将返回具有 main ID 的元素。

获取多个元素

如果要获取匹配选择器的所有元素，可以使用 querySelectorAll 方法。

const paragraphs = document.querySelectorAll('p');

此代码将返回文档中的所有 <p> 元素，并将其存储在一个数组中。

获取父元素

要获取一个元素的父元素，可以使用 parentElement 属性。

const parent = element.parentElement;

此代码将返回 element 元素的父元素。

获取子元素

要获取一个元素的所有子元素，可以使用 children 属性。

const children = element.children;

此代码将返回 element 元素的子元素的一个数组。

获取下一个兄弟元素

要获取一个元素的下一个兄弟元素，可以使用 nextSibling 属性。

const nextSibling = element.nextSibling;

此代码将返回 element 元素的下一个兄弟元素。

获取前一个兄弟元素

要获取一个元素的前一个兄弟元素，可以使用 previousSibling 属性。

const previousSibling = element.previousSibling;

此代码将返回 element 元素的前一个兄弟元素。

以上是使用量角器在 JavaScript 中获取活动元素的一些示例。通过灵活运用这些技巧，你可以轻松地操作页面上的元素和改变它们的样式、内容等。