HTML DOM（學習筆記一）

時間 2019-11-19

標籤 html dom 學習筆記欄目 HTML 简体版

原文原文鏈接

嗯，工做也有一段時間了，對編程的認識也深刻了一些，之前認爲HTML/CSS/JAVASCRIPT是比較簡單的，看網上的教程就能夠了，W3C是我學習這些知識常去的一個網站，很是感謝她讓我學習到了更多的一些關於前端的知識，不過如今我不這樣看了，前端工程師們最主要的就是經過這些來工做的（固然考慮的問題確定是更多更廣更深刻了，架構問題、兼容性問題、性能問題、還有各類插件、JS庫以及前端的各類工具等等），這些內容是很是豐富的，我也是挺感興趣的而且以爲這樣更爲專業！至少讓我以爲比每天，修改BUG、爲客戶修改數據、寫一些文檔、測試、發佈、來回的幾個項目間切換要好玩一些！之前寫博客總想寫一些他人歷來沒有寫過的、本身親身經歷的、對他人和本身而言又是有一些價值的東西！如今我以爲本身的學習心得體會也是要記錄下來的，畢竟即便簡單的知識，若是不經常的使用也會隨着時光的流逝而漸漸模糊的，記錄下來、即便是按照本身的理解整理一下也能加深本身對知識的理解的！我不是天才，腦殼裏沒有公式、沒有代碼、沒有對待世界特別的一種理解方式，那我就選擇腳踏實地的一步一個腳印的走！html

1：HTML DOM 是什麼？前端

先來看一下一個簡單的HTML文檔的結構數據庫

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel=stylesheet href="">
        <meta charset="UTF-8">
        <title>文檔標題</title>
    </head>
    <body>
        <div>文本內容</div>
        <div>
             <div></div>
        </div>
        <table></table>
    </body>
</html>

若是咱們將此文檔整個的順時針旋轉90度就會看到以下的樣子編程

HTML DOM 的英文全稱是：Hyper Text Markup Language Document Object Model 翻譯成中文是，超文本標記語言的文檔對象模型。個人理解是將HTML文檔換一種視角來看待的方式，當作是一棵倒掛的DOM樹，對HTML文檔的操做能夠當作是對DOM樹的操做，HTML文檔中的一切都映射在這一棵DOM樹上！服務器

W3C的解釋是：DOM是W3C的標準，DOM定義了訪問HTML和XML文檔的標準（W3C DOM 是中立於平臺和語言的接口，它容許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。）W3C標準被分紅3個不一樣的部分：前端工程師

1）核心DOM——針對任何結構化文檔的標準模型架構

2）XML DOM——針對XML文檔的標準模型工具

3）HTML DOM——針對HTML文檔的模型性能

咱們這裏僅關心HTML DOM，官方的描述他是：學習

1）HTML 的標準對象模型

2）HTML的標準編程接口

3）W3C標準

HTML DOM 定義了全部的HTML元素的對象和屬性，以及訪問他們的方法。簡單點講，HTML DOM 是關於如何獲取、修改、添加或者刪除HTML元素的標準。也就是換一種方式操做HTML文檔的方法，主要的就是加上的JAVASCRIPT這門腳本語言的參與，對HTML文檔進行操做！

2：HTML DOM 的做用是什麼？

嗯，最主要的就是加強了網站的動態交互性，由於可使用JAVASCRIPT或者服務器端的腳原本控制HTML文檔了！

3：HTML DOM 的內容關鍵點是什麼？

我以爲將HTML文檔換成DOM樹的這種視角來看待後，在對DOM樹來操做，不管是修改、添加、刪除、或者是改變節點的結構或者是樣式，第一步老是要先得到一個節點的，就像對數據庫裏的數據進行操做同樣增刪改查，查的地位是至關重要的！因此，我門對待查詢的方法和屬性是要特別用心來學習的！

4：HTML DOM 的基本內容？

學習HTML DOM以前是須要了解HTML/CSS/JAVASCRIPT的，就像下圖所表達的同樣，只有這四者的配合才能更加靈活多變豐富多彩的展示出更加好玩的網頁！

固然，使用DOM樹的方式來表達HTML文檔，也必須有本身的一套控制的方式方法的，咱們要全面的轉換視角。咱們須要學習一些獲取DOM樹中節點的方法、修改節點的方法、添加節點的方法、刪除節點的方法；改變節點的樣式、結構等等，須要學習一些各類類型的節點以及節點的屬性相關的內容，和HTML聯繫起來，咱們須要知道某個節點是什麼標籤、他的屬性、他的事件、他與其餘節點的聯繫等等的內容，你能想到的更加合理和控制DOM樹的方式、方法、屬性、事件等等HTML DOM 都爲咱們想到了，這些就是咱們須要學習的內容啦！

嗯，此篇的目標是讓我對HTML DOM有一個比較清晰的認識，讓我知道她是什麼、有什麼用、有哪些內容，而後我載慢慢的將它的內容補充上來！感謝W3C!