JavaScript获取页面上某个元素的代码

获取页面上某个元素的代码是 JavaScript 中基础的应用之一，下面是详细讲解。

一、获取元素的方法

在 JavaScript 中，获取元素的方法有很多种，其中比较常用的方法包括：

1. document.getElementById()

该方法可以获取页面中 ID 属性为指定值的元素。使用方式如下：

var element = document.getElementById("elementId");

其中，elementId 为元素的 ID 属性值，获取到的 elenment 为获取到的元素对象。

2. document.querySelector()

该方法可以获取符合指定 CSS 选择器的第一个元素。使用方式如下：

var element = document.querySelector("selector");

其中，selector 为需要获取的 CSS 选择器，比如 "#test"、".item" 等，获取到的 element 为获取到的元素对象。

3. document.querySelectorAll()

该方法可以获取符合指定 CSS 选择器的所有元素。使用方式如下：

var elementList = document.querySelectorAll("selector");

其中，selector 为需要获取的 CSS 选择器，比如 "#test"、".item" 等，获取到的 elementList 为获取到的元素对象列表。

二、示例说明

下面分别通过两个示例来说明如何使用上述方法获取页面中的元素。

示例一：获取某个 div 元素

<div id="test">Hello World</div>

在上述代码中，我们定义了一个 ID 为 "test" 的 div 元素。现在需要使用 JavaScript 获取到该元素并修改其内容。可以使用 document.getElementById() 方法来获取该元素，具体代码如下：

var divElement = document.getElementById("test");
divElement.innerHTML = "New Content";

上述代码中，我们首先通过 document.getElementById() 方法获取到 ID 为 "test" 的元素对象，再通过该对象的 innerHTML 属性修改元素内容。

示例二：获取某类元素集合

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

在上述代码中，我们定义了一个包含多个 class 为 "item" 的 li 元素的 ul 列表。现在需要使用 JavaScript 获取到该元素集合并对其中的元素进行操作。可以使用 document.querySelectorAll() 方法来获取该元素集合，具体代码如下：

var itemList = document.querySelectorAll(".item");
for (var i = 0; i < itemList.length; i++) {
  itemList[i].innerHTML = "New Content " + (i+1);
}

上述代码中，我们通过 document.querySelectorAll() 方法获取到所有 class 为 "item" 的元素对象，然后使用 for 循环依次遍历元素对象，再通过 innerHTML 属性修改元素内容。