DOM遍历

最新推荐文章于 2024-11-21 06:16:28 发布
原创 最新推荐文章于 2024-11-21 06:16:28 发布 · 691 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客主要介绍了DOM遍历节点树的方法，包括parentNode、childNodes等，还提及节点类型。同时阐述了遍历元素节点树的方式，如parentElement、children等，部分方法在IE9以下不兼容。此外，介绍了节点的属性，如nodeName、nodeValue等，以及查看元素是否有节点的方法。

DOM遍历节点树

1，parentNode

2，childNodes，子节点们

之所以是7个，看一下节点类型

1，元素节点-------1

2，属性节点-------2

3，文本节点-------3

4，注释节点-------8，

5，document------9

6，DocumentFragment-------11

灰色区域是第1个文本节点

第二个是元素节点

第三个是文本节点

以此类推，一共有7个节点,

3，firstChild，lastChild

第一个子节点和最后一个节点

4，nextSibling，previousSibling

后一个兄弟节点，前一个兄弟节点

----------------------------------------------------------------------------------------------------------------

遍历元素节点树

1，parentElement （IE9以下不兼容）

2，children

3，childElementCount === node.children.length 当前元素节点的子元素节点的个数 （IE9以下不兼容）

4，firstElementChild,lastElementChild  （IE9以下不兼容）

返回第一个元素节点和最后元素节点

5，nextElementSibling / previousElementSibling （IE9以下不兼容）

返回后一个 / 前一个兄弟元素

----------------------------------------------------------------------------------------------------------------------

节点的属性

1，nodeName

元素的标签名，只读

2，nodeValue

只有文本节点，和comment（注释）节点有，可读，可写

3，nodeType

节点的类型，只读

他返回的是一个数值，比如元素节点是1

4，attributes

属性节点的内属性的集合

5，是一个方法 hasChileNodes() 

查看某一元素是否有节点

 

DOM遍历网页元素
07-02
DOM开发，用VC6获取网页WEBBROWSER2，IHTMLDOCUMENT元素
TreeWalker API 与普通 DOM 遍历方式的深度比较8.4 15
08-04
TreeWalker API与普通DOM遍历方式相比具有诸多优势，主要体现在性能、可维护性和遍历深度等方面。TreeWalker API是一种高级的DOM遍历接口，它提供了一种基于节点过滤器的遍历机制，能够高效地处理大型DOM结构，同时...
DOM中的遍历
wurourouzhang的博客
01-08 325
1. NodeIterator和 TreeWalker。这两个类型能够基于给定的起点对 DOM 结构执行深度优先遍历。     ① NodeIterator类型，有两个方法，nextNode()--在遍历中向前前进一步，previousNode()--在遍历中向后后退一步           使用document.createNodeIterator(root,whatToShow,filte...
DOM元素遍历
a61427790215998的博客
09-04 143
/* *返回元素e的第n层祖先算元素，如果不存在此类祖先或祖先不是Element， *(例如Document或者DocumentFragment)则返回null *如果n为0，则返回本身。如果n为1(或省略)，则返回其父元素 *如果n为2，则返回其祖父元素，依次类推 */ function parent(e, n) ...
JS DOM之DOM遍历
大河之犬的博客
10-06 2595
DOM遍历，可以简单地理解为“查找元素”。举个例子，如果你使用等方法获取一个元素，然后又想得到该元素的父元素、子元素，甚至是下一个兄弟元素，这种操作涉及的就是DOM遍历。
DOM 遍历
lly202406的博客
11-21 729
文档对象模型（DOM，Document Object Model）是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化表示，并定义了一种方式，允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM 遍历是指通过 DOM 树访问文档中的元素的过程。在本篇文章中，我们将深入探讨 DOM 遍历的概念、方法和应用。
dom遍历所有xml节点，并且重新生成xml
08-08
在本主题“DOM遍历所有XML节点，并且重新生成XML”中，我们将深入探讨如何利用DOM API遍历XML文档的所有节点，并根据需求重新构建XML文档。 首先，让我们了解XML的基本结构。XML（eXtensible Markup Language）是一...
dom-traversal:轻量级DOM遍历库
07-09
《深入理解轻量级DOM遍历库：dom-traversal》 在Web开发中，DOM（Document Object Model）遍历是必不可少的技术环节。DOM是HTML和XML文档的一种结构化表示，它允许程序和脚本动态更新、添加、删除和改变元素及属性...
walkers:使用 htmlparser2 递归 DOM 遍历
06-09
使用 htmlparser2 进行递归 DOM 遍历。 入门 安装模块： npm install walkers var walkers = require ( '../lib/walkers.js' ) ; var request = require ( 'request' ) ; var htmlparser = require ( "htmlparser2...
DOM应用---遍历网页中的元素
03-02
使用IHTML族接口对已打开的IE窗口的表单进行枚举获取。<br>演示了IE窗口的获取和IHTML族接口的使用
DOM元素的遍历
weixin_33896069的博客
04-14 250
DOM为文档的每个节点都提供了childNodes属性，该属性返回一个nodeList对象。使用该属性可以对节点的子节点进行遍历。 ####但是更多的我们只是想遍历某一元素的子元素，此时该属性就不适用这种情况了。 原因是:当元素内出现空格时，该属性在不同浏览器下的行为不一致，IE9之前的版本不会返回文本节点，而其他浏览器返回的节点包括文本节点。 <ul> <li>1&l...
DOM元素遍历（javascript）
weixin_42645716的博客
02-28 1037
本文是总结文，结合其他前辈的多篇文章。 参考一：https://blog.youkuaiyun.com/yqm1234277/article/details/27176923 参考二：https://blog.youkuaiyun.com/qq_35414779/article/details/80421475 参考三：https://blog.youkuaiyun.com/qq_35087256/article/details/8...
【DOM】遍历
liuxiaoqi_123的博客
10-23 645
DOM 遍历
遍历DOM的方式
海阔天空
11-10 433
以如下html代码为例： <div id="content"> <h3>我是标题</h3> <p> <span>我是span内容1</span> <span>我是span内容2</span> </p> </div> 1.比...
dom遍历wordCount
最新发布
08-10
### 遍历 DOM 元素并统计页面中的单词数量 在 JavaScript 中，遍历 DOM 元素并统计页面中单词数量可以通过以下方式实现。首先，遍历页面中的所有文本节点，然后提取文本内容，最后对文本中的单词进行统计。 #### 遍历 DOM 元素 为了遍历页面中的所有文本节点，可以使用递归方法遍历 DOM 树。以下是一个遍历 DOM 元素的示例代码： ```javascript function traverseDOM(node) { if (node.nodeType === Node.TEXT_NODE) { // 处理文本节点 console.log(node.textContent); } else { // 遍历子节点 for (let child of node.childNodes) { traverseDOM(child); } } } // 从 document.body 开始遍历 traverseDOM(document.body); ``` 此代码通过递归方式遍历 `document.body` 下的所有子节点，并检查每个节点的类型。如果节点是文本节点（`Node.TEXT_NODE`），则提取其内容进行处理。 #### 统计单词数量 在提取文本内容后，需要将文本分割为单词并统计数量。以下是一个统计单词数量的示例代码： ```javascript function countWords(text) { // 使用正则表达式匹配单词 const words = text.match(/\b\w+\b/g); return words ? words.length : 0; } function traverseAndCountWords(node) { let totalWordCount = 0; if (node.nodeType === Node.TEXT_NODE) { // 统计当前文本节点的单词数量 totalWordCount += countWords(node.textContent); } else { for (let child of node.childNodes) { totalWordCount += traverseAndCountWords(child); } } return totalWordCount; } // 从 document.body 开始遍历并统计单词数量 const wordCount = traverseAndCountWords(document.body); console.log(`页面中的单词总数为: ${wordCount}`); ``` 上述代码通过 `countWords` 函数统计每个文本节点中的单词数量，并将所有文本节点的结果相加，最终输出页面中的单词总数。 #### 使用 `Node.childNodes` 和 `Node.nodeType` 在遍历过程中，`Node.childNodes` 属性返回一个包含当前节点所有子节点的类数组对象。通过检查 `nodeType`，可以确定当前节点的类型。例如，`Node.TEXT_NODE` 表示文本节点，而 `Node.ELEMENT_NODE` 表示元素节点。 需要注意的是，遍历 DOM 树时应避免使用 `for..in` 循环，因为 `for..in` 会遍历所有可枚举的属性，包括一些额外的属性，这可能导致意外的结果。 #### 示例代码 以下是一个完整的示例代码，展示了如何遍历 DOM 元素并统计页面中的单词数量： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM 遍历与单词统计</title> </head> <body> <h1>这是一个示例标题</h1> <p>这是一个段落，包含一些文本内容。</p> <p>这是另一个段落，包含更多的文本内容。</p> <script> function countWords(text) { const words = text.match(/\b\w+\b/g); return words ? words.length : 0; } function traverseAndCountWords(node) { let totalWordCount = 0; if (node.nodeType === Node.TEXT_NODE) { totalWordCount += countWords(node.textContent); } else { for (let child of node.childNodes) { totalWordCount += traverseAndCountWords(child); } } return totalWordCount; } const wordCount = traverseAndCountWords(document.body); console.log(`页面中的单词总数为: ${wordCount}`); </script> </body> </html> ``` 此代码通过遍历 `document.body` 下的所有文本节点，统计页面中的单词数量，并在控制台输出结果。 #### 注意事项 - 在遍历 DOM 树时，应避免使用 `document.writeln` 或 `alert` 等方法，因为这些方法可能会影响页面的渲染和性能。 - 如果需要处理复杂的 DOM 操作，建议使用 `querySelector` 或 `querySelectorAll` 方法获取元素，而不是使用传统的 `getElementById` 或 `getElementsByClassName` 方法。 - 在统计单词数量时，应使用正则表达式匹配单词，以确保统计结果的准确性。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值