DOM樹簡單理解學習

引用自：https://blog.csdn.net/qq_41328247/article/details/80074098

為什么會提到Dom樹呢，或許它對於我們很好地理解網頁各個元素，標簽和控件搭配，以及各種js，css等的加載會有一些幫助。筆者在工程中遇到了一些小問題，本質就是dom樹的東西掌握的不扎實。所以借此來梳理一下。 

1.HTML DOM 
ok, 我們先來看一下W3school中怎么解釋這個概念和結構的。W3school是一個很不錯的網站，很適合初學者和基礎不扎實的人。

HTML DOM 定義了訪問和操作 HTML 文檔的標准方法。DOM 將 HTML 文檔表達為樹結構。 

W3C 文檔對象模型 （DOM） 是中立於平台和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。 
W3C DOM 標准被分為 3 個不同的部分： 
核心 DOM - 針對任何結構化文檔的標准模型 
XML DOM - 針對 XML 文檔的標准模型 
HTML DOM - 針對 HTML 文檔的標准模型 
我們主要來看HTML DOM 
HTML DOM 是： 
HTML 的標准對象模型 
HTML 的標准編程接口 
W3C 標准

DOM 節點 
根據 W3C 的 HTML DOM 標准，HTML 文檔中的所有內容都是節點： 
整個文檔是一個文檔節點 
每個 HTML 元素是元素節點 
HTML 元素內的文本是文本節點 
每個 HTML 屬性是屬性節點 
注釋是注釋節點 

2.獲取節點的原生方法

 

innerHTML 屬性

獲取元素內容的最簡單方法是使用 innerHTML 屬性。

innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。

document.write輸出文本

document.write(document.anchors.length); 錨的數量:  加入anchors[]  可以看成數值尋找索引

document.write(document.forms[0].name);  表單數目

document.write(document.images.length); 圖像數目

document.write(document.images[0].id); 圖像id

document.write(document.links.length); 鏈接數目

document.write(document.domain); 返回區域名

document.write(document.lastModified); 文檔最后一次修改時間

document.write(document.title); 返回文檔標題

document.writeln document write 不同  writeln 新增一行   write 在后面增加

 

 

 

 

 

 

 

getElementById() 方法

getElementById() 方法返回帶有指定 ID 的元素引用：

語法

node.getElementById( "id");

 

1.  
   <p id="intro">Hello World!</p>
2.  
    
3.  
   <script>
4.  
   var txt=document.getElementById("intro").innerHTML;
5.  
   document.write(txt);

 getElementById 是一個方法，而 innerHTML 是屬性。

 

改變 HTML 樣式

通過 HTML DOM，您能夠訪問 HTML 元素的樣式對象

 

1.  
   <p id="p1">Hello world!</p>
2.  
   <p id="p2">Hello world!</p>
3.  
    
4.  
   <script>
5.  
   document.getElementById("p2").style.color="blue";
6.  
   document.getElementById("p2").style.fontFamily="Arial";
7.  
   document.getElementById("p2").style.fontSize="larger";
8.  
   </script>

 

 

 

getElementsByTagName() 方法

getElementsByTagName() 返回帶有指定標簽名的所有元素。

語法

node.getElementsByTagName( "tagname");

 

1.  
   <p>Hello World!</p>
2.  
   <p>DOM 是非常有用的!</p>
3.  
   <p>這個實例演示了 <b>getElementsByTagName</b> 方法的使用。</p>
4.  
    
5.  
   <script>
6.  
   x= document.getElementsByTagName("p");
7.  
   document.write("第一個段落的文本為: " + x[2].innerHTML);
8.  
   </script>

  根據X[ ]尋找索引 然后顯示

例子返回包含文檔中所有 <p> 元素的列表，並且這些 <p> 元素應該是 id="main" 的元素的后代（子、孫等等）

1.  
   <div id="main">
2.  
   <p>DOM 是非常有用的。</p>
3.  
   <p>這個實例演示了 <b>getElementsByTagName</b> 方法的使用。</p>
4.  
   </div>
5.  
    
6.  
   <script>
7.  
   var x=document.getElementById("main").getElementsByTagName("p");
8.  
   document.write(x[0].innerHTML);
9.  
   </script>

 

 

The getElementsByClassName() Method

如果您希望查找帶有相同類名的所有 HTML 元素，請使用這個方法：

document.getElementsByClassName("intro");

如果您希望查找帶有相同類名的所有 HTML 元素，請使用這個方法：

document.getElementsByClassName("intro");

上面的例子返回包含 class="intro" 的所有元素的一個列表：

注意：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中無效。

 

 

 

 

appendChild() 方法  將新節點增加到指定節點

creatElement() 方法 創建屬性節點  

creatTextNode() 方法 創建文本節點

1.  
   <div id="div1">
2.  
   <p id="p1">這是一個段落。</p>
3.  
   <p id="p2">這是另一個段落。</p>
4.  
   </div>
5.  
   <script>
6.  
   var para=document.createElement("p");
7.  
   var node=document.createTextNode("這是一個新段落。");
8.  
   para.appendChild(node);
9.  
   var element=document.getElementById("div1");
10.  
    element.appendChild(para);
11.  
    </script>

 

這段代碼創建了一個新的 <p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您首先必須創建文本節點。這段代碼創建文本節點：

var node=document.createTextNode("這是一個新段落。");

然后您必須向 <p> 元素追加文本節點：

para.appendChild(node);

最后，您必須向已有元素追加這個新元素。

這段代碼查找到一個已有的元素：

var element=document.getElementById("div1");

這段代碼向這個已存在的元素追加新元素：

element.appendChild(para)

 

 

創建新的 HTML 元素 - insertBefore()

appendChild() 方法，將新元素作為父元素的最后一個子元素進行添加。

1.  
   <div id="div1">
2.  
   <p id="p1">這是一個段落。</p>
3.  
   <p id="p2">這是另外一個段落。</p>
4.  
   </div>
5.  
    
6.  
   <script>
7.  
   var para=document.createElement("p");
8.  
   var node=document.createTextNode("這是一個新段落。");
9.  
   para.appendChild(node);
10.  
     
11.  
    var element=document.getElementById("div1");
12.  
    var child=document.getElementById("p1");
13.  
    element.insertBefore(para,child);
14.  
    </script>

 

 

刪除已有的 HTML 元素removechild

1.  
   <div id="div1">
2.  
   <p id="p1">這是一個段落。</p>
3.  
   <p id="p2">這是另一個段落。</p>
4.  
   </div>
5.  
   <script>
6.  
   var parent=document.getElementById("div1");
7.  
   var child=document.getElementById("p1");
8.  
   parent.removeChild(child);
9.  
   </script>

查找 id="div1" 的元素：

var parent=document.getElementById("div1");

查找 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

從父元素中刪除子元素：

parent.removeChild(child);

 

 

替換子節點屬性 replacechild

1.  
   <div id="div1">
2.  
   <p id="p1">這是一個段落。</p>
3.  
   <p id="p2">這是另外一個段落。</p>
4.  
   </div>
5.  
    
6.  
   <script>
7.  
   var parent=document.getElementById("div1");
8.  
   var child=document.getElementById("p1");
9.  
   var para=document.createElement("p");
10.  
    var node=document.createTextNode("這是一個新的段落。");
11.  
    para.appendChild(node);
12.  
    parent.replaceChild(para,child);
13.  
    </script>

 

 

nodeValue 屬性

nodeValue 屬性規定節點的值。

• 元素節點的 nodeValue 是 undefined 或 null
• 文本節點的 nodeValue 是文本本身
• 屬性節點的 nodeValue 是屬性值

childNodes 和 nodeValue

除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內容。

下面的代碼獲取 id="intro" 的 <p> 元素的值：

 

1.  
   <p id="intro">Hello World!</p>
2.  
    
3.  
   <script>
4.  
   txt= document.getElementById("intro").childNodes[0].nodeValue;
5.  
   document.write(txt);
6.  
   </script>

 

 

使用事件

HTML DOM 允許您在事件發生時執行代碼。

當 HTML 元素"有事情發生"時，瀏覽器就會生成事件：

• 在元素上點擊
• 加載頁面
• 改變輸入字段

你可以在下一章學習更多有關事件的內容。

下面兩個例子在按鈕被點擊時改變 <body> 元素的背景色

<input type="button"onclick="document.body.style.backgroundColor='lavender';"value="修改背景顏色">

由函數執行相同的代碼

function ChangeBackground(){

document.body.style.backgroundColor="lavender";

}

</script> <input type="button" onclick="ChangeBackground()" value="修改背景顏色" />

 

 

<</p>

<script>function ChangeText(){

document.getElementById("p1").innerHTML="Hello Runoob!";

}

</script> <input type="button" onclick="ChangeText()" value="修改文本" />

 

對事件作出反應

當事件發生時，可以執行 JavaScript，比如當用戶點擊一個 HTML 元素時。

如需在用戶點擊某個元素時執行代碼，請把 JavaScript 代碼添加到 HTML 事件屬性中：

onclick= JavaScript

 

<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>

 

 

<script>function changetext(id){

id.innerHTML="Ooops!";

}

</script>

</head>

<body>

<h1 onclick="changetext(this)">點擊文本!</h1>

 

 

onload 和 onunload 事件

當用戶進入或離開頁面時，會觸發 onload 和 onunload 事件。

onload 事件可用於檢查訪客的瀏覽器類型和版本，以便基於這些信息來加載不同版本的網頁。

onload 和 onunload 事件可用於處理 cookies

 

1.  
   <body onload="checkCookies()">
2.  
    
3.  
   <script>
4.  
   function checkCookies()
5.  
   {
6.  
   if (navigator.cookieEnabled==true)
7.  
   {
8.  
   alert( "Cookie 可用")
9.  
   }
10.  
    else
11.  
    {
12.  
    alert( "Cookie 不可用")
13.  
    }
14.  
    }
15.  
    </script>
16.  
     
17.  
    <p>頁面載入時，彈出瀏覽器 Cookie 可用狀態。</p>

onchange 事件

onchange 事件常用於輸入字段的驗證。

下面的例子展示了如何使用 onchange。當用戶改變輸入字段的內容時，將調用 upperCase() 函數。

 

1.  
   function myFunction(){
2.  
   var x=document.getElementById("fname");
3.  
   x.value=x.value.toUpperCase();
4.  
   }
5.  
   </script>
6.  
   </head>
7.  
   <body>
8.  
    
9.  
   輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
10.  
    <p>當你離開輸入框后，函數將被觸發，將小寫字母轉為大寫字母。</p>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用於在鼠標指針移動到或離開元素時觸發函數。

1.  
   <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="width:90px;height:20px;padding:40px;">Click Me</div>
2.  
   ​
3.  
   <script>
4.  
   function mDown(obj)
5.  
   {
6.  
   obj.style.backgroundColor= "#1ec5e5";
7.  
   obj.innerHTML= "Release Me"
8.  
   }
9.  
   ​
10.  
    function mUp(obj)
11.  
    {
12.  
    obj.style.backgroundColor= "#D94A38";
13.  
    obj.innerHTML= "Thank You"
14.  
    }
15.  
    </script>

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠標點擊的全部過程。首先當某個鼠標按鈕被點擊時，觸發 onmousedown 事件，然后，當鼠標按鈕被松開時，會觸發 onmouseup 事件，最后，當鼠標點擊完成時，觸發 onclick 事件

 

1.  
   <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="width:120px;height:20px;padding:40px;">Mouse Over Me</div>
2.  
    
3.  
   <script>
4.  
   function mOver(obj)
5.  
   {
6.  
   obj.innerHTML= "Thank You"
7.  
   }
8.  
    
9.  
   function mOut(obj)
10.  
    {
11.  
    obj.innerHTML= "Mouse Over Me"
12.  
    }
13.  
    </script>

 

 

HTML DOM 節點列表長度

length 屬性定義節點列表中節點的數量。

您可以使用 length 屬性來循環節點列表：

1.  
   x=document.getElementsByTagName("p");
2.  
   for (i=0;i <x.length;i++)
3.  
   {
4.  
   document.write(x[i].innerHTML);
5.  
   document.write("<br>");
6.  
   }

• 獲取所有 <p> 元素節點
• 輸出每個 <p> 元素的文本節點的值

DOM 根節點

這里有兩個特殊的屬性，可以訪問全部文檔：

• document.documentElement - 全部文檔
• document.body - 文檔的主體

 

1.  
   <p>Hello World!</p>
2.  
   <div>
3.  
   <p>DOM 是非常有用的!</p>
4.  
   <p>這個實例演示了 <b>document.body</b> 屬性。</p>
5.  
   </div>
6.  
    
7.  
   <script>
8.  
   alert( document.body.innerHTML);
9.  
   </script>

 

    

3.JS中的節點操作 
寫幾個常用的API, 來操作DOM節點。 
(1)document.getElementById()這個是最基本的了。 
(2)object.innerHTML該屬性設置或返回object之間的HTML 
(3)document.createElement()創建節點對象。 
(4)document.body.appendChild()尾部插入結點。 
(5)object.parentNode.removeChild(oChildNode);移除結點

4.jQuery中的結點操作 
(1)添加結點 
a. append()和appendTo(), 兩個方法剛好是對應的一對兒操作。

$('#parentNodeId').append(childNode);

$('#childeNode').appendTo(parentNode);

b. prepend()和prependTo()， 這也是一對兒對應的操作方法。其作用是添加一個結點到父節點中並前置。用法和上一對兒一樣。

c. 與之對應的還有after, insertAfter; before, insertBefore等，其用法都和上面的相同。其效果是將新建的元素插入到指定的元素之后/前，並和目標元素緊鄰，作為兄弟結點存在。

(2)刪除結點 
a. remove() 
remove()方法刪除所有匹配的元素，傳入的參數用於篩選元素，該方法可以刪除元素中所有的子節點，當匹配的節點及后代被刪除后，該方法返回值是指向被刪除結點的引用，因此可以使用該引用，再使用被刪除的元素。

1.  
   $span = $('span').remove();
2.  
   $span.insertAfter('ul');

我們可以看到，該示例中，先刪除所有的span元素，把刪除的元素使用$span接收，把刪除后的元素添加到ul后面，作為ul的兄弟結點。該操作產生的效果即把所有的span元素以及后代元素移到ul后面。 
b. empty() 
empty()方法嚴格來講並不是刪除元素，該方法只是清空節點，它能清空元素中的所有子節點。

(3)修改DOM節點 
a. 復制節點，當clone()方法有參數，並且為true時，表示同時復制該元素的屬性，如果沒有參數，表示不復制屬性。

$(element).clone(true);

b.替換節點 
這兩個方法都可以實現替換節點的問題。

1.  
   $(element).replacewith();
2.  
   $(element).replaceAll();

c.包裹節點

1.  
   $( element).wrap()
2.  
   $( element).wrapAll()
3.  
   $( element).wraplnner()

(4)屬性操作 
attr()和removeAttr()。 attr()方法能夠獲取元素屬性，也能夠設置元素屬性。removeAttr()方法刪除特定的屬性，方法是在參數中指定屬性名。

1.  
   $('p').attr('title');
2.  
   $('p').attr('title':'題目');
3.  
   $('p').attr({'title':'題目'，'name':'水果'});

(5)樣式操作 
addClass()、removeClass()這對兒方法是添加和刪除樣式。 
toggleClass()該方法用來切換目標元素的樣式。 
(6)其他常見操作 
第一句是獲取值，第二句是設置值。

1.  
   $('id').val();
2.  
   $('id').val('hello');

css操作 
設置添加css樣式

$('p').css('color','red');

至此，大概的Dom操作就已經梳理完了。

按照慣例，列出一些可以參考的資料 
http://www.cnblogs.com/ini_always/archive/2011/11/09/2243671.html 
http://wenku.baidu.com/view/a6b9673783c4bb4cf7ecd119.html 
http://www.nowamagic.net/librarys/posts/jquery/5 
http://www.blogjava.net/DLevin/archive/2012/11/25/391933.html 
http://www.w3school.com.cn/htmldom/dom_nodes.asp 
http://www.2cto.com/kf/201205/130535.html 
http://group.cnblogs.com/topic/39811.html 
http://www.cnblogs.com/bro-ma/p/3063942.html

 

分享支援  造福人間