JavaScript中DOM有什么用

這篇文章主要介紹了JavaScript中DOM有什么用，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

1、DOM:文檔對象(document)模型。將整個html頁面看作一棵倒掛的樹，html就是這棵樹根節點，     head,body就是這棵樹的子節點。DOM模型要求將html中每對標簽看作節點對象來操作

2.DOM的作用：

JavaScript 能夠改變頁面中的所有 HTML 元素

JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

3.DOM查找頁面中的元素節點對象：

3.1：通過id查找頁面中一個元素節點對象
eg:

var ob1=document.getElementById("d1");
 //將節點對象中內容輸出
 alert(ob1.innerHTML);

3.2:通過標簽名查找頁面中元素節點集合或數組
eg:

var arr1=document.getElementsByTagName("h3");
//遍歷節點對象集合，輸出每個對象的內容
for(var i=0;i<arr1.length;i++){
alert(arr1[i].innerHTML);
 }

3.3:通過類名查找頁面中元素節點集合或數組
eg:

var arr2=document.getElementsByClassName("c1");
            //遍歷節點對象集合，輸出每個對象的內容
            for(var i=0;i<arr2.length;i++){
                    alert(arr2[i].innerHTML);
            }

3.4:通過name屬性來查找元素節點集合或數組
eg:

var arr3=document.getElementsByName("hobby");
            //遍歷節點對象集合，輸出每個對象的value屬性值
            for(var i=0;i<arr3.length;i++){
                alert(arr3[i].value);
           }

4.DOM操作節點對象的內容(標簽中文本內容，子標簽，子標簽文本......)：
4.1：獲得節點內容：節點對象.innerHTML
eg:

alert(ob1.innerHTML);

4.2:修改節點內容: 節點對象.innerHTML=“新值”；

eg：

ob1.innerHTML="哈哈";

4.3：清空節點內容：
eg:

ob1.innerHTML="";

5.DOM操作節點對象的文本內容(標簽中的文本和子標簽中的文本......)：
5.1:獲得節點文本內容(標簽中的文本和子標簽中的文本):節點對象.innerText
eg:

alert(ob1.innerText);

5.2:修改節點文本內容(標簽中的所有內容都修改):節點對象.innerText=“新值”；
eg：

ob1.innerText="呵呵";

6.DOM操作節點對象的屬性：
6.1：獲得節點對象的屬性：節點對象.屬性名
eg:

 alert(ob2.src);

6.2:修改節點對象屬性：節點對象.屬性名=“值”；
eg:

 ob2.src="img/img-2.jpg";

6.3:刪除節點對象的屬性：節點對象.removeAttribute("屬性名");
eg:

ob2.attributes.removeNamedItem("title");
ob2.removeAttribute("title");

7.DOM操作節點對象樣式：
7.1：設置節點對象的樣式：節點對象.style.樣式名=“樣式值”；
eg:

ob1.style.color="red";
ob1.style.backgroundColor="blue";

7.2: 獲得節點對象的樣式: 節點對象.style.樣式名
eg:

alert(ob1.style.color);

8.事件
   8.1：onload:頁面加載完事件。
   8.2：onclick:鼠標單擊事件。
   8.3：onchange:改變事件。
   8.4：onblur：光標離開事件。
   8.5：onfocus:獲得光標事件。
   8.6：onmouseover:鼠標經過事件。
   8.7：onmouseout:鼠標離開事件。

9.DOM操作節點對象
9.1:創建節點對象：
9.1.1:創建標簽節點對象：document.createElement("標簽名");
eg:

//創建節點對象
var node1=document.createElement("p");

eg:

//創建節點對象
var node1=document.createElement("h2");
node1.innerHTML="你好<span>中國</span>";

9.1.2：創建文本對象：document.createTextNode("文本內容");
eg:

//創建文本對象
var node1text=document.createTextNode("這是一個段落");

9.2:添加節點對象：節點對象.appendChild(子節點);
eg:

//將節點對象添加body中
document.getElementById("d1").appendChild(node1);

//直接向一個標簽中添加子節點
document.getElementById("d2").innerHTML=document.getElementById                                
("d2").innerHTML+"<h3>哈哈</h3><p>呵呵呵</p>";

9.3：刪除節點對象：父節點對象.removeChild(子節點對象);
eg:

//獲得父節點對象
var parentNode=document.getElementById("d1")
 //獲得要刪除的子節點對象
 var childNode=document.getElementsByTagName("p")[0];
//刪除子節點對象
//parentNode.removeChild(childNode);
//刪除當前節點對象，只有谷歌，火狐
childNode.remove();

9.4：復制節點對象：節點對象.cloneNode(true);
eg:

//獲得要復制的節點對象
var childNode=document.getElementsByTagName("p")[0];
//復制節點對象,true表示復制節點的同時將內容復制，false反之
var copyNode=childNode.cloneNode(true);
//將復制的節點添加到body中
document.getElementById("d1").appendChild(copyNode);

9.5: 替換元素中的子節點:父節點對象.replaceChild(newnode,oldnode);

感謝你能夠認真閱讀完這篇文章，希望小編分享JavaScript中DOM有什么用內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!