標籤：
1.認識DOM文件物件模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
先來看看下面代碼:
將HTML代碼分解為DOM節點層次圖:
HTML文檔可以說由節點構成的集合，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方法。
2.getElementsByName()方法
返回帶有指定名稱的節點對象的集合。
文法：
document.getElementsByName(name)
與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
注意:
1. 因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數組，而不是一個元素。
2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。
看看下面的代碼:
運行結果:
3.getElementsByTagName()方法
返回帶有指定標籤名的節點對象的集合。返回元素的順序是它們在文檔中的順序。
文法:
document.getElementsByTagName(Tagname)
說明:
1. Tagname是標籤的名稱，如p、a、img等標籤名。
2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。
看看下面代碼，通過getElementsByTagName()擷取節點。
4.區別getElementByID,getElementsByName,getElementsByTagName
以人來舉例說明，人有能標識身份的身份證，有姓名，有類別(大人、小孩、老人)等。
1. ID 是一個人的社會安全號碼碼，是唯一的。所以通過getElementById擷取的是指定的一個人。
2. Name 是他的名字，可以重複。所以通過getElementsByName擷取名字相同的人集合。
3. TagName可看似某類，getElementsByTagName擷取相同類的人集合。如擷取小孩這類人，getElementsByTagName("小孩")。
把上面的例子轉換到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音樂
input標籤就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
方法總結如下:
注意：方法區分大小寫
通過下面的例子(6個name="hobby"的複選項，兩個按鈕)來區分三種方法的不同:
<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"> 跑步 <input type="button" value = "全選" id="button1"> <input type="button" value = "全不選" id="button1">
1. document.getElementsByTagName("input")，結果為擷取所有標籤為input的元素，共8個。
2. document.getElementsByName("hobby")，結果為擷取屬性name="hobby"的元素，共6個。
3. document.getElementById("hobby6")，結果為擷取屬性id="hobby6"的元素，只有一個，"跑步"這個複選項。
5.getAttribute()方法
通過元素節點的屬性名稱擷取屬性的值。
文法：
elementNode.getAttribute(name)
說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，擷取到的元素節點。
2. name：要想查詢的元素節點的屬性名稱字
看看下面的代碼，擷取h1標籤的屬性值：
運行結果:
h1標籤的ID ：alink
h1標籤的title ：getAttribute()擷取標籤的屬值
6.setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。
文法：
elementNode.setAttribute(name,value)
說明：
1.name: 要設定的屬性名稱。
2.value: 要設定的屬性值。
注意：
1.把指定的屬性設定為指定的值。如果不存在具有指定名稱的屬性，該方法將建立一個新屬性。
2.類似於getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。
7.節點屬性
在文件物件模型 (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
8.訪問子結點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
9.訪問子結點的第一和最後項
一、firstChild 屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
文法：
node.firstChild
說明：與elementNode.childNodes[0]是同樣的效果。
二、 lastChild 屬性返回‘childNodes’數組的最後一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。
文法：
node.lastChild
說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
注意: 上一節中，我們知道Internet Explorer 會忽略節點之間產生的空白文本節點，而其它瀏覽器不會。我們可以通過檢測節點類型，過濾子節點。 (以後章節講解)
10.訪問父節點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等瀏覽器標籤之間的空白也算是一個文本節點。
11.訪問兄弟節點
1. nextSibling 屬性可返回某個節點之後緊跟的節點（處於同一樹層級中）。
文法：
nodeObject.nextSibling
說明：如果無此節點，則該屬性返回 null。
2. previousSibling 屬性可返回某個節點之前緊跟的節點（處於同一樹層級中）。
文法：
nodeObject.previousSibling
說明：如果無此節點，則該屬性返回 null。
注意: 兩個屬性擷取的是節點。Internet Explorer 會忽略節點間產生的空白文本節點（例如，分行符號號），而其它瀏覽器不會忽略。
解決問題方法:
判斷節點nodeType是否為1, 如是為元素節點，跳過。
運行結果:
LI = javascriptnextsibling: LI = jquery
12.插入節點appendChild()
在指定節點的最後一個子節點列表之後添加一個新的子節點。
文法:
appendChild(newnode)
參數:
newnode：指定追加的節點。
我們來看看，div標籤內建立一個新的 P 標籤，代碼如下:
運行結果:
HTMLJavaScriptThis is a new p
13.插入節點insertBefore()
insertBefore() 方法可在已有的子節點前插入一個新的子節點。
文法:
insertBefore(newnode,node);
參數:
newnode: 要插入的新節點。
node: 指定此節點前插入節點。
我們在來看看下面代碼，在指定節點前插入節點。
運行結果:
This is a new pJavaScriptHTML
注意: otest.insertBefore(newnode,node); 也可以改為: otest.insertBefore(newnode,otest.childNodes[0]);
14.刪除節點removeChild()
removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。
文法:
nodeObject.removeChild(node)
參數:
node ：必需，指定需要刪除的節點。
我們來看看下面代碼，刪除子點。
運行結果:
HTML刪除節點的內容: javascript
注意: 把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在記憶體中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null 值，代碼如下:
15.替換元素節點replaceChild()
replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。
文法：
node.replaceChild (newnode,oldnew )
參數：
newnode : 必需，用於替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
我們來看看下面的代碼:
效果: 將文檔中的 Java 改為 JavaScript。
注意:
1. 當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。
2. newnode 必須先被建立。
16.建立元素節點createElement
createElement()方法可建立元素節點。此方法可返回一個 Element 對象。
文法：
document.createElement(tagName)
參數:
tagName：字串值，這個字串用來指明建立元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。
我們來建立一個按鈕，代碼如下：
<script type="text/javascript"> var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "建立一個按鈕"; body.appendChild(input); </script>
效果：在HTML文檔中，建立一個按鈕。
我們也可以使用setAttribute來設定屬性，代碼如下：
<script type="text/javascript"> var body= document.body; var btn = document.createElement("input"); btn.setAttribute("type", "text"); btn.setAttribute("name", "q"); btn.setAttribute("value", "使用setAttribute"); btn.setAttribute("onclick", "javascript:alert(‘This is a text!‘);"); body.appendChild(btn); </script>
效果：在HTML文檔中，建立一個文字框，使用setAttribute設定屬性值。 當點擊這個文字框時，會彈出對話方塊“This is a text!”。
17.建立文本節點createTextNode
createTextNode() 方法建立新的文本節點，返回新建立的 Text 節點。
文法：
document.createTextNode(data)
參數：
data : 字串值，可規定此節點的文本。
我們來建立一個<div>元素並向其中添加一條訊息，代碼如下：
運行結果:
18.瀏覽器視窗可視地區大小
獲得瀏覽器視窗的尺寸（瀏覽器的視口，不包括工具列和捲軸）的方法:
一、對於IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 瀏覽器視窗的內部高度
• window.innerWidth - 瀏覽器視窗的內部寬度
二、對於 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文檔所在視窗的當前高度。
• document.documentElement.clientWidth表示HTML文檔所在視窗的當前寬度。
或者
Document對象的body屬性對應HTML文檔的<body>標籤
• document.body.clientHeight
• document.body.clientWidth
在不同瀏覽器都實用的 JavaScript 方案：
var w= document.documentElement.clientWidth || document.body.clientWidth;var h= document.documentElement.clientHeight || document.body.clientHeight;19.網頁尺寸scrollHeight
scrollHeight和scrollWidth，擷取網頁內容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網頁內容實際高度，可以小於 clientHeight。
二、針對NS、FF:
scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小於 clientHeight 時，scrollHeight 返回 clientHeight 。
三、瀏覽器安全色性
var w=document.documentElement.scrollWidth || document.body.scrollWidth;var h=document.documentElement.scrollHeight || document.body.scrollHeight;
注意:區分大小寫
scrollHeight和scrollWidth還可擷取Dom元素中內容實際佔用的高度和寬度。
20.網頁尺寸offsetHeight
offsetHeight和offsetWidth，擷取網頁內容高度和寬度(包括捲軸等邊線，會隨視窗的顯示大小改變)。
一、值
offsetHeight = clientHeight + 捲軸 + 邊框。
二、瀏覽器安全色性
var w= document.documentElement.offsetWidth || document.body.offsetWidth;var h= document.documentElement.offsetHeight || document.body.offsetHeight;21.網頁捲去的距離與位移量
我們先來看看下面的圖：
scrollLeft:設定或擷取位於給定對象左邊界與視窗中目前可見內容的最左端之間的距離 ，即左邊灰色的內容。
scrollTop:設定或擷取位於對象最頂端與視窗中可見內容的最頂端之間的距離 ，即上邊灰色的內容。
offsetLeft:擷取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置 。
offsetTop:擷取指定對象相對於版面或由 offsetParent 屬性指定的父座標的計算頂端位置 。
注意:
1. 區分大小寫
2. offsetParent：布局中設定postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到HTML的body。
JS DOM對象，控制HTML元素
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
