JavaScirpt基础 之 JavaScript HTML DOM 节点列表 二

简介: JavaScript HTML DOM 节点列表

JavaScirpt基础 之 JavaScript HTML DOM 节点列表 二

JavaScript HTML DOM 节点列表

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

NodeList 对象类似 HTMLCollection 对象。

一些旧版本浏览器中的方法(如:getElementsByClassName())返回的是 NodeList 对象,而不是 HTMLCollection 对象。

所有浏览器的 childNodes 属性返回的是 NodeList 对象。

大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

NodeList 对象 length 属性

NodeList 对象 length 属性定义了节点列表中元素的数量。

举例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> length 属性</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p> length 属性</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "文档包含 " + myNodelist.length + " 个段落。";
</script>

</body>
</html>

结果

JavaScript HTML DOM!
Hello World!

length 属性

文档包含 3 个段落。
目录
相关文章
|
11天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
16天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
38 1
|
6天前
|
XML JavaScript 数据格式
XML DOM 节点列表
`getElementsByTagName()` 和 `childNodes` 返回 XML DOM 中的节点列表,表现为按顺序排列的节点集合。节点通过 0 开始的索引访问。例如,以下代码加载 &quot;books.xml&quot;,获取所有 `&lt;title&gt;` 元素的节点列表,然后提取第一个 `&lt;title&gt;` 的文本内容:`xmlDoc.getElementsByTagName(&quot;title&quot;)[0].childNodes[0].nodeValue`,结果为 &quot;Everyday Italian&quot;。
|
10天前
|
XML 存储 JavaScript
DOM 节点列表(Node List)
XML DOM允许访问XML文档的每个节点,提供三种访问方法:getElementsByTagName()、循环遍历和导航节点关系。getElementsByTagName()返回一个节点列表,类似于数组,可用于获取特定标签名的节点。例如,加载&quot;books.xml&quot;后,`xmlDoc.getElementsByTagName(&quot;title&quot;)`会获取所有&lt;title&gt;元素,存储在变量x中。通过索引如x[2]可访问第三个&lt;title&gt;元素,注意索引从0开始。后续章节将进一步探讨节点列表(Node List)。
|
1天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
1天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,允许遍历和处理节点。例如,加载&quot;books.xml&quot;到`xmlDoc`,通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点,然后使用循环输出每个&lt;title&gt;元素的文本内容。
|
5天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
这段内容介绍了DOM中的`attributes`属性,它返回元素节点的属性节点列表,形成一个命名节点图。这个列表自动更新,当属性增删时反映变化。示例代码展示了如何加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,然后使用`getNamedItem()`方法获取&quot;category&quot;属性的值并显示属性数量。输出为&quot;cooking&quot;和&quot;1&quot;。
|
5天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
11 0
|
9天前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,例如在XML文档中,通过`getElementsByTagName()`获取的所有`&lt;title&gt;`元素的数量。可以遍历这个列表,如示例所示,使用`for`循环访问并输出每个节点的文本值。在提供的实例中,代码加载&quot;books.xml&quot;,然后获取并打印所有&lt;title&gt;元素的子节点值。
|
9天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?