JavaScript DOM 3 - 查找特定位置上的节点

bawn 发布于2019-08-20 17:27 / 3082人阅读

摘要：针对类似于对象，那就是返回包含此节点的子节点的对象。当两个元素之间有空格的时候，即使没有写入文字，但是依然会有一个节点。返回该节点的前一个和后一个兄弟节点。返回此元素的去除空格元素的的子节点个数并没有一个对于的与它对应。

首先把，接下来用于测试的html先贴出来：


    item list
    
        book 1
        book 2
     
    
        cat 1
        cat 2

在前面的文章“JavaScript DOM 1－ node, Node, HTMLElement之间到底是什么关系”中，已经解释过的两个概念：
1: 整个document文档就是一棵树，这就意味着我们可以从某一个节点（node）开始，遍历这颗树上所有的节点
2: 因为document中的所有元素都是一个Node对象, 那就是说定义在Node类上的所有公用属性和方法，每一个node都可以说使用

为了实现对整棵树节点的遍历，Node定义了以下的相关属性：

1: parentNode

   返回该节点的父节点。针对类似于Document对象，那就是null.

2: childNodes [children]

   返回包含此节点的子节点的NodeList对象。

这个属性的返回结果可能不是你直观想象的那样。

以上结果是我们开篇那段HTML上测试的结果。当两个元素之间有空格的时候，即使没有写入文字，但是依然会有一个"text"节点。所以我们以为对bookList这个"

"元素)，但是结果却返回了5个元素，其中有三个"text"节点，依次是：
```
1: 第一个""元素与""之间的空格
2: 第一个""与第二个"
"之间的空格
3: 第二个"
"与""之间的空格。
```
但是如果我们想只返回那两个"
"元素，可以使用".children"这个属性，它是只包含Element元素的NodeList，它是实时变化的，会根据文档的改变而变化。

3: firstChild, lastChild [firstElementChild, lastElementChild]
```
返回该节点的子节点中的第一个和最后一个。
```
同样的，因为在第二点提到的原因呢，或许它放回的不是你直觉上的结果。

4: previousSibling, nextSibling [previousElementSibling, nextElementSibling]
```
返回该节点的前一个和后一个兄弟节点。
```
依然上会把空格算进去，而与之对应的".previousElementSibling"和"nextElementSibling"则不会。

5: nodeValue
```
返回Text节点或者Comment节点的文本内容，对于HTMLElement之类的返回null
```
6: nodeName
```
返回元素的标签名，以大写表示
```
对于空格的text返回"#text",而对于我们常见的这些标签就返回大写的标签名字，比方说"
"元素，就返回"LI"。

7: childElementCount
```
返回此元素的去除空格元素的的子节点个数
```
childElementCount = children.length. 并没有一个对于的childCount与它对应。如果想得出包含空格在内的元素的个数，可以通过：childNodes.length 获取。

专线服务混合云 java查找特定字符 dom元素位置怎么查找云服务器上的ftp javascript dom

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83590.html

JavaScript 编程精解中文第三版十四、文档对象模型

摘要：在其沙箱中提供了将文本转换成文档对象模型的功能。浏览器使用与该形状对应的数据结构来表示文档。我们将这种表示方式称为文档对象模型，或简称。树回想一下第章中提到的语法树。语言的语法树有标识符值和应用节点。元素表示标签的节点用于确定文档结构。来源：ApacheCN『JavaScript 编程精解中文第三版』翻译项目原文：The Document Object Model 译者：飞龙协议...

gggggggbong 2019-08-23 18:19 评论0 收藏0
深入前端-彻底搞懂浏览器运行机制

摘要：当这些异步任务发生的时候，它们将会被放入浏览器的事件任务队列中去，等到运行时执行线程空闲时候才会按照队列先进先出的原则被一一执行，但终究还是单线程。浏览器是多进程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser进程：浏览器的主进程（负责协调、主控），只有一个。负...

YPHP 2019-08-02 15:30 评论0 收藏0
深入前端-彻底搞懂浏览器运行机制

摘要：当这些异步任务发生的时候，它们将会被放入浏览器的事件任务队列中去，等到运行时执行线程空闲时候才会按照队列先进先出的原则被一一执行，但终究还是单线程。浏览器是多进程的 showImg(https://segmentfault.com/img/remote/1460000019706956?w=815&h=517); Browser进程：浏览器的主进程（负责协调、主控），只有一个。负...

Youngs 2019-08-23 18:34 评论0 收藏0
jQuery笔记总结篇

摘要：希望在做所有事情之前，操作文档。不受层级限制子选择器在给定的父元素下匹配所有子元素。相邻选择器匹配所有紧接在元素后的元素。判断当前对象中的某个元素是否包含指定类名，包含返回，不包含返回下标过滤器精确选出指定下标元素获取第个元素。原文链接 http://blog.poetries.top/2016... 首先，来了解一下jQuery学习的整体思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 评论0 收藏0
前端性能优化指南

摘要：前端性能优化指南优化缓存异步并不等于即时。操作性能问题主要有以下原因。发生在之前，所以相对来说会造成更多性能损耗。新引擎还对对象属性访问做了优化，解决方案叫，简称。代价是前置的扫描类型编译优化。数组，，闭包变量不在优化范畴之列。前端性能优化指南 AJAX优化缓存AJAX：异步并不等于即时。请求使用GET：当使用XMLHttpRequest时，而URL长度不到2K...

Pink 2019-08-21 10:38 评论0 收藏0