Dom是什么？
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標准方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
將HTML解析成Dom節點圖
上圖Dom節點：
1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標簽。
2. 文本節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節點:元素屬性，如<a>標簽的鏈接屬性href="http://www.imooc.com"。
節點屬性
遍歷節點樹
以上圖ul為例，它的父級節點body,它的子節點3個li,它的兄弟結點h2、P。
Dom操作
前兩個都為document的方法
getElementsByName方法
返回帶有指定名稱的節點對象的集合。
語法
document.getElementsByName(name)
與getElementsById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
值得注意的是，在html文件中name大多情況都不是唯一的，所以這個方法返回的是數組，並不是單個元素
因為返回的是數組，所以也具有length這屬性，用法和數組差不多
給一個范例
<script type="text/javascript"> function getnum(){ var mynode= document.getElementsByName("myt") ; alert(mynode.length); } </script> </head> <body> <input name="myt" type="text" value="1"> <input name="myt" type="text" value="2"> <input name="myt" type="text" value="3"> <input name="myt" type="text" value="4"> <input name="myt" type="text" value="5"> <input name="myt" type="text" value="6"> <br /> <input type="button" onclick="getnum()" value="看看有幾項？" /> </body>
getElementsByTagName方法
返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
語法
document.getElementsByTagName(Tagname)
說明:
1. Tagname是標簽的名稱，如p、a、img等標簽名。
2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。
范例
<body>
<form name="Input">
<table align="center" width="500px" height="50%" border="1">
<tr>
<td align="center" width="100px">
學號:
</td>
<td align="center" width="300px">
<input type="text" id=userid name="user" onblur="validate();">
<div id=usermsg></div>
</td>
</tr>
<tr>
<td align="center" width="100px">
姓名:
</td>
<td align="center">
<input type="text" name="name">
</td>
</tr>
<tr>
<td align="center" width="%45">
性別:
</td>
<td align="center">
<input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女
</td>
</tr>
<tr>
<td align="center" width="30%">
年齡:
</td>
<td align="center" width="300px">
<input type="text" name="age">
</td>
</tr>
<tr>
<td align="center" width="100px">
地址:
</td>
<td align="center" width="300px">
<input type="text" name="addr">
</td>
</tr>
</table>
</form>
<h1 id="myHead" onclick="getValue()">
看看三種獲取節點的方法?
</h1>
<p>
點擊標題彈出它的值。
</p>
<input type="button" onclick="getElements()"
value="看看name為sex的節點有幾個?" />
<Br>
<input type="button" onclick="getTagElements()"
value="看看標簽名為input的節點有幾個?" />
<script type="text/javascript">
function getValue()
{
var myH=document.getElementById("myhead");
alert(myH.innerHTML)
}
function getElements()
{
var myS=document.getElementsByName("sex");
alert(myS.length);
}
function getTagElements()
{
var myI=document.getElementsByTagName("input");
alert(myI.length);
}
</script>
</body>
在這里區別一下getElementById,getElementsByName,getElementByTagName的區別
1. ID 是一個人的身份證號碼，是唯一的。所以通過getElementById獲取的是指定的一個人。 2. Name 是他的名字，可以重復。所以通過getElementsByName獲取名字相同的人集合。 3. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
比如
<input type="checkbox" name="hobby" id="hobby1"> 音樂
input標簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
范例
<body>
<form>
請選擇你愛好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音樂
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 閱讀
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全選" onclick = "checkall();">
<input type="button" value = "全不選" onclick = "clearall();">
<p>請輸入您要選擇愛好的序號，序號為1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="確定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(var i=0;i<hobby.length;i++)
hobby[i].checked=true;
// 任務1
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(var i=0;i<hobby.length;i++)
hobby[i].checked=false;
// 任務2
}
function checkone(){
var j=document.getElementById("wb").value;
var hobby = document.getElementsByName("hobby");
hobby[j].checked=true;
// 任務3
}
</script>
</body>
getAttribute方法
通過元素節點的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)
說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。
2. name：要想查詢的元素節點的屬性名字
范例
<body>
<p id="intro">課程列表</p>
<ul>
<li title="第1個li">HTML</li>
<li>CSS</li>
<li title="第3個li">JavaScript</li>
<li title="第4個li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下為獲取的不為空的li標簽title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text=con[i].getAttribute("title");
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
setAttribute方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。 語法 elementNode.setAttribute(name,value) 說明： 1.name: 要設置的屬性名。 2.value: 要設置的屬性值。
注意：
1.把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。
2.類似於getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數
范例
<body>
<p id="intro">我的課程</p>
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<h1>以下為li列表title的值,當title為空時，新設置值為"WEB前端技術":</h1>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++)
{
var text=Lists[i].getAttribute("title");
document.write(text +"<br>");
if(text=="")
{
Lists[i].setAttribute("title","WEB前端技術");
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
</body>
節點屬性
在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ： 1. nodeName : 節點的名稱 2. nodeValue ：節點的值 3. nodeType ：節點的類型 一、nodeName 屬性: 節點的名稱，是只讀的。 1. 元素節點的 nodeName 與標簽名相同 2. 屬性節點的 nodeName 是屬性的名稱 3. 文本節點的 nodeName 永遠是 #text 4. 文檔節點的 nodeName 永遠是 #document 二、nodeValue 屬性：節點的值 1. 元素節點的 nodeValue 是 undefined 或 null 2. 文本節點的 nodeValue 是文本自身 3. 屬性節點的 nodeValue 是屬性的值 三、nodeType 屬性: 節點的類型，是只讀的。以下常用的幾種結點類型: 元素類型 節點類型 元素 1 屬性 2 文本 3 注釋 8 文檔 9
樣例
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var node=document.getElementsByTagName("li");
for(var i=0;i<node.length;i++)
{
document.write("節點名稱："+node[i].nodeName+","+"節點的值："+node[i].nodeValue+","+"節點類型："+node[i].nodeType+"<br>");
}
</script>
</body>
childNodes訪問子節點
訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。
語法：
elementNode.childNodes
注意：
如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。
讓我們看一下以下代碼
運行結果:
IE:
UL子節點個數:3
節點類型:1
其它瀏覽器:
UL子節點個數:7
節點類型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容問題
2. 節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7，如下圖所示:
如果把代碼改成這樣:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
運行結果:（IE和其它瀏覽器結果是一樣的）
UL子節點個數:3
節點類型:1
范例
<body> <div> javascript <p>javascript</p> <div>jQuery</div> <h5>PHP</h5> </div> <script type="text/javascript"> var node=document.getElementsByTagName("div")[0].childNodes; for(var i=0;i<node.length;i++) { document.write(node[i].nodeName+" "+i+"<br>"); } </script> </body>
輸出結果
firstChild
屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.firstChild
說明：與elementNode.childNodes[0]是同樣的效果。
lastChild
屬性返回‘childNodes’數組的最后一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
語法：
node.lastChild
說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
范例
<body> <div id="con"> <p>javascript</p> <div>jQuery</div> <h5>PHP</h5> </div> <script type="text/javascript"> var x=document.getElementById("con"); document.write(x.firstChild.nodeName+"<br>"); document.write(x.lastChild.nodeName+"<br>"); </script> </body>
parentNode訪問父節點
獲取指定節點的父節點
語法：
elementNode.parentNode
注意:父節點只能有一個。
看看下面的例子,獲取 P 節點的父節點，代碼如下:
<div id="text"> <p id="con"> parentNode 獲取指點節點的父節點</p> </div> <script type="text/javascript"> var mynode= document.getElementById("con"); document.write(mynode.parentNode.nodeName); </script>
運行結果:
parentNode 獲取指點節點的父節點
DIV
訪問祖節點:
elementNode.parentNode.parentNode
看看下面的代碼:
<div id="text"> <p> parentNode <span id="con"> 獲取指點節點的父節點</span> </p> </div> <script type="text/javascript"> var mynode= document.getElementById("con"); document.write(mynode.parentNode.parentNode.nodeName); </script>
運行結果:
parentNode獲取指點節點的父節點
DIV
注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點
nextSibling：屬性可返回某個節點之后緊跟的節點（處於同一樹層級中）。
語法：
nodeObject.nextSibling
說明：如果無此節點，則該屬性返回 null。
previousSibling ：屬性可返回某個節點之前緊跟的節點（處於同一樹層級中）。
語法：
nodeObject.previousSibling
說明：如果無此節點，則該屬性返回 null。
注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。
appendChild() 插入節點
在指定節點的最后一個子節點列表之后添加一個新的子節點。語法:appendChild(newnode)
語法:
appendChild(newnode)
參數:
newnode：指定追加的節點。
范例
<ul id="test"> <li>JavaScript</li> <li>HTML</li> </ul> <script type="text/javascript"> var otest = document.getElementById("test"); var newnode=document.createElement("li"); newnode.innerHTML="C++"; otest.appendChild(newnode); </script>
insertBefore() 方法可在已有的子節點前插入一個新的子節點。
語法:
insertBefore(newnode,node);
參數:
newnode: 要插入的新節點。
node: 指定此節點前插入節點。
范例
<script type="text/javascript"> var otest = document.getElementById("test"); var o1=document.createElement("li"); o1.innerHTML="C++"; otest.insertBefore(o1,otest.lastChild); </script>
刪除節點removeChild()
removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)
參數:
node ：必需，指定需要刪除的節點。
范例：
<body> <div id="content"> <h1>html</h1> <h1>php</h1> <h1>javascript</h1> <h1>jquery</h1> <h1>java</h1> </div> <script type="text/javascript"> function clearText() { var content=document.getElementById("content"); // 在此完成該函數 for(var i=0;i<content.childNodes.length;i++){ if(content.childNodes[i].nodeType!=1){ continue; }else{ content.removeChild(content.childNodes[i]); } } } </script> <button onclick="clearText()">清除節點內容</button> </body>
替換元素節點replaceChild()
replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數：
newnode : 必需，用於替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
范例：
<body>
<div><b id="oldnode">JavaScript</b>是一個很常用的技術，為網頁添加動態效果。</div>
<a href="javascript:replaceMessage()"> 將加粗改為斜體</a>
<script type="text/javascript">
function replaceMessage(){
var oldnode=document.getElementById("oldnode");
var newnode=document.createElement("i");
newnode.innerHTML=oldnode.innerHTML
oldnode.parentNode.replaceChild(newnode,oldnode);
}
</script>
</body>
/*
注意:
1. 當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。
2. newnode 必須先被建立。
*/
createElement創建節點
createElement()方法可創建元素節點。此方法可返回一個 Element 對象。
語法：
document.createElement(tagName)
參數:
tagName：字符串值，這個字符串用來指明創建元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。
范例：
<body> <script type="text/javascript"> var main = document.body; //創建鏈接 function createa(url,text) { var a=document.createElement("a"); a.href=url; a.innerHTML=text; a.style.color="red"; main.appendChild(a); } // 調用函數創建鏈接 createa("http://www.fjutacm.com","FJUTACM"); </script> </body>
createTextNode創建文本節點
createTextNode() 方法創建新的文本節點，返回新創建的 Text 節點。
語法：
document.createTextNode(data)
參數：
data : 字符串值，可規定此節點的文本。
范例：
/* <script>標簽中，創建一個P標簽，設置className屬性，使用createTextNode創建文本節點"I love C++"。 */ <style type="text/css"> .message{ width:200px; height:100px; background-color:#CCC;} </style> </head> <body> <script type="text/javascript"> var a=document.createElement("p"); a.className="message"; var text=document.createTextNode("I love C++"); a.appendChild(text); document.body.appendChild(a); </script> </body>
運行結果
獲取瀏覽器可視區域大小
<script type="text/javascript"> var w=document.documentElement.clientWidth||document.body.clientWidth; var h=document.documentElement.clientHeight||document.body.clientHeight; document.write(w+"*"+h+"<br>") var w=document.documentElement.clientHeight; var h=document.documentElement.clientWidth; document.write(w+"*"+h+"<br>") var w=window.innerWidth; var h=window.innerHeight; document.write(w+"*"+h+"<br>") var w=document.body.clientWidth; var h=document.body.clientHeight; document.write(w+"*"+h) </script>
網頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網頁內容高度和寬度。
<script type="text/javascript"> //法一 document.write(document.body.scrollWidth+"<br />"); document.write(document.body.scrollHeight); //法二 var w=document.documentElement.scrollWidth; var h=document.documentElement.scrollHeight; document.write("<br>"+"<br>"+w+"<br>"+h); </script>
網頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。 一、值 offsetHeight = clientHeight + 滾動條 + 邊框。 二、瀏覽器兼容性 var w= document.documentElement.offsetWidth || document.body.offsetWidth; var h= document.documentElement.offsetHeight || document.body.offsetHeight;
<script type="text/javascript"> var w= document.documentElement.offsetWidth; var h= document.documentElement.offsetHeight; //法一 document.write("<br/>"+"網頁內容的寬度為："+w+"<br />"+"網頁內容的高度為："+h); //法二 document.write("<br />"+"<br/>"); document.write("網頁內容的寬度為："+document.body.offsetWidth+"<br />"); document.write("網頁內容的高度為："+document.body.offsetHeight); </script>