JS中DOM如何操作
- 小云云原創
- 2018-03-19 17:05:212521瀏覽
DOM即Document Object Model 是W3C (萬維網聯盟)的標準，DOM定義訪問HTML 和XML 的標準: W3C文檔對像模型(DOM)是中立於平台和語言的接口, 它允許程序和腳本動態的訪問和更新文檔的內容,結構和樣式。
W3C Dom 標準被分為3 個不同的部分: 1.核心DOM -針對任何結構化文檔的標準模型2.XML DOM -針對XML文檔的標準模型3.HTML DOM - 針對HTML文檔的標準模型
其中在HTML DOM 中,所有事物都是節點, DOM 是被視為節點數的HTML.1.整個文檔是一個文檔節點2.每個HTML元素是元素節點3. HTML元素內的文字是文字節點4.每個HTML屬性是屬性節點5.註解是註解節點
HTML DOM將HTML文件視為樹結構, 這種結構稱為節點樹, 透過HTML DOM,樹中的所有節點均可透過JavaScript 存取, 所有HTML節點(元素)均可被修改,也可以建立或刪除節點.
一些常用的HTML DOM 方法:1.getElementById( id)-取得帶有指定id的節點(元素) 2.appendChid(node)-插入新的子節點(元素) 3.removeChild(node)-刪除子節點(元素)
#一些常用的HTML DOM屬性: 1.innerHTML-節點(元素)的文字值2.parentNode-節點(元素)的父節點3.childNodes-節點(元素)的子節點4..attributes-節點(元素)的屬性節點
DOM操作
建立元素
var newp = document.createElement("p");設定類別名稱newp.className = "item";設定ID
newp.id = "first";設定背景色newp.style.background = "red";新增元素box 進body中
#先取得要新增的元素
var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName("box")[0];body.appendChild(newp);//body中現有兩個內容, 一個是newp 一個是box //現在的情況是把newp的內容插到box後面
要想把p中的內容插入到box的前面則如下: body.insertBefore(newp , box);刪除元素body.removeChild( box);//刪除box標籤box.remove();DOM屬性
節點: 標籤文字註解宣告(doctype)
可以透過以下方法取得元素下單所有節點: console. log(box.childNodes); 取得標籤類型的子節點, 得到的節點是一個標籤console.log(box.cheildren[0]);尺寸位置console.log(newp.offsetWidth);//列印寬度包含邊框console .log(newp.clientWidth);//不含邊框也不含滾動條(可視區域) console.log(newp.scrollHeight);//也是元素垂直/ 水平滾動了的距離, 或者是元素捲簾卷走的視覺看不到的部分overflow 處理超出部分visible預設可見overflow:scroll; //出現捲軸位置相對於定位父級的一個位置console.log(newp.offsetTop); console.log(newp.offsetLeft) ;子元素滾動上去的一段距離, 除了scrollTop外,以上元素都是只讀console.log(newp.scrollTop)
定時器
一次性計時器, 只能使用一次
寫法1: var time = setTimeout(function(){ console.log("一次性定時器"); },1000);寫法2: function f1(){ console.log("一次性定時器"); } setTimeout(f1,1000);清除一次性定時器clearTimeout(time);循環計時器, 每隔一段時間,就會執行一次函數
寫法1: var timer = setInterval (funtion(){ console.log("循環計時器"); })var timer = setInterval(f2 , 1000);清除循環計時器clearInterval(timer);DOM是HTML文檔結構其實就是為了能JS操作html元素而製定的一個規範, dom的根本就是document物件,該物件有很多屬性和放法例如創建節點複製節點移除節點修改屬性等DOM物件的出現是為了方便javascript 操作HTML標籤而已, DOM全面為Document Object Model (文檔物件模型), 也是基於HTML 文件出來的, 提供給Javascript用來動態(比如點擊事件)修改文檔的狀態, 所以操作DOM就是在操作HTML文檔對象(每一個標籤)
# CSS就是將HTML文檔樣式而已,而javascript能把HTML和CSS結合, 也就是以前所說的DHTML(動態HTML)
#DOM就是將XML (或者HTML)內的節點定義成基本統一的物件資料可以提供程式語言(如javascript) 控制的技術規格
可以使用javascript語言來操作DOM以改變網頁,為了改變網頁,你必須告訴Javascript操作哪一個節點,這就是操作DOM
操作DOM可以讓你改變網頁的互動方式.所有網頁的互動都依賴這種DOM技術,即使不用Javascript,也可以使用其他語言來操作DOM
DOM是一棵樹,數值和樹葉都做了編號, 你告訴一個腳本一個函數去尋找那一個枝幹的哪一個葉子,對這個這個葉子要做什麼改變
#當你在知乎的搜索欄輸入數據時,Javascript 捕捉到了你的輸入,對伺服器使用非同步查詢, 動態顯示搜尋結果.
#當你向下滑動, Javascript 捕捉到了你滑動的距離,根據距離的大小來判斷是否改變, DOM, 進而讓頂部的導航欄跟隨瀏覽器視窗滾動,免得你回頭去找.
當你點擊修改按鈕時, javascript , 捕獲到了這個按鈕的滑鼠點擊事件,反饋了一個可編輯的答案給你
Javascript 不能夠真正改變DOM 他僅僅是改變呈現的內容,當你刷新的時候就會發現呈現的內容消失了.
但是你可以把這些改變用請求的方式傳遞給後端語言接口, 由後端語言PHP Python Java Node 等來進行後續的操作, 他們接到你的請求之後就去修改伺服器資料,這樣改變就生效了刷新後不會消失了
但是用戶的交互比如彈出窗口滑過變色等等根本沒必要讓伺服器也跟著攙和原因是交互只是暫時的用完了還要變成預設的不需要保存到伺服器只要保證交互的時候有反饋就可以了.
HTML 表達靜態結構(網頁的基本元素每個元素的基本功能元素的基本功能可以產生什麼意義,這個意義能產生什麼樣的內容)
CSS 呈現層次美化(元素的基本及特殊屬性元素的形狀,狀態,元素的佈局)
Javascript 負責動態互動(操作DOM使用AJAX 進行非同步刷新, 與伺服器互動) 該連結介紹的還不算錯. https://www.zhihu.com/question/34219998/answer/58211568DOM是Javascript操作網頁的接口, 全稱叫文檔物件模型(Document Object Model) 他的作用是將網頁轉化為一個javascript物件, 從而用Javascript腳本進行各種操作(比如增刪元素等)
瀏覽器會根據DOM模型,將結構文檔化(例如HTML 或XML等) 解析成一系列的節點, 再由這些節點解析成樹狀結構(Dom Tree), 所有的節點和最終的樹狀結構都有規範的對外接口, 所以DOM可以理解成網頁的程式介面. DOM有標準的國際標準, 我們目前使用的是DOM3
嚴格的來說DOM 不屬於Javascript 但是DOM操作是Javascript最常見的任務而Javascript 最常見的任務最常見的DOM操作語言.
DOM
DOM即Document Object Model 是W3C (萬維網聯盟)的標準
DOM定義存取HTML 和XML 的標準: W3C文件物件模型(DOM)是中立於平台和語言的介面, 它允許程式和腳本動態的存取和更新文件的內容,結構和樣式
W3C Dom 標準被分為3 個不同的部分: 1.核心DOM -針對任何結構化文件的標準模型2.XML DOM -針對XML文檔的標準模型3.HTML DOM - 針對HTML文檔的標準模型
其中在HTML DOM 中,所有事物都是節點, DOM 是被視為節點數的HTML.1.整個文件是一個文件節點2.每個HTML元素是元素節點3.HTML元素內的文字是文字節點4.每個HTML屬性是屬性節點5.註解是註解節點
# HTML DOM將HTML文檔視為樹結構, 這種結構稱為節點樹, 透過HTML DOM,樹中的所有節點均可透過JavaScript 進行存取, 所有HTML節點(元素)均可被修改,也可以創建或刪除節點.
一些常用的HTML DOM 方法:1.getElementById(id)-取得指定id的節點(元素) 2.appendChid(node)-插入新的子節點(元素) 3 .removeChild(node)-刪除子節點(元素)
一些常用的HTML DOM屬性: 1.innerHTML-節點(元素)的文字值2.parentNode-節點(元素)的父節點3.childNodes -節點(元素)的子節點4..attributes-節點(元素)的屬性節點
DOM操作
建立元素
var newp = document.createElement(" p");設定類別名稱newp.className = "item";設定ID
newp.id = "first";設定背景色newp.style.background = "red";新增元素box 進body中
先取得要加入的元素
var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName("box")[0];body. appendChild(newp);//body中現有兩個內容, 一個是newp 一個是box//現在的情況是把newp的內容插到box後面
要想把p中的內容插入到box的前面則如下: body.insertBefore(newp , box);刪除元素body.removeChild(box);//刪除box標籤box.remove();DOM屬性
#節點: 標籤文字註解聲明( doctype)
可以透過以下方法取得元素下單所有節點: console.log(box.childNodes); 取得標籤類型的子節點, 得到的節點是一個標籤console.log(box.cheildren[0 ]);尺寸位置console.log(newp.offsetWidth);//列印寬度包含邊框console.log(newp.clientWidth);//不含邊框也不包含捲軸(可視區域) console.log(newp. scrollHeight);//也是元素垂直/ 水平滾動了的距離, 或者是元素捲簾捲走的視覺看不到的部分overflow 處理超出部分visible默認可見overflow:scroll; //出現滾動條位置相對於定位父層級的一個位置console.log(newp.offsetTop); console.log(newp.offsetLeft);子元素滾動上去的一段距離, 除了scrollTop外,以上元素都是只讀console.log(newp.scrollTop)
定時器
一次定時器, 只能使用一次
寫入法1: var time = setTimeout(function(){ console.log("一次性定時器") ; },1000);寫法2: function f1(){ console.log("一次性定時器"); } setTimeout(f1,1000);清除一次性定時器clearTimeout(time);循環計時器, 每隔一段時間,就會執行一次函數
寫法1: var timer = setInterval(funtion(){ console.log("循環計時器"); })var timer = setInterval(f2 , 1000);清除循環定時器clearInterval(timer);DOM是HTML文檔結構其實就是為了能JS操作html元素而製定的一個規範, dom的根本就是document對象,該對像有很多屬性和放法例如創建節點複製節點移除節點修改屬性等DOM物件的出現是為了方便javascript 操作HTML標籤而已, DOM全面為Document Object Model (文檔物件模型), 也是基於HTML 文件出來的, 提供給Javascript用來動態(例如點擊事件)修改文件的狀態, 所以操作DOM就是在操作HTML文檔物件(每一個標籤)
CSS就是將HTML文檔樣式而已,而javascript能把HTML和CSS結合, 也就是以前所說的DHTML(動態HTML)
DOM就是將XML (或HTML)內的節點定義成基本統一的物件資料可以提供程式語言(如javascript) 控制的技術規格
可以使用javascript語言來操作DOM以改變網頁,為了改變網頁,你必須告訴Javascript操作哪一個節點,這就是操作DOM
操作DOM可以讓你更改網頁的交互方式.所有網頁的交互都依賴這種DOM技術,即使不用Javascript,也可以使用其他語言來操作DOM
DOM是一棵樹,數值和樹葉都做了編號, 你告訴一個腳本一個函數去尋找那一個枝幹的哪一個葉子,對這個這個葉子要做什麼改變
當你在知乎的搜尋欄輸入資料,Javascript 擷取到了你的輸入,對伺服器使用非同步查詢, 動態顯示搜尋結果.
當你向下滑動, Javascript 捕捉到了你滑動的距離,根據距離的大小來判斷是否改變, DOM, 進而讓頂部的導航欄跟隨瀏覽器視窗滾動,免得你回頭去找.
當你點擊修改按鈕時, javascript , 捕獲到了這個按鈕的滑鼠點擊事件,反饋了一個可編輯的答案給你
Javascript 不能夠真正改變DOM 他僅僅是改變呈現的內容,當你刷新的時候就會發現呈現的內容消失了.
但是你可以把這些改變用請求的方式傳遞給後端語言接口, 由後端語言PHP Python Java Node 等來進行後續的操作, 他們接到你的請求之後就去修改伺服器資料,這樣改變就生效了刷新後不會消失了
但是用戶的交互比如彈出窗口滑過變色等等根本沒必要讓伺服器也跟著攙和原因是交互只是暫時的用完了還要變成預設的不需要保存到伺服器只要保證交互的時候有反饋就可以了.
HTML 表達靜態結構(網頁的基本元素每個元素的基本功能元素的基本功能可以產生什麼意義,這個意義能產生什麼樣的內容)
CSS 呈現層次美化(元素的基本及特殊屬性元素的形狀,狀態,元素的佈局)
Javascript 負責動態互動(操作DOM使用AJAX 進行非同步刷新, 與伺服器互動) 該連結介紹的還不算錯. https://www.zhihu.com/question/34219998/answer/58211568DOM是Javascript操作網頁的接口, 全稱叫文檔物件模型(Document Object Model) 他的作用是將網頁轉化為一個javascript物件, 從而用Javascript腳本進行各種操作(比如增刪元素等)
瀏覽器會根據DOM模型,將結構文檔化(例如HTML 或XML等) 解析成一系列的節點, 再由這些節點解析成樹狀結構(Dom Tree), 所有的節點和最終的樹狀結構都有規範的對外接口, 所以DOM可以理解成網頁的程式介面. DOM有標準的國際標準, 我們目前使用的是DOM3
嚴格的來說DOM 不屬於Javascript 但是DOM操作是Javascript最常見的任務而Javascript 最常見的任務最常見的DOM操作語言.
相关推荐：
以上是JS中DOM如何操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！