摘要:我們可以通過來檢查某個節點是否有子節點。通過可以用來取得父元素,返回值可能會是一個元素節點根節點或節點。與類似,通過可以取得同層之間的下一個節點,如果已經是最后一個節點,則返回。
在上一篇的分享當中,我們簡單介紹了BOM 與DOM,也了解到JavaScript 是怎么通過它們提供的方法來與瀏覽器進行溝通。
當一個網頁被載入到瀏覽器時,瀏覽器會首先分析這個HTML 文檔,然后會依照這份HTML 的內容解析成DOM (Document Object Model,即文件對象模型)。
而DOM 是W3C 制定的一個規范,它是獨立于平臺與語言的標準。換言之,只要遵守這樣的規范,不管是什么平臺或者是什么語言開發,都可以通過DOM 提供的API 來操作DOM 的內容、結構與樣式。
所以說,DOM 是網頁的根本,懂得控制DOM就可以控制整個網頁,做出良好的互動體驗。
那么在今天的分享中,我們就繼續來介紹DOM API 查找節點的方法吧。
前言:script標簽放哪里有區別嗎?針對標簽放哪里,這個題目其實沒有標準答案,一般你會看到有兩種版本:
放在 ... 之間
放在
之前
還有人會說為什么放在 ... 里面的JavaScript沒有作用?我覺得這說的有出入,這里我們簡單來講一下問題所在。
那么我們來試試上一篇介紹過的,先以document.querySelector取得id="hello"的節點,然后通過textContent來修改內容。
先來試試把標簽放在之前。在jsbin里面馬上執行看看,看起來似乎很ok呢!
接著,我們試著把標簽移到 ... 之間:
咦?怎么什么都沒有呢?而且也沒有錯誤信息,JavaScript真的如大家說的一樣,很垃圾嗎?
冷靜一下,容我解釋一下。
前面說過,當一個網頁被載入到瀏覽器時,瀏覽器會先分析這個HTML 文檔,由上而下依序來讀取解析:
所以上面jsbin例子中,當瀏覽器在 ... 之間遇到標簽時,就會暫停解析網頁,并且立即執行里的內容,直到script執行完畢后再繼續解析網頁。
當 ... 里的想要嘗試去尋找 不是瀏覽器壞掉,也不是JavaScript太渣,而是因為我們不理解瀏覽器執行的原理所造成的誤會。 這里是瀏覽器加載一個有 標簽的網站所發生的事情: 拉取 HTML 頁面 開始解析 HTML 解析到 標簽之后準備獲取 script 文件. 瀏覽器獲取script文件。同時,html 解析中斷并且阻斷頁面上其他html的解析。 一段時間后,script下載完成并且執行。 繼續解析HTML文檔的其他部分(解析script之后的html代碼) 第4步導致了很不好的用戶體驗,直到script文件全部下載完成之前HTML都不能得到解析。 那么,當我們把標簽放在結束之前,由于DOM已經解析完成,所以document.querySelector就可以順利取得id="hello"的節點,并且把"HELLO"的字串放在網頁里啦! 這樣說起來,標簽是不是就不適合放在 ... 之間呢? 也不能這么說,這點認真要講的話之后或許可以用一整篇來說明這個。
上一篇文章說過,document對象是DOM tree的根節點,所以當我們要存取HTML時,都從document對象開始。而DOM的節點類型除了HTML元素節點(element nodes)外,還有文字節點(text nodes)、注釋節點(comment nodes)等。 而常見的DOM 選取方法有下列這些: DOM 常用的節點類型有下面幾種:
可以通過節點類型常數或是對應數值來判斷: 其他不常用或是已經廢棄的部分可以參考:MDN Node.nodeType一節。 由于DOM 節點有分層的概念,于是節點與節點之間的關系,我們大致上可以分成以下兩種: 父子關系:除了document之外,每一個節點都會有個上層的節點,我們通常稱之為「父節點」 (Parent node),而相對地,從屬于自己下層的節點,就會稱為「子節點」 (Child node)。 兄弟關系:有同一個「父節點」的節點,那么他們彼此之間就是「兄弟節點」(Siblings node)。 而隔層的節點基本上沒有直接關系。
上圖中水平方向的鄰層節點為父子關系,垂直方向的同層節點為兄弟關系。 Node.childNodes 所有的DOM節點對象都有childNodes屬性,且此種屬性無法修改。 我們可以通過Node.hasChildNodes()來檢查某個DOM節點是否有子節點。 Node.childNodes返回的可能會有這幾種: HTML 元素節點(element nodes) 文字節點(text nodes),包含空格 注釋節點(comment nodes) Node.firstChild Node.firstChild可以取得Node節點的第一個子節點,如果沒有子節點則返回null。 要注意的是,子節點包括空白節點,如下面例子: 因為取得的是 與第一個中間的換行字元,所以p.firstChild.tagName會得到undefined。所以改成這樣: 把中間的換行與空白移除,就會得到預期中的"SPAN"了。 Node.lastChild Node.lastChild可以取得Node節點的最后一個子節點,如果沒有子節點則返回null。 與Node.firstChild一樣的是,子節點也包括空白節點,所以像這樣: 得到的會是一個換行字元的空字符串。 移除節點之間多余的空白后: 輸出的就會是正確的"span 3" 啦。 Node.parentNode 那么相較于Child系列,parentNode就單純一些。 通過Node.parentNode可以用來取得父元素,返回值可能會是一個元素節點(Element node)、根節點(Document node)或DocumentFragment節點。 Node.previousSibling 看完了DOM父與子之后,接著來看看兄弟節點。 通過Node.previousSibling可以取得同層之間的前一個節點,如果node已經是第一個節點且前面無節點,則返回null。 Node.nextSibling 與Node.previousSibling類似,通過Node.nextSibling可以取得同層之間的下一個節點,如果node已經是最后一個節點,則返回null。 document.getElementsBy*與document.querySelector/ document.querySelectorAll的差異 今天分享了很多關于DOM的選取以及查找遍歷的方式,其中,像是document.getElementById以及document.querySelector因為取得的一定只會有一個元素/節點,所以不會有index與length屬性。 而document.getElementsBy**(注意,這里有個s)以及document.querySelectorAll則分別返回HTMLCollection與NodeList。 這兩者其實是有點差別的,HTMLCollection只收集HTML element 節點,而NodeList除了HTML element 節點,也包含文字節點、屬性節點等。當然兩者也有類似的地方,雖然不能使用數組的method,但這兩種都可以用數組索引的方式來存取內容,也就是偽數組。 另一個需要注意的地方是,HTMLCollection/NodeList在大部分情況下是即時更新的,但通過document.querySelector/document.querySelectorAll取得的NodeList是靜態的。 啥意思呢?舉個例子: 如果改成document.querySelector的寫法: 那么以上就是今天所要介紹的內容啦。 在后續的文章會再繼續說明DOM API新增/刪除/修改節點的部分,歡迎持續關注。 如果覺得文章對你有些許幫助,歡迎在我的GitHub博客點贊和關注,感激不盡! 文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。 轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/7268.html 摘要:事件觸發和監聽事件相關。文檔是一個由標簽嵌套而成的樹形結構,因此,也是使用樹形的對象模型來描述一個文檔。節點的寫法三是樹繼承關系的根節點。七表示一個上的范圍,這個范圍是以文字為最小單位的。
筆記說明
重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的... 摘要:事件觸發和監聽事件相關。文檔是一個由標簽嵌套而成的樹形結構,因此,也是使用樹形的對象模型來描述一個文檔。節點的寫法三是樹繼承關系的根節點。七表示一個上的范圍,這個范圍是以文字為最小單位的。
筆記說明
重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄,每天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的可以加入winter的... 閱讀 1849·2021-11-25 09:43 閱讀 1491·2021-09-02 15:21 閱讀 3453·2019-08-30 15:52 閱讀 1501·2019-08-30 12:48 閱讀 1295·2019-08-30 10:57 閱讀 2929·2019-08-26 17:41 閱讀 681·2019-08-26 11:59 閱讀 1366·2019-08-26 10:41
// 根據傳入的值,找到 DOM 中 id 為 "xxx" 的元素。
document.getElementById("xxx");
// 針對給定的 tag 名稱,返回所有符合條件的 NodeList 對象(節點的集合)
document.getElementsByTagName("xxx");
// 針對給定的 class 名稱,返回所有符合條件的節點集合
document.getElementsByClassName("xxx");
// 針對給定的 Selector 條件,返回第一個 或 所有符合條件的節點集合
document.querySelector("xxx");
document.querySelectorAll("xxx");
DOM 節點的類型
document.nodeType === Node.DOCUMENT_NODE; //true
document.nodeType === 9; //true
var node = document.querySelector("#hello");
// 如果 node 內有子元素
if( node.hasChildNodes() ) {
// 可以通過 node.childNodes[n] (n 為數字索引) 取得對應的節點
// 注意,NodeList 對象內容為即時更新的集合
for (var i = 0; i < node.childNodes[i].length; i++) {
// ...
};
}
<p>
<span>span 1span>
<span>span 2span>
<span>span 3span>
p>
<script>
var p = document.querySelector("p");
// tagName 屬性可以取得 node 的標簽名稱
console.log(p.firstChild.tagName); // undefined
script>
<p><span>span 1span><span>span 2span><span>span 3span>p>
<script>
var p = document.querySelector("p");
// tagName 屬性可以取得 node 的標簽名稱
console.log(p.firstChild.tagName); // "SPAN"
script>
<p>
<span>span 1span>
<span>span 2span>
<span>span 3span>
p>
<script>
var p = document.querySelector("p");
// textContent 屬性可以取得節點內的文字內容
console.log(p.lastChild.textContent); // "" (換行字元)
script>
<p><span>span 1span><span>span 2span><span>span 3span>p>
<script>
var p = document.querySelector("p");
// textContent 屬性可以取得節點內的文字內容
console.log(p.lastChild.textContent); // "span 3"
script>
<p><span>span 1span><span>span 2span><span>span 3span>p>
<script>
var el = document.querySelector("span");
console.log( el.parentNode.nodeName ); // "P"
script>
<p><span>span 1span><span>span 2span><span>span 3span>p>
<script>
var el = document.querySelector("span");
console.log( el.previousSibling ); // null
// document.querySelectorAll 會取得所有符合條件的集合,
// 而 document.querySelectorAll("span")[2] 指的是「第三個」符合條件的元素。
var el2 = document.querySelectorAll("span")[2];
console.log( el2.previousSibling.textContent ); // "span 2"
script>
<p><span>span 1span><span>span 2span><span>span 3span>p>
<script>
// document.querySelector 會取得第一個符合條件的元素
var el = document.querySelector("span");
console.log( el.nextSibling.textContent ); // "span 2"
script>
<div id="outer">
<div id="inner">innerdiv>
div>
<script>
//
<div id="outer">
<div id="inner">innerdiv>
div>
<script>
//
相關文章
重學前端學習筆記(二十三)--狹義的文檔對象DOM
重學前端學習筆記(二十三)--狹義的文檔對象DOM
發表評論
0條評論
shengguo
男|高級講師
TA的文章
閱讀更多
tomcat https
環境影響著一個人...最高月薪20K,想成為最優秀的人,就要向最優秀的人學習
我們來翻翻元素樣式的族譜-getComputedStyle
一些問題
提升網站頁面速度的14條最佳實踐(二)
移動端H5頁面中1px邊框的幾種解決方法
JS去重的幾種實現方法
for 循環 var 和 let