JavaScript DOM 3 - 查找特定位置上的節點

bawn 發布于2019-08-20 17:27 / 3220人閱讀

摘要：針對類似于對象，那就是返回包含此節點的子節點的對象。當兩個元素之間有空格的時候，即使沒有寫入文字，但是依然會有一個節點。返回該節點的前一個和后一個兄弟節點。返回此元素的去除空格元素的的子節點個數并沒有一個對于的與它對應。

首先把，接下來用于測試的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 獲取。

云服務器 GPU云服務器 java查找特定字符 dom元素位置怎么查找云服務器上的ftp javascript dom

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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