htmldom获取元素笔记。获取元素的方式 非常规方式在 HTML 中，有三个特殊的元素lthtmlgt，ltheadgt和ltbodygt可以使用以下方式直接获取它们documentdocumentElement  获取lthtmlgt元素documenthead  获取ltheadgt元素documentbody  获取ltbodygt元素consolelogdocumentdocumentElementconsolelogdocumentheadconsolelogdocumentbody通过上述方式可以直接获取到这些特殊元素。 常规方式对于一般的元素，无法直接获取到，但可以使用以下方法通过 id 属性获取元素documentgetElementByIdid通过 name 属性获取元素documentgetElementsByNamename通过 class 属性获取元素documentgetElementsByClassNameclass通过标签名获取元素documentgetElementsByTagNamediv以此类推，可以根据元素的属性来获取相应的元素。 特殊方式还可以使用 querySelector 和 querySelectorAll 方法通过选择器获取元素1，标签选择器可以使用标签名称来选择元素，例如1，documentquerySelectordiv选择第一个 ltdivgt 元素。2，documentquerySelectorp选择第一个 ltpgt 元素。2，类选择器可以使用类名来选择具有特定类的元素，类名以  开头，例如documentquerySelectormyclass选择具有 myclass 类的第一个元素。3，ID选择器可以使用元素的ID来选择元素，ID以  开头，例如documentquerySelectormyid选择具有  myid ID的元素。4，属性选择器可以使用元素的属性来选择元素，例如documentquerySelectornamemyname选择具有 name 属性值为 myname 的元素。5，后代选择器可以选择某个元素的后代元素，例如documentquerySelectordiv p选择第一个 ltdivgt 元素内的第一个 ltpgt 元素。6，伪类选择器可以选择元素的特定状态或位置，例如documentquerySelectorahover选择第一个被鼠标悬停的 ltagt 元素。当然这只是例子,使用选择器时，可以使用 CSS 选择器的语法来指定元素。伪数组当使用以下方法获取一组元素时，它们会返回一个类似数组的对象伪数组1，documentquerySelectorAll通过选择器获取一组元素。2，documentgetElementsByClassName通过类名获取一组元素。3，documentgetElementsByTagName通过标签名获取一组元素。这些方法返回的伪数组对象NodeList具有类似数组的特性，但不是真正的数组。它们通常具有 length 属性和可以通过索引访问元素的能力，但不具备数组的方法例如 forEach，map 等。如果你需要在伪数组上使用数组方法，可以使用以下方法将其转换为真正的数组Arrayfrom 将伪数组转换为真正的数组。Arrayprototypeslicecall 使用 call  方法将伪数组转换为真正的数组。以下是示例，展示了如何使用这些方法 使用 documentquerySelectorAll 获取一组元素var elements  documentquerySelectorAllexample 使用 documentgetElementsByClassName 获取一组元素var elements  documentgetElementsByClassNameexample  使用 documentgetElementsByTagName 获取一组元素var elements  documentgetElementsByTagNamediv使用常规方法循环输出元素伪数组可以使用length 属性获取长度for var i  0 i lt elementslength i   var element  elementsi  consolelogelement将伪数组转换为真正的数组的方法 使用 Arrayfrom 方法将伪数组转换为真正的数组var arrayElements  Arrayfromelements 或者使用 Arrayprototypeslicecall 方法var arrayElements  ArrayprototypeslicecallelementsforEach 方法循环输出元素arrayElementsforEachfunctionelement   consolelogelement或者根据元素的索引consolelogelements0consolelogelements1consolelogelements2一些小例子准备html结构ltdiv classexamplegtltulgt      ltligt列表项1ltligt    ltligt列表项2ltligt     ltligt列表项3ltligtltulgtltdivgt获取元素修改列表的第一项方法一使用 querySelector  方法var firstItem  documentquerySelectorexample lifirstchildfirstIteminnerHTML  修改后的列表项1在这个方法中，我们使用 querySelector   方法选择具有类名为 example 的父级容器元素，并使用 CSS 选择器 lifirstchild 选择第一个列表项元素。然后，我们使用 innerHTML 属性修改列表项的内容。方法二使用 getElementsByClassName 方法和索引var parentElement  documentgetElementsByClassNameexample0var items  parentElementgetElementsByTagNameliitems0innerHTML  修改后的列表项1这个方法与之前提供的代码示例相同，首先通过 getElementsByClassName 方法获取父级容器元素，然后使用 getElementsByTagName 方法获取一组列表项元素，并通过索引 0 选择第一个列表项元素，最后使用 innerHTML 属性修改列表项的内容。方法三使用 querySelectorAll 方法和索引var items  documentquerySelectorAllexample liitems0innerHTML  修改后的列表项1在这个方法中，我们使用 querySelectorAll 方法选择具有类名为 example 的父级容器元素下的所有列表项元素。然后，我们通过索引 0 选择第一个列表项元素，并使用 innerHTML 属性修改其内容。以上是常用的获取元素的方式，根据具体的需求选择合适的方法来获取元素。文章来自httpsxtbbbcomdefault11html

停止继续暂停收听本文

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 通过网页浏览(444) 打印

返回我要评论

Fancybox v5 使用体验

下一篇文章

搜索内容

老林笔记

html-dom获取元素笔记

💠获取元素的方式

# 非常规方式

# 常规方式

# 特殊方式

💠伪数组

💠一些小例子

共有0条评论！

发表评论

管理员登陆

搜索内容

老林笔记

html-dom获取元素笔记

💠获取元素的方式

# 非常规方式

# 常规方式

# 特殊方式

💠伪数组

💠一些小例子

共有0条评论！

发表评论