HTML DOM是HTML Document
Object Model(文檔對象模型)的縮寫，HTML
DOM則是專門適用於HTML/XHTML的文檔對象模型。熟悉軟件開發的人員可以將HTML DOM理解爲網頁的API。它將網頁中的各個元素都看作一個個對象，從而使網頁中的元素也可以被計算機語言獲取或者編輯。 例如Javascript就可以利用HTML DOM動態地修改網頁。
方法：
getElementById(id) - 獲取帶有指定 id 的節點（元素）
1.getElementByName（） 獲取name;
2.getElementsByTagName() 獲取元素
3.getAttribute（） 獲取元素的屬性
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="aid" title="得到了a標籤的屬性">Hello</a>
<script type="text/javascript">
function getAttribute () {
var anode= document.getElementById("aid");
var attr=anode.getAttribute("title");
alert(attr);
}
getAttribute();
</script>
</body>
</html>
4.setAttribute（） 設置元素的屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a id="aid2">aid2</a>
<script type="text/javascript">
function setAttr () {
var anode=document.getElementById("aid2");
anode.setAttribute("title","動態設置a額度title屬性");
var attr= anode.getAttribute("title");
alert(attr);
}
setAttr();
</script>
</body>
</html>
5.childNodes（） 訪問子節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul><li>1</li><li>2</li><li>3</li></ul>
<script type="text/javascript">
function getChildNode () {
var childnode = document.getElementsByTagName("ul")[0].childNodes;
alert(childnode.length); //得到長度
alert(childnode[0].nodeType); //得到節點類型
}
getChildNode();
</script>
</body>
</html>
6.parentNodes（） 訪問父節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getParentNode () {
var div =document.getElementById("pid").parentNode.nodeName;
alert(div);
}
getParentNode();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getParentNode () {
var div =document.getElementById("pid").parentNode.nodeName;
alert(div);
}
getParentNode();
</script>
</body>
</html>
7.createElement（“節點名稱”） 創建元素節點
注意！！！！
標籤的NAME是可以相同的，ID號是唯一的，用window,document.getElementsByTagName("BODY")[可以去到
所有標籤name=body的集合，後面的就【0] 表示的就是這個集合中的第一項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function createNode () {
var body= document.getElementsByTagName("body")[0]; //往body裏面創建元素節點 先獲得body 也可以寫成 var body = document.body;
var input= document.createElement("input");
//括號裏面爲節點類型 這裏爲input類型
input.type="button";
input.value="按鈕";
body.appendChild(input); //appendChild() 方法向節點添加最後一個子節點
}
createNode();
</script>
</body>
</html>
8.createTextNode（） 創建 文本節點 --------------用法與創建元素節點相同
9.insertBefore（插入的節點，existingnode）
插入節點 appendChild() 方法向節點添加最後一個子節點
10.removeChild（） 刪除節點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function removeNode(){
var div=document.getElementById("div");
var p= div.removeChild(div.childNodes[1]);
}
removeNode();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function removeNode(){
var div=document.getElementById("div");
var p= div.removeChild(div.childNodes[1]);
}
removeNode();
</script>
</body>
</html>
11.offsetHeight 網頁尺寸 （不包含滾動條）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getSize () { //兩種獲得寬度和高度的寫法都可以 這裏爲了瀏覽器的兼容性 兩種都寫上
var width=document.documentElement.offsetWidth||document.body.offsetWidth; //獲得寬度
var height=document.documentElement.offsetHeight||document.body.offsetHeight; //獲得高度
alert(width+","+height);
}
getSize();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div">
<p id="pid">div的p元素</p>
</div>
<script type="text/javascript">
function getSize () { //兩種獲得寬度和高度的寫法都可以 這裏爲了瀏覽器的兼容性 兩種都寫上
var width=document.documentElement.offsetWidth||document.body.offsetWidth; //獲得寬度
var height=document.documentElement.offsetHeight||document.body.offsetHeight; //獲得高度
alert(width+","+height);
}
getSize();
</script>
</body>
</html>
12.scrollHeight 網頁尺寸 （包含滾動條）
<head>