這篇文章帶給大家的內容是關於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中文網其他相關文章！
