科技

【前端系列】Javascript 的重要構成部分—DOM

一、Javascript dom是什麼?

首先,在講解Javascript dom基本概念之前,老司機給說說Javascript的基本構成。

JavaScript的實現包括以下3個部分:

(1)核心(ECMAScript):描述了JS的語法和基本物件;

(2)文件物件模型 (DOM):處理網頁內容的方法和介面;

(3)瀏覽器物件模型(BOM):與瀏覽器互動的方法和介面;

Dom全稱文件物件模型(Document Object Model), 可以訪問和修改一個文件的內容和結構。換句話說,這是一個處理HTML或XML文件的常用方法。DOM 可被 JavaScript 用來讀取、改變 HTML 文件,比如新增某些元素、修改元素的內容、刪除某些元素。

二、Html dom節點樹模型

對於Html文件,DOM模型將整個HTML文件看成一個樹形結構。在DOM中,HTML文件的層次結構被表示為一個樹形結構,並用document物件表示該文件,樹的每個子節點表示HTML文件中的不同內容,比如

,等等。每個載入瀏覽器的 HTML 文件都會成為document物件,利用全域性變數document可以 HTML 文件

三、 Javascript dom用法之一: 查詢元素

通過 JavaScript操作 HTML 元素,首先必須找到元素。可以通過3種方法查詢元素:

1. 通過 id 找到 HTML 元素

通過使用元素的 id在 DOM 中查詢 HTML 元素,是最簡單的方法。

如下例,通過id找到了

元素

2. 通過標籤名找到 HTML 元素

首先查詢 id="main" 的元素,然後查詢 "main" 中的所有

元素:

3. 通過類名找到 HTML 元素

以上只是關於Javascript dom 的基本概念和簡單用法,事實上,dom遠遠不止這麼簡單。言而總之,dom就是連線html與Javascript之間的“橋樑”。如果你想對dom有深入的瞭解,程式設計老司機推薦你一本書《Javascript dom 程式設計藝術》。讀完此書,瞬間又暢快淋漓之感,值得推薦這本書和視屏資料的同學可以轉發關注小編私信小編“學習”

Reference:科技日報

看更多!請加入我們的粉絲團

轉載請附文章網址

不可錯過的話題