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("h2");
//遍历节点对象集合，输出每个对象的内容
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("h1");
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+"<h2>哈哈</h2><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的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！