HTML DOM 可通過(guò) JavaScript 進(jìn)行訪問(wèn)倒谷。
Document 對(duì)象可以對(duì) HTML 頁(yè)面中的所有元素進(jìn)行訪問(wèn)玫氢。
document對(duì)象屬性
| 屬性 | 描述 |
|---|---|
| head | 提供對(duì) <head> 元素的直接訪問(wèn)。document.head
|
| body | 提供對(duì) <body> 元素的直接訪問(wèn)讲仰。document.body
|
| cookie | 設(shè)置或返回與當(dāng)前文檔有關(guān)的所有 cookie慕趴。document.cookie
|
| domain | 返回當(dāng)前文檔的域名。document.domain
|
| lastModified | 返回文檔被最后修改的日期和時(shí)間。document.lastModified
|
| referrer | 返回載入當(dāng)前文檔的文檔的 URL冕房。document.referrer
|
| title | 返回當(dāng)前文檔的標(biāo)題躏啰。document.title
|
| URL | 返回當(dāng)前文檔的 URL。document.URL
|
document對(duì)象方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回帶有指定 ID 的元素耙册。如[object HTMLDivElement]
|
| getElementsByClassName() | 返回包含帶有指定類名的所有元素的節(jié)點(diǎn)列表给僵。如[object HTMLCollection]
|
| getElementsByTagName() | 返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點(diǎn)列表（集合/節(jié)點(diǎn)數(shù)組）。如[object HTMLCollection]
|
| appendChild() | 把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)详拙。 |
| removeChild() | 刪除子節(jié)點(diǎn)帝际。 |
| replaceChild() | 替換子節(jié)點(diǎn)。 |
| insertBefore() | 在指定的子節(jié)點(diǎn)前面插入新的子節(jié)點(diǎn)饶辙。 |
| createAttribute() | 創(chuàng)建屬性節(jié)點(diǎn)蹲诀。 |
| createElement() | 創(chuàng)建元素節(jié)點(diǎn)。 |
| createTextNode() | 創(chuàng)建文本節(jié)點(diǎn)。 |
| getAttribute() | 返回指定的屬性值（應(yīng)是對(duì)元素節(jié)點(diǎn)的操作）。 |
| setAttribute() | 把指定屬性設(shè)置或修改為指定的值（應(yīng)是對(duì)元素節(jié)點(diǎn)的操作）幸缕。 |
| setAttributeNode() | 把指定屬性設(shè)置或修改為指定的值（應(yīng)是對(duì)元素節(jié)點(diǎn)的操作）。 |
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="myDiv">
<ul id="myUl">
<li class="classLi">張三</li>
<li class="classLi">李四</li>
<li>王五</li>
<li>趙六</li>
</ul>
</div>
<li id="li" style="font-size: 20px">陳大</li>
</body>
<html>
方法詳解
-
getElementById()
<script>
var tagNames=document.getElementById("myDiv");
console.log("通過(guò)指定id獲得:"+myDiv);
</script>
通過(guò)指定id獲得：[object HTMLDivElement]
-
getElementsByClassName()
是一個(gè)元素的節(jié)點(diǎn)
<script>
var classLis=document.getElementsByClassName("classLi");
console.log("通過(guò)指定類名獲得:"+classLis);
</script>
通過(guò)指定類名獲得:[object HTMLCollection]
是一組元素的節(jié)點(diǎn)列表
-
getElementsByClassName()
<script>
var targets=document.getElementsByTagName("li");
console.log("通過(guò)指定標(biāo)簽名稱:"+targets);
</script>
通過(guò)指定標(biāo)簽獲得:[object HTMLCollection]
是一組元素的節(jié)點(diǎn)列表
-
appendChild()
<script>
var li=document.getElementById("li")
var myUl=document.getElementById("myUl");
myUl.appendChild(li);
</script>
-
removeChild()
<script>
var myUl=document.getElementById("myUl");
var firstLi= document.getElementsByClassName("classLi")[0];
myUl.removeChild(firstLi);
</script>
-
replaceChild()
<script>
var myUl=document.getElementById("myUl");
var li=document.getElementById("li");
var firstLi= document.getElementsByClassName("classLi")[0];
myUl.replaceChild(li,firstLi);//第一個(gè)參數(shù)是新節(jié)點(diǎn)它碎，第二個(gè)是舊節(jié)點(diǎn)
</script>
-
insertBefore()
<script>
var myUl=document.getElementById("myUl");
var li=document.getElementById("li");
var secondLi= document.getElementsByClassName("classLi")[1];
myUl.insertBefore(li,secondLi);//第一個(gè)參數(shù)是新節(jié)點(diǎn)，第二個(gè)是舊節(jié)點(diǎn)
</script>
-
createAttribute()
<script>
var firstLi= document.getElementsByClassName("classLi")[0];
var secondLi= document.getElementsByClassName("classLi")[1];
var attr=document.createAttribute("style");
attr.value="color:red";
//setAttributeNode（） 和setAttribute（）區(qū)別
firstLi.setAttributeNode(attr);
secondLi.setAttribute("style","color:blue");
</script>
-
createElement()
<script>
var newElement= document.createElement("div");//創(chuàng)建一個(gè)div
var body=document.body;
body.appendChild(newElement);
newElement.setAttribute("style","width: 80px;height: 80px;background-color: red");//設(shè)置style屬性使div寬80px,高80px,背景顏色紅色
</script>
-
createTextNode()
<script>
var newElement= document.createElement("div");//創(chuàng)建一個(gè)div
var body=document.body;
body.appendChild(newElement);
newElement.setAttribute("style","width: 80px;height: 80px;background-color: red");//設(shè)置style屬性使div寬80px,高80px,背景顏色紅色
var text=document.createTextNode("我愛(ài)你");
newElement.appendChild(text);
</script>
-
getAttribute()
<script>
var li= document.getElementById('li');
var attr=li.getAttribute("style");
console.log("結(jié)果是："+attr)
</script>
結(jié)果是：font-size: 20px
-
setAttribute()
<script>
var firstLi= document.getElementsByClassName("classLi")[0];
firstLi.setAttribute("style","color:green");
</script>
-
setAttributeNode()
<script>
var firstLi= document.getElementsByClassName("classLi")[0];
var attr=document.createAttribute("style");
attr.value="color:green";
firstLi.setAttributeNode(attr);
</script>
