DOM操作--你究竟知道多少

CoyPan 發布于2019-08-29 13:02 / 1892人閱讀

摘要：分為以下兩個階段處理文檔瀏覽器將和轉化成文檔對象模型。在計算機內存中表示文檔。它把文檔內容和其樣式結合在一起。瀏覽器顯示的內容。這些節點由他們與其他節點的關系來定義。如何操作由于和轉化成了樹，要改變的結構，就需要通過來操作。

前言

DOM常常掛在我們嘴邊，但是我們又是否理解它呢？帶著這個疑問我開始了

CSS如何工作？

但瀏覽器顯示文檔時，它必須將文檔的內容與其樣式信息結合。分為以下兩個階段處理文檔：

瀏覽器將HTML和CSS轉化成DOM（文檔對象模型）。DOM在計算機內存中表示文檔。它把文檔內容和其樣式結合在一起。

瀏覽器顯示DOM的內容。

關于DOM

DOM是一種樹形結構。標記語言中的每個元素、屬性、文本片段都變為一個DOM節點。這些節點由他們與其他DOM節點的關系來定義。

如何操作DOM

由于HTML和CSS轉化成了DOM樹，要改變HTML的結構，就需要通過javascript來操作DOM。
操作一個DOM節點有如下幾個操作：

更新：更新該節點表示的HTML內容

遍歷：遍歷該節點下的子節點，然后可以按需操作

添加：在改DOM節點下動態增加一個HTML子節點

刪除：把該節點從HTML中刪除，刪除內容包括幾點內容和其下面子節點內容

操作代碼

1、獲取節點

var test = document.getElementById("test");
var tr = document.getElementsByTagName("tr");//返回DOM數組
var test_tr = test.getElementsByTagName("tr");//返回DOM數組
var class_tr = document.getElementsByClassName("tr_class");//返回DOM數組
var test_parent = test.parentElement;
var test_parent = test.parentNode;
var next_el = test.nextElementSibling;
var previous_el = test.previousElementSibling;
var test_child = test.children;
var test_first_child = test.firstElementChild;
var test_last_child = test.lastElementChild;
//新方法低版本IE<8不支持
var test = document.querySelector("#test");
var tr = document.querySelectorAll("#test tr");//返回的是DOM數組

2、創建節點

var el = document.createElement("div");//標簽
var node_txt = document.createTextNode("hell world");//HTML屬性

3、DOM更改

// 添加、刪除子元素
test.appendChild(el);
test.removeChild(el);

// 替換子元素
test.replaceChild(el1, el2);

// 插入子元素
var el3 = document.createElement("p");
test.insertBefore(el3, el);

4、屬性操作

// 獲取一個{name, value}的數組
var attrs = test.attributes;

// 獲取、設置屬性
var className = test.getAttribute("class");
test.setAttribute("class", "test_class");

// 判斷、移除屬性
test.hasAttribute("class");
test.removeAttribute("class");

// 是否有屬性設置
test.hasAttributes();

思考

vue.js、handlebar.js、react.js等等，DOM操作實質是什么？有什么區別？哪個速度更快性能根好，為什么？

云服務器 GPU云服務器你知道你應該知道數據分析知道你百度一下你就知道了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112325.html

DOM操作--你究竟知道多少

摘要：分為以下兩個階段處理文檔瀏覽器將和轉化成文檔對象模型。在計算機內存中表示文檔。它把文檔內容和其樣式結合在一起。瀏覽器顯示的內容。這些節點由他們與其他節點的關系來定義。如何操作由于和轉化成了樹，要改變的結構，就需要通過來操作。前言 DOM常常掛在我們嘴邊，但是我們又是否理解它呢？帶著這個疑問我開始了 CSS如何工作？但瀏覽器顯示文檔時，它必須將文檔的內容與其樣式信息結合。分為以下兩個...

clasnake 2019-08-20 18:22 評論0 收藏0
DOM操作--你究竟知道多少

摘要：分為以下兩個階段處理文檔瀏覽器將和轉化成文檔對象模型。在計算機內存中表示文檔。它把文檔內容和其樣式結合在一起。瀏覽器顯示的內容。這些節點由他們與其他節點的關系來定義。如何操作由于和轉化成了樹，要改變的結構，就需要通過來操作。前言 DOM常常掛在我們嘴邊，但是我們又是否理解它呢？帶著這個疑問我開始了 CSS如何工作？但瀏覽器顯示文檔時，它必須將文檔的內容與其樣式信息結合。分為以下兩個...

13651657101 2019-08-01 17:16 評論0 收藏0
[譯] 究竟什么是DOM？!

摘要：是我寫的嗎還是我偶爾打開控制臺檢查元素的時候點擊的元素說實話，我花了好長時間才弄明白究竟是什么。什么簡單來說，是在瀏覽器中的表示形式，允許您操縱頁面。那么為什么它經常被稱為樹呢這是因為從一個父項開始，該父項擴展為子項。原文自工程師Kara Luton博客，傳送門 DOM，當我第一次在訓練營學習編碼時，就一直聽到這個詞，但是我從來不知道它到底是什么意思。是我寫的HTML嗎？還是我偶爾...

winterdawn 2019-08-02 14:33 評論0 收藏0
[譯] 究竟什么是DOM？!

摘要：是我寫的嗎還是我偶爾打開控制臺檢查元素的時候點擊的元素說實話，我花了好長時間才弄明白究竟是什么。什么簡單來說，是在瀏覽器中的表示形式，允許您操縱頁面。那么為什么它經常被稱為樹呢這是因為從一個父項開始，該父項擴展為子項。原文自工程師Kara Luton博客，傳送門 DOM，當我第一次在訓練營學習編碼時，就一直聽到這個詞，但是我從來不知道它到底是什么意思。是我寫的HTML嗎？還是我偶爾...

church 2019-08-26 18:18 評論0 收藏0