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 个段落。
目录
相关文章
|
7天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`的`Named Node Map`是元素节点的属性列表,类似节点列表但有区别。当属性增删时,列表自动更新。示例代码加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性节点列表,`x.length`表示属性数量,`x.getNamedItem(&quot;category&quot;).nodeValue`显示&quot;category&quot;属性值。输出为:`cooking`和`1`,表示类别为烹饪且有1个属性。
|
12天前
|
XML JavaScript 前端开发
DOM 属性列表(命名节点图 Named Node Map)
这段内容介绍了如何使用JavaScript操作XML文档中的DOM属性。通过`getElementsByTagName`获取元素后,`attributes`属性返回一个命名节点图(Named Node Map),表示元素的属性列表,该列表会自动更新。示例代码展示了加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,然后利用`getNamedItem()`方法获取&quot;category&quot;属性的值并输出,同时显示属性数量。
|
12天前
|
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;。
|
1天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
该文段介绍了DOM中的命名节点图(Named Node Map),它是元素节点属性的列表,会自动更新以反映属性变化。示例展示了如何通过`loadXMLDoc()`加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性节点列表,使用`x.getNamedItem(&quot;category&quot;).nodeValue`显示&quot;category&quot;属性值,`x.length`显示属性数量。输出为&quot;cooking 1&quot;。
|
3天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
该文段介绍了DOM中的命名节点图(Named Node Map),它表示元素节点的属性列表,能自动更新增删属性。示例代码展示了如何通过`getElementsByTagName()`获取首个`&lt;book&gt;`元素的属性列表,然后使用`getNamedItem()`获取&quot;category&quot;属性的值,并输出属性数量。当执行时,会显示&quot;cooking&quot;(属性值)和&quot;1&quot;(属性数量)。
|
3天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
7 2
|
3天前
|
JavaScript Java
JavaSE精选-JS&DOM
JavaSE精选-JS&DOM
9 1
|
4天前
|
JavaScript Java
JS&DOM技术文章
JS&DOM技术文章
|
4天前
|
Web App开发 监控 JavaScript
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
实现JavaScript鼠标框选内容上报,需关注`Range`和`Selection`对象,处理各种元素选择情况,如文本、图片、输入框等。事件监听包括`mousedown`、`mouseup`、`selectionchange`等,用`debounce`防止频繁触发。通过`Range`获取选中内容,判断是否包含特定标签,决定返回HTML或文本。完整代码示例展示了如何实现这一功能。
11 0
JS 实现鼠标框选(页面选择)时返回对应的 HTML 或文案内容
|
4天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
11 1