如何遍歷DOM

時間 2021-01-12

標籤 html 前端 vue node git github 面試瀏覽器微信 dom 欄目 HTML 简体版

原文原文鏈接

做者： Tania Rascia
譯者：前端小智
來源：Taniarcia

點贊再看，微信搜索 【大遷世界】,B站關注【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。html

github 地址：https://github.com/qq44924588...前端

簡介

咱們知道可使用document對象的內置方法經過ID，類，標籤名和查詢選擇器來訪問HTML元素。 DOM 是由節點樹構成的，document
節點位於根，其餘每一個節點（包括元素，註釋和文本節點）都做爲各個分支的節點。vue

在本教程中，咱們回顧一些HTML術語，這對使用 JS 和DOM很是重要，咱們會介紹一下DOM樹，節點，以及如何識別最多見的節點類型。最後，建立一個 JS 程序來交互式地修改DOM。node

HTML術語

首先，咱們看一下這個HTML元素。git

<a href="index.html">Home</a>

這裏咱們有一個錨元素，它是一個到index.html的連接。github

a 是標籤
href 是屬性
index.html 是屬性值
Home 是文本

開頭和結尾標記之間的全部內容組合在一塊兒構成了整個HTML元素。面試

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>

使用 JS 訪問元素的最簡單方法是經過id屬性，接着爲上面的 a 標籤添加一個id爲nav值。瀏覽器

<a id="nav" href="index.html">Home</a>

咱們能夠經過getElementById()方法來獲取 a 標籤。在控制檯輸入：微信

let navLink = document.getElementById('nav');

輸出：dom

<a id="nav" href="index.html">Home</a>

咱們能夠經過更改href屬性來更改連接的地址：

navLink.href = 'https://github.com/qq449245884/xiaozhi';

咱們還能夠經過textContent屬性來更改文本內容:

navLink.textContent = '跳轉取前端小智 Github';

接着，直接在控制檯輸入 navLink 就能夠看到咱們 a 標籤更新後的內容：

<a id="nav" href="https://github.com/qq449245884/xiaozhi">跳轉取前端小智 Github</a>

到這裏，咱們應該瞭解如何使用document 方法訪問元素，如何將元素分配給變量以及如何修改元素中的屬性和值。

DOM 樹和節點

DOM中的全部元素都被定義爲節點。節點的類型有不少種，但咱們最經常使用的主要有三種：

元素節點
文本節點
註釋節點

當HTML元素是DOM中的一個項時，它被稱爲元素節點。元素以外的任何單獨文本都是一個文本節點，HTML 註釋是一個註釋節點。除了這三種節點類型以外，document 自己也是一個document 節點，它是全部其餘節點的根。

DOM由嵌套節點的樹結構組成，一般稱爲DOM樹。咱們知道祖先的家譜，該譜系由父母，孩子和兄弟姐妹組成。 DOM中的節點也稱爲父級，子級和同級，具體取決於它們與其餘節點的關係。

爲了演示，建立一個nodes.html文件，添加文本，註釋和元素節點。

<!DOCTYPE html>
<html>
  <head>
    <title>Learning About Nodes</title>
  </head>

  <body>
    <h1>An element node</h1>
    <!-- a comment node -->
    A text node.
  </body>
</html>

html元素節點是父節點。head和body是兄弟節點，它們是 html 的子節點。body包含三個子節點，它們都是兄弟節點，節點的類型不會改變其嵌套的級別。

注意:當使用HTML生成的DOM時，HTML源代碼的縮進將建立許多空文本節點，這些節點在 DevTools Elements選項卡中是不可見的。瞭解DOM中的空白符更多知識請訪問 https://developer.mozilla.org...

識別節點類型

文檔中的每一個節點都有一個節點類型，能夠經過nodeType屬性訪問該類型，更多節點類型你們能夠到 MDN 上查看。下面是咱們比較常見節點類型。

Node Type	值	描述
ELEMENT_NODE	1	一個元素節點，例如 `<p>` 和 `<div>`
TEXT_NODE	3	`Element` 或者 `Attr` 中實際的 `文字`
COMMENT_NODE	8	註釋節點，如`<!-- an HTML comment -->`

在 Developer Tools 的Elements選項卡中，你可能會注意到，每當單擊並突出顯示DOM中的任何一行時，它旁邊就會出現== $0的值。經過輸入$0，這是訪問開發人員工具中當選中元素的一種很是方便的方法。

經過 F12 選中一個元素，如咱們選中 h1 標籤：

在控制檯中，使用nodeType屬性獲取當前選定節點的節點類型。

$0.nodeType;
// 1

選擇h1元素後，能夠看到控制檯輸出 1，它與ELEMENT_NODE相關。對文本和註釋執行相同的操做，分別輸出3和8。

除了nodeType以外，還可使用nodeValue屬性獲取文本或註釋節點的值，並使用nodeName獲取元素的標籤名。

使用事件修改DOM

到目前爲止，咱們只看到瞭如何在控制檯中修改DOM，接着咱們經過事件的方式來跟 Dom 玩玩。

回到index.html文件，添加一個帶有id的button元素，並新建 script.js 引入其中。

JS 中的事件是用戶所作的動做。當用戶將鼠標懸停在一個元素上，或單擊一個元素，或按下鍵盤上的一個特定鍵時，這些都是事件類型。在這個特殊的例子中，咱們但願咱們的按鈕偵聽並準備在用戶單擊它時執行操做。咱們能夠經過向按鈕添加一個事件監聽器來作到這一點。

在 scripts.js中首先找到 button 元素，並監聽一個 click 事件，在點擊事件裏面咱們去更網頁的背景顏色：

let button = document.getElementById('changeBackground')

button.addEventListener('click', () => {
  document.body.style.backgroundColor = 'fuchsia'
})

存該文件後，在瀏覽器中刷新index.html。單擊按鈕，事件將觸發。

總結

在本文中，咱們瞭解了DOM 是如何構形成節點樹的，節點樹一般是HTML元素、文本或註釋，咱們建立了一個腳本，容許用戶修改網站，而沒必要手動在開發人員控制檯中輸入代碼。

我是小智，咱們下期見。

原文：https://www.taniascia.com/how...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

文章每週持續更新，能夠微信搜索「大遷世界」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。