JavaScript HTML DOM 节点列表

简介: JavaScript HTML DOM 节点列表

JavaScript HTML DOM 节点列表

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似,
可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name,id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

节点列表不是一个数组!

节点列表看起来可能是一个数组,但其实不是。

可以像数组一样,使用索引来获取元素。

节点列表无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。

目录
相关文章
|
4天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM提供nodeName、nodeValue和nodeType属性来揭示节点详情。一个JavaScript示例展示了如何运用这些属性:loadXMLDoc函数加载XML文件"books.xml",然后通过nodeName获取根元素名,用nodeValue提取文本节点的内容。
|
7天前
|
XML JavaScript 数据格式
XML DOM 节点列表
`getElementsByTagName()` 和 `childNodes` 返回 XML DOM 中的节点列表,表现为按顺序排列的节点集合。节点通过 0 开始的索引访问。例如,以下代码加载 "books.xml",获取所有 `<title>` 元素的节点列表,然后提取第一个 `<title>` 的文本内容:`xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue`,结果为 "Everyday Italian"。
|
9天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM 节点详解:nodeName、nodeValue 和 nodeType 属性用于获取和操作节点信息。示例展示如何加载XML文件,如books.xml,通过loadXMLDoc函数。nodeName获取元素节点名,nodeValue用于获取或设置文本节点内容,nodeType显示节点类型(如元素:1,属性:2,文本:3,注释:8,文档:9)。每个节点都是可访问和操作的对象,包含方法和属性。
|
1天前
|
XML 存储 JavaScript
XML DOM 节点
**DOM 把XML文档拆解为节点:** - 文档是个文档节点 - 每个元素是元素节点 - 文本、属性和注释各为独立节点 - 元素内的文本属于文本节点,如 `<year>2005</year>` 中的 "2005" 是单独的文本节点,不是元素的值。
|
2天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
2天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,允许遍历和处理节点。例如,加载"books.xml"到`xmlDoc`,通过`getElementsByTagName("title")`获取所有标题节点,然后使用循环输出每个<title>元素的文本内容。
|
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,然后遍历根节点的子节点,显示每个节点的名称及其文本值。输出结果为:"title: Everyday Italian", "author: Giada De Laurentiis", "year: 2005"。代码使用JavaScript实现,循环遍历并更新HTML元素`<p id="demo"></p>`的内容。
|
6天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
这段内容介绍了DOM中的`attributes`属性,它返回元素节点的属性节点列表,形成一个命名节点图。这个列表自动更新,当属性增删时反映变化。示例代码展示了如何加载"books.xml",获取第一个`<book>`元素的属性列表,然后使用`getNamedItem()`方法获取"category"属性的值并显示属性数量。输出为"cooking"和"1"。
|
6天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
11 0