JavaScript零基礎入門——（十）JavaScript的DOM基礎

時間 2019-11-06

標籤 javascript 零基礎入門 dom 基礎欄目 JavaScript 简体版

原文原文鏈接

JavaScript零基礎入門——（十）JavaScript的DOM基礎

歡迎你們回到咱們的JavaScript零基礎入門，上一節課，咱們瞭解了JavaScript中的函數，這一節課，咱們來了解一下JavaScript的DOM。css

第一節課咱們講過，JavaScript中的DOM，是Document Object Model的縮寫，即文檔對象模型。在網頁上，組織頁面（或文檔）的對象被組織在一個樹形結構中，DOM就是用來表示和處理一個HTML或XML文檔的經常使用方法。咱們經過JavaScript能夠操做DOM。html

根據DOM，HTML文檔的每個成分，都是一個節點。DOM 是這樣規定的：整個文檔是一個文檔節點，即document節點，用<document></document>包裹；每一個 HTML 標籤是一個元素節點，用<html></html>等HTML標籤包裹；包含在 HTML 元素中的文本是文本節點，這種節點沒有標籤包裹；每個 HTML 屬性是一個屬性節點，如href等屬性；註釋屬於註釋節點，用包裹。chrome

DOM節點樹中，節點彼此之間擁有層級關係，在這個關係網中，有父、子和同胞三種關係。父節點（parent）擁有子節點（child），而同級的子節點被稱爲同胞（sibling），也稱爲兄弟節點。在節點樹中，頂端節點被稱爲根節點（root），除了父節點，每一個節點都有父節點，一個父節點能夠擁有不少子節點，同胞節點擁有相同的父節點。微信

在JS中，咱們能夠經過如下方式獲取節點或節點集合：函數

document.getElementById：經過ID獲取元素節點，返回單節點；
document.getElementsByTagName：經過標籤名稱獲取元素節點，返回節點集合；
document.getElementByClassName：經過樣式名獲取元素節點，返回節點集合；
document.getElementsByName：經過元素節點name屬性獲取節點，返回節點集合；
document.querySelector：這個屬於css選擇器，按照css選擇的規則，選擇對應的元素；
document,querySelectorAll：這個與第5點相同，只不過選擇的是元素集合。

除此以外，咱們能夠經過parentNode來獲取父節點；用過childNodes來獲取子節點，可是childNodes是有兼容性問題的，在IE6-8中，使用ChildNodes不會計算文本節點，但chrome、FireFox、IE9+會計算文本節點。因此，咱們有可替代的方法，就是children，他只會處理元素節點。學習

同時，咱們能夠經過firstChild和lastChild來獲取首尾子節點，但仍是那個問題，存在兼容性問題，會計算文本節點，因此JS提供了firstElementChild和lastElementChild來解決這個問題，他們只計算文本節點。spa

接着咱們來講說同胞節點，咱們能夠經過previousSibling和nextSibling來獲取先後同胞節點，一樣的，兼容問題依然存在，JS依舊提供了previousElementSibling和nextElementSibling來解決問題。視頻

好吧，這節課帶你們學習了DOM基礎，比較理論，你們要本身消化一下，下一節課，帶你們一塊兒學習DOM操做。htm

若是想跟着振丹繼續學習，能夠微信關注【振丹敲代碼】（微信號：JandenCoding）對象

新博文微信同步推送，還附有講解視頻哦~

也可直接掃描下方二維碼關注。