AJAX基礎（三）——DOM基礎及DOM操縱HTML

時間 2019-11-10

標籤 ajax 基礎 dom 操縱 html 欄目 Ajax 简体版

原文原文鏈接

DOM的概念

DOM= Document Object Model，文檔對象模型，DOM能夠以一種獨立於平臺和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的經常使用方法。有一點 DOM很重要，DOM的設計是以對象管理組織（OMG）的規約爲基礎的，所以能夠用於任何編程語言。最初人們把它認爲是一種讓JavaScript在瀏覽器間可移植的方法，不過DOM的應用已經遠遠超出這個範圍。Dom技術使得用戶頁面能夠動態地變化，如能夠動態地顯示或隱藏一個元素，改變它們的屬性，增長一個元素等，Dom技術使得頁面的交互性大大地加強。 javascript

Javascript中DOM實現可使得咱們在AJAX中經過Javascript代碼對HTML和XML數據進行DOM方式的操做，從而作到頁面的動態修改更新和數據的提取處理。 html

DOM對象樹

DOM將每個HTML或XML的文檔都看待成內存中的一個對象樹。 java

瀏覽器中的一個頁面對應一個HTML文檔，所以有一顆與之對應的HTML的DOM樹。 node

瀏覽器中一個頁面可能處理不少個XML的文檔，所以可能有不少顆XML的DOM樹。編程

DOM對象樹種的經常使用節點

在DOM樹種文檔內容對應了不少不一樣類型的節點，他們都是一個NODE對象。 api

DOM 代碼中最經常使用的任務就是在頁面的DOM樹中導航。比方說，能夠經過其「id」屬性定位一個form，而後開始處理那個form中內嵌的元素和文本。其中可能包含文字說明、輸入字段的標籤、真正的input 元素，以及其餘HTML 元素（如img）和連接（a元素）。若是元素和文本是徹底不一樣的類型，就必須爲每種類型編寫徹底不一樣的代碼。若是使用一種通用節點類型狀況就不一樣了。這時候只須要從一個節點移動到另外一個節點，只有當須要對元素或文本做某種特殊處理時才須要考慮節點的類型。若是僅僅在DOM樹中移動，就能夠與其餘節點類型同樣用一樣的操做移動到元素的父節點或者子節點。只有當須要某種節點類型的特殊性質時，如元素的屬性，才須要對節點類型做專門處理。將DOM樹中的全部對象都看做節點能夠簡化操做。記住這一點以後，接下來咱們將具體看看DOM節點構造應該提供什麼，首先從屬性和方法開始。數組

NODE對象有一個nodeType的屬性可用於判斷節點類型：瀏覽器

接口 app	nodeType常量（IE不支持） dom	nodeType值	備註
Element	Node.ELEMENT_NODE	1	元素節點（標籤）
Atrr	Node.ATTRIBUTE_NODE	2	屬性節點（屬性）
Text	Node.TEXT_NODE	3	文本節點（文本）
Comment	Node.COMMENT_NODE	8	註釋節點（註釋）
Document	Node.DOCUMENT_NODE	9	文本根節點

元素節點是文檔中最多見的節點，HTML或XML文檔中的標籤<body>,<input>,<div>都對應DOM樹中的元素節點。

屬性節點表示的是一個元素節點上定義的某個屬性，例如<input>中定義的value屬性就對應DOM樹種的一個屬性節點。

文本節點表示文檔中的一段文字信息，例如HTML文檔中定義<div>abcdef</div>其中的「abcdef」就是一個文本節點。

註釋節點對應文檔中的註釋信息，例如<!—Comment Message-->的內容就是一個註釋節點。

根節點顧名思義，表示的整個文檔的根，可是須要注意它不對應文檔中的任何內容。

在Javascript中有一個特殊的對象document，它能夠表示當前HTML頁面的根節點。

DOM對象樹不一樣節點的名值對比：

節點	nodeName（節點名）	nodeValue(節點值)	nodeType值
Element元素節點	對應標籤名的大寫形式，如：HTML	Null	1
Attr屬性節點	文檔中定義的屬性名，如：type	文檔中定義的屬性值如：button	2
Text文本節點	#text	文本內容，如：133	3
Comment註釋節點	#comment	註釋內容，如：comment	8
Document根節點	#document	Null	9

根節點的屬性和方法

屬性	描述
documentElement	表示文檔的根元素節點在HTML文檔中，它表示<html>這個標籤表明的元素節點
方法	描述
getElementById()	返回文檔中具備制定id屬性的Element節點方法參數爲節點的id的屬性值
getElementByTagName（）	以數組方式返回文檔中具備制定標籤的Element節點，其書序爲在文檔中出現的順序標籤名指的是像body，table這樣的HTML標籤方法參數爲標籤名稱。
createElement()	用指定的標記名建立新的Element節點對象方法參數爲節點標籤的名字
createTextNode()	用指定的文本建立新的文本節點對象方法參數爲文本信息
createAttibute()	用指定名字建立新的Attr節點對象方法參數爲屬性的名字
createComment()	用指定的字符串建立新的Comment節點對象方法參數爲註釋信息

<script type="text/javascript" >

            function testapi(){
                //得到根節點元素
                var htmlrootElement=document.documentElement;
                //得到指定的元素節點
                var divNode=document.getElementById("div1");
                //得到整個頁面全部的div元素節點
                var divNodes=document.getElementsByTagName("div");
                //建立元素節點
                var newdivNode=document.createElement("div");
                //建立文本節點
                var newTextNode=document.createTextNode("aaaa");
            }
</script>

元素節點的屬性和方法

屬性	描述
tagName	元素節點對應的標籤的大寫名字，例<table>元素的標籤名字爲Table
方法	描述
getElementsByTabName()	以數組方式返回當前與元素節點的子孫節點中具備指定標籤名的全部元素節點，其准許爲在文檔中出現的順序方法參數爲節點的標籤名
getAttribute()	以字符串形式返回指定屬性的值方法參數爲屬性名稱
getAttributeNode()	以屬性節點對象的形式返回指定屬性的值方法參數爲屬性名稱
setAttribute()	設置指定的屬性的值，若是該屬性不存在則添加新屬性方法的第一個參數爲屬性的名稱方法的第二個參數爲屬性的值
setAttributeNode()	把指定的屬性節點添加到該元素的屬性列表中方法的參數爲屬性節點對象
has Attribute()	若是該元素具備制定名字的屬性，則返回true
removeAttribute()	從元素節點中刪除指定的屬性方法參數爲屬性的名稱
removeAttributeNode()	從元素節點的屬性列表中刪除指定的Attr節點方法參數爲屬性的名稱

//根據標籤名得到元素節點元素節點的操做：

var divNode2=document.getElementById("div2");
                var divNodes2=divNode2.getElementsByTagName("div");             
                //操做屬性
                var inputtext=document.getElementById("inputtext");
                var flag=inputtext.hasAttribute("value");
                inputtext.setAttribute("value", "aaacede");
                var textValue=inputtext.getAttribute("value");
                flag=inputtext.hasAttribute("value"); 
                inputtext.removeAttribute("value");
                alert("完成");

另外一種操做元素屬性的方法：

//另外一種操做元素屬性的方法 
inputtext.value="另外一種操做元素屬性的方法";

兩種方法的差別（以onclick事件爲例）：

當咱們操縱按鈕單擊事件時，第一種方式不顯示結果，而第二種方式才顯示

var clic=document.getElementById("clic"); 
//不顯示結果，操縱無效
clic.setAttribute("onclick", function(){alert("不顯示")});
//顯示結果，操縱有效
 clic.onclick=function(){alert("顯示")};

屬性節點的屬性和方法（由於不多用，因此這裏就不舉例了）：

屬性	描述
Name	屬性名
Value	屬性值

全部節點（Node）都擁有的屬性和方法

屬性	描述
attributes	表示該節點的全部屬性節點對象的數組
nodeType	表明節點的類型
nodeName	返回節點的名字
nodeValue	表明節點的內容
childNodes	當前節點的全部子節點數組，若是沒有子節點，則返回空數組
parentNode	返回當前節點的父節點，若是沒有父節點，則返回null
firstChild	返回當前節點的一個子節點，若是沒有子節點，則返回null
lastChild	返回當前節點的最後一個子節點，若是沒有子節點，則返回null
nextSibling	返回當前節點的下一個兄弟節點。若是沒有這樣的節點，則返回null
previousSibling	返回當前節點的上一個兄弟節點，若是沒有這樣的節點則返回null
方法	描述
hasChildNodes()	若是當前節點擁有子節點，則返回true
appendChild()	給當前節點增長一個子節點，增長的子節點位於當前節點的全部子節點的末尾方法參數爲Node對象
InsertBefore()	插入一個節點，爲止在當前節點的指定子節點以前，若是指定子節點不存在，則執行效果和appendChild方法相同。若是插入的已是當前節點的子節點，則將這個節點移動到指定節點前方法第一個參數是要插入的節點。方法的第二個參數是當前節點的指定子節點，新插入的節點位於這個節點以前。
removeChild()	從文檔樹中刪除當前節點的指定子節點，同時返回指定的子節點。方法的參數是呀哦刪除的子節點。
replaceChild()	用另外一個節點替換當前節點的一個子節點，而且返回指定的子節點。方法第二個參數是新的子節點。方法第二個參數是被替換的子節點。
cloneNode()	複製當前節點，或者複製當前節點以及它的全部子孫節點。方法參數爲true或false。True表示遞歸的複製全部子孫節點，false表示只複製當前節點。

IE與FireFox的DOM對象樹差別

1.　IE會把一些沒有在文檔中定義的屬性也加入DOM樹。

2.　IE不會把title中的文本內容加入DOM樹。

3.　IR會把換行縮進這樣的信息過濾掉，FireFox則會認爲是有用的文本內容，並做爲文本節點的一部分加入DOM樹。

4.　IE不會把script標籤中的內容加入DOM樹，FireFox將裏面的內容加入DOM樹。

AJAX,DOM 和javascript的關係

DOM可以爲javascript引擎公開網頁。經過DOM，能夠採用編程的方式操做文檔的結構。Web頁面的DOM表示是一個樹狀結構，由元素或點組成。節點能夠包含不少子節點。javascript經過全局變量document公開當前Web葉夢得根節點，這個變量是全部DOM操做的起點。DOM使用容器的屬性來作索引，而不是使用數字作索引。DOM中元素的關係能夠看做是HTML清單的鏡像。這種關係能夠是雙向的，修改DOM將改變HTML標記，隨之會反映在頁面的現實上。