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

简介: JavaScript HTML DOM 节点列表

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

JavaScript HTML DOM 节点列表

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

NodeList 对象类似 HTMLCollection 对象。

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

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

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

以下代码选取了文档中所有的

节点:

举例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript HTML DOM!</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>JavaScript HTML DOM!</p>

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

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myNodelist[1].innerHTML + '</span>';
</script>

</body>
</html>

结果

JavaScript HTML DOM!
Hello World!

JavaScript HTML DOM!

第二个段落的内容为: JavaScript HTML DOM!
目录
相关文章
|
12天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
4天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM提供nodeName、nodeValue和nodeType属性来揭示节点详情。一个JavaScript示例展示了如何运用这些属性:loadXMLDoc函数加载XML文件&quot;books.xml&quot;,然后通过nodeName获取根元素名,用nodeValue提取文本节点的内容。
|
7天前
|
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;。
|
9天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM 节点详解:nodeName、nodeValue 和 nodeType 属性用于获取和操作节点信息。示例展示如何加载XML文件,如books.xml,通过loadXMLDoc函数。nodeName获取元素节点名,nodeValue用于获取或设置文本节点内容,nodeType显示节点类型(如元素:1,属性:2,文本:3,注释:8,文档:9)。每个节点都是可访问和操作的对象,包含方法和属性。
|
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天前
|
XML Web App开发 JavaScript
XML DOM - 导航节点
在XML DOM中,导航节点涉及利用parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling属性来遍历节点树。不同浏览器对空文本节点处理不一致,可能导致导航问题。为解决此问题,可以使用get_nextSibling函数,它检查并跳过非元素类型的空文本节点,确保在IE和Firefox等浏览器中得到一致的结果。该函数循环遍历直到找到下一个元素节点。
|
6天前
|
XML JavaScript 前端开发
XML DOM 遍历节点树
该示例展示了如何遍历XML文档的节点树。通过DOMParser解析XML字符串得到xmlDoc,然后遍历根节点的子节点,显示每个节点的名称及其文本值。输出结果为:&quot;title: Everyday Italian&quot;, &quot;author: Giada De Laurentiis&quot;, &quot;year: 2005&quot;。代码使用JavaScript实现,循环遍历并更新HTML元素`&lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;`的内容。
|
6天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
这段内容介绍了DOM中的`attributes`属性,它返回元素节点的属性节点列表,形成一个命名节点图。这个列表自动更新,当属性增删时反映变化。示例代码展示了如何加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,然后使用`getNamedItem()`方法获取&quot;category&quot;属性的值并显示属性数量。输出为&quot;cooking&quot;和&quot;1&quot;。