js乙個重要功能就是操作dom, 改變頁面顯示。
目錄：1、基本概念
2、節點型別
3、節點關係
4、節點操作
dom全稱為document object model ，即文件物件模型，是針對html和xml的乙個api, 描繪了乙個層次化的節點樹，可以新增、移除和修改頁面的某一部分。
dom可以將任何html或xml文件描繪成乙個由多層節點構成的結構。
節點之間的關係構成了層次，而所有頁面標記則表現為乙個以特定節點為根節點的樹形結構。以下面的html為例：
<將這個html文件表示為乙個層次結構，如下圖html
>
<
head
>
<
title
>sample page
title
>
head
>
<
body
>
<
p>hello world!
p>
body
>
html
>
方框中黑體字代表節點型別。
文件節點(圖中的document)是每個文件的根節點，
這個例子中，它只有乙個子節點，即 元素，我們稱之為文件元素。
文件元素是文件的最外層元素，文件中的其他所有元素都包含在文件元素中。
每個文件只能有乙個文件元素。
在html頁面中，文件元素始終都是元素。
在xml中，沒有預定義的元素，任何元素都可能成為文件元素。
每一段標記都可以通過樹中的乙個節點來表示，總共有12種節點型別，這些型別都繼承自乙個基型別。
並不是所有節點型別都受到web瀏覽器的支援，最常用的就是元素、文字、文件節點（下面數值常量中的1、3和9），我們只要關注這三種就可以了。
我們先看下所有的節點型別。
js 中所有節點型別都繼承自node型別，因此都共享著相同的基本屬性和方法。
每個節點都有nodetype屬性，用於表明節點的型別。
nodetype有12個數值常量，任何型別必居其一。
各節點型別可能的子節點型別
通過比較上面這些常量，可以確定節點型別：
if (somenode.nodetype == 1)把文件樹比喻成家譜。（如下圖，某個節點可以通過屬性訪問其他節點）
每個節點有乙個childnodes屬性，其中儲存著乙個nodelist物件（類陣列物件，但不是array的例項），它是基於dom結構動態查詢的結果。
可通過方括號，也可通過item() 方法來訪問nodelist中的節點。例子：
//在反映這些關係的所有屬性中，childnodes屬性更方便一些，因為只須使用簡單的關係指標，就可以通過它訪問文件樹中的任何節點。訪問 nodelist物件中的節點
var firstchild = somenode.childnodes[0];
var secondchild = somenode.childnodes.item(1);
var count = somenode.childnodes.length;
因為關係指標是唯讀的，所以dom提供了一些操作節點的方法。
主要是 新增、插入、替換、移除，我們分別介紹。
//如果要把節點插入到 childnodes 列表中某個特定的位置上，用insertbefore(要插入的節點，作為參照的節點)。alert(returnednode == newnode); //
true
alert(somenode.lastchild == newnode); //
true
插入節點後，被插入的節點會變成參照節點的前乙個同胞節點（previoussibling），同時被方法返回。
//如果要替換節點，用 replacechild(要插入的節點，要替換的節點)insertbefore()
//插入後成為最後乙個子節點
returnednode = somenode.insertbefore(newnode, null
); alert(newnode == somenode.lastchild); //
true
//插入後成為第乙個子節點
var returnednode =somenode.insertbefore(newnode, somenode.firstchild);
alert(returnednode == newnode); //
true
alert(newnode == somenode.firstchild); //
true
//插入到最後乙個子節點的前面
returnednode =somenode.insertbefore(newnode, somenode.lastchild);
alert(newnode==somenode.childnodes[somenode.childnodes.length-2]); //
true
要替換的節點將由這個方法返回並從文件樹中被移除，同時由要插入的節點佔據其位置。
//移除節點用 removechild(移除的節點)。替換節點 replacechild()
//替換第乙個子節點
var returnednode = somenode.replacechild(newnode,somenode.firstchild);
被移除的節點成為方法的返回值。
//移除的節點仍然為文件所有，不過在文件中已經沒有了自己的位置。移除節點 removechild()
//移除第乙個節點
var formerfirstchild = somenode.removechild(somenode.firstchild);
前面介紹的四個方法操作的都是某個節點的子節點，也就是說，要使用這幾個方法必須先取得父節點（使用parentnode屬性）。
clonenode()，接受乙個布林值引數，表示是否執行深複製。
true, 執行深複製，也就是複製節點及其整個子節點數。
false, 執行淺複製，即只複製節點本身。
返回的節點副本屬於文件所有，但沒有指定父節點。
祝學習開心：）
JS之DOM操作元素
獲得id名稱是inp1物件節點 var inp1 document.getelementbyid inp1 方式一 獲得元素的屬性 var ty inp1.type var va inp1.value var na inp1.name 操作元素的屬性 inp1.type button inp1.va...
Js操作 DOM操作
一 節點屬性 dom 是樹型結構，相應的，可以通過一些節點屬性來遍歷節點樹 方法說明 nodename 節點名稱，相當於tagname.屬性節點返回屬性名，文字節點返回 text。nodename，是唯讀的。nodetype 節點的型別，返回值 1，元素節點 2，屬性節點 3，文字節點。nodety...
DOM基本操作（上）
一.介紹 dom document object model 操作一切結構化文件的通用api，用dom即可操作html，又可操作xml，可實現增，刪，改，查。二.dom節點型別及屬性 根據w3c 的 html dom 標準，html 文件中的所有內容都是節點 整個文件是乙個文件節點 document...