获取元素的方式

非常规方式

在 HTML 中,有三个特殊的元素:<html><head><body>。可以使用以下方式直接获取它们:

document.documentElement; // 获取<html>元素
document.head; // 获取<head>元素
document.body; // 获取<body>元素
console.log(document.documentElement);
console.log(document.head);
console.log(document.body);

通过上述方式可以直接获取到这些特殊元素。

常规方式

对于一般的元素,无法直接获取到,但可以使用以下方法:

  • 通过 id 属性获取元素:document.getElementById('id')
  • 通过 name 属性获取元素:document.getElementsByName('name')
  • 通过 class 属性获取元素:document.getElementsByClassName('class')
  • 通过标签名获取元素:document.getElementsByTagName('div')

以此类推,可以根据元素的属性来获取相应的元素。

特殊方式

还可以使用 querySelector()querySelectorAll() 方法通过选择器获取元素:

  1. 标签选择器:可以使用标签名称来选择元素,例如:

    • document.querySelector('div'):选择第一个 <div> 元素。
    • document.querySelector('p'):选择第一个 <p> 元素。
  2. 类选择器:可以使用类名来选择具有特定类的元素,类名以.开头,例如:

    • document.querySelector('.my-class'):选择具有 my-class 类的第一个元素。
  3. ID选择器:可以使用元素的ID来选择元素,ID以#开头,例如:

    • document.querySelector('#my-id'):选择具有 my-id ID的元素。
  4. 属性选择器:可以使用元素的属性来选择元素,例如:

    • document.querySelector('[name="my-name"]'):选择具有 name 属性值为 my-name 的元素。
  5. 后代选择器:可以选择某个元素的后代元素,例如:

    • document.querySelector('div p'):选择第一个 <div> 元素内的第一个 <p> 元素。
  6. 伪类选择器:可以选择元素的特定状态或位置,例如:

    • document.querySelector('a:hover'):选择第一个被鼠标悬停的 <a> 元素。

当然这只是例子,使用选择器时,可以使用 CSS 选择器的语法来指定元素。

伪数组

当使用以下方法获取一组元素时,它们会返回一个类似数组的对象(伪数组):

  1. document.querySelectorAll():通过选择器获取一组元素。
  2. document.getElementsByClassName():通过类名获取一组元素。
  3. document.getElementsByTagName():通过标签名获取一组元素。

这些方法返回的伪数组对象(NodeList)具有类似数组的特性,但不是真正的数组。它们通常具有 length 属性和可以通过索引访问元素的能力,但不具备数组的方法(例如 forEach()map() 等)。

如果你需要在伪数组上使用数组方法,可以使用以下方法将其转换为真正的数组:

  • Array.from():将伪数组转换为真正的数组。
  • Array.prototype.slice.call():使用 call() 方法将伪数组转换为真正的数组。

以下是示例,展示了如何使用这些方法:

// 使用 document.querySelectorAll() 获取一组元素
var elements = document.querySelectorAll('.example');
// 使用 document.getElementsByClassName() 获取一组元素
var elements = document.getElementsByClassName('example'); 
// 使用 document.getElementsByTagName() 获取一组元素
var elements = document.getElementsByTagName('div');

使用常规方法循环输出元素
伪数组可以使用length属性获取长度

for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  console.log(element);
}

将伪数组转换为真正的数组的方法

// 使用 Array.from() 方法将伪数组转换为真正的数组
var arrayElements = Array.from(elements);

// 或者使用 Array.prototype.slice.call() 方法
var arrayElements = Array.prototype.slice.call(elements);
//forEach 方法循环输出元素
arrayElements.forEach(function(element) {
  console.log(element);
});

或者根据元素的索引

console.log(elements[0]);
console.log(elements[1]);
console.log(elements[2]);

一些小例子

准备html结构

<div class="example">
<ul>  
    <li>列表项1</li>
    <li>列表项2</li> 
    <li>列表项3</li>
</ul>
</div>

获取元素
修改列表的第一项
方法一:使用 querySelector() 方法

var firstItem = document.querySelector('.example li:first-child');
firstItem.innerHTML = '修改后的列表项1';

在这个方法中,我们使用 querySelector() 方法选择具有类名为 'example' 的父级容器元素,并使用 CSS 选择器 li:first-child 选择第一个列表项元素。然后,我们使用 innerHTML 属性修改列表项的内容。

方法二:使用 getElementsByClassName() 方法和索引

var parentElement = document.getElementsByClassName('example')[0];
var items = parentElement.getElementsByTagName('li');
items[0].innerHTML = '修改后的列表项1';

这个方法与之前提供的代码示例相同,首先通过 getElementsByClassName 方法获取父级容器元素,然后使用 getElementsByTagName 方法获取一组列表项元素,并通过索引 [0] 选择第一个列表项元素,最后使用 innerHTML 属性修改列表项的内容。

方法三:使用 querySelectorAll() 方法和索引

var items = document.querySelectorAll('.example li');
items[0].innerHTML = '修改后的列表项1';

在这个方法中,我们使用 querySelectorAll() 方法选择具有类名为 'example' 的父级容器元素下的所有列表项元素。然后,我们通过索引 [0] 选择第一个列表项元素,并使用 innerHTML 属性修改其内容。

以上是常用的获取元素的方式,根据具体的需求选择合适的方法来获取元素。