管理员登陆

停止 继续 暂停 收听本文

html-dom获取元素笔记

💠获取元素的方式

# 非常规方式

在 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、标签选择器:可以使用标签名称来选择元素,例如:
(1)、document.querySelector('div'):选择第一个 <div> 元素。
(2)、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 属性修改其内容。
以上是常用的获取元素的方式,根据具体的需求选择合适的方法来获取元素。
文章来自:https://xtbbb.com/default/11.html

信息科技 2024-02-13 02:34:12 通过 网页 浏览(89) 打印

下一篇

共有0条评论!

发表评论