瀏覽器讀取html檔案並解析後，可以生成頁面結構，那麼在結構生成之後還可不可以再修改這個結構呢，這就需要用到我們的dom節點操作
節點操作主要有以下內容：
* 獲取節點
* 建立節點
* 修改節點
* 插入節點
* 刪除節點
* innerhtml
兄弟關係
直接通過節點關係，可維護性差，所以我們通過介面獲取節點
前端div>
body>
html>對於id = "hello"有乙個對應的介面getelementbyid
對於標籤p，我們可以通過getelementbytagname獲取節點
對於class="mooc"我們可以通過getelementbyclassname獲取節點
還有乙個重要的方法queryselector/all通過選擇器獲取節點
element = document.getelementbyid(id)
獲取文件當中制定id的元素，id是唯一的，所以得到的節點也就是唯一的
在上面的例子中可以用document.getelementbyid("hello"),我們將獲取到p節點，是乙個物件，包含著屬性和介面
一段範例用**
href="/user/2">青草a>
這個方法返回乙個物件陣列，每個物件分別對應著文件裡有給定標籤的元素
比如在上面的例子中，我們通過
var users = getelementbyid("users");
users.getelemrntsbytagname("li")得到的是乙個具有三個li的列表，我們可以通過下標獲取元素，users.getelemrntsbytagname("li")[2]表示的就是***這個物件。
我們重點看一下這個方法的返回值，var a = users.getelemrntsbytagname("li")
,這時，a是[li, li, li],當我們用一些方法刪除節點青草後，a就變成了[li, li],我們可以看出，這個方法的返回值是動態的
getelementsbytagname也可以把萬用字元」*」作為引數，它可以返回具有所有節點的陣列，比如
users.getelementbytagname("*")我們得到乙個列表[h2, ul, li, img, a, li, img, a, li, img, a],包含著users下所有的節點。
collection = element.getelementsbyclassname(classname)
這個方法的返回值也是乙個陣列，我們用users.getelementbyclassnane("user"),得到具有user類的元素，也可以利用下標訪問元素。
我們可以同時將多個類作為引數users.getelementbyclassnane("user selected")，中間用逗號分開即可。
這個方法只能應用於比較新的瀏覽器，對於ie678，我們有乙個相容辦法
functiongetelementsbyclassname
(node,classname)
else
}return results；
}}這個新的函式不適用於將多個類名作為引數的情況，第乙個引數是節點，第二個引數是類名，對於上面的例子，我們可以寫作var userlist = getelementsbyclassname(users,"user");
list = element.queryselector/all(selector)
兩者的區別是，queryselector返回的是第乙個符合條件的元素;queryselectorall返回的是乙個列表
引數是乙個選擇器，那我們該怎麼寫呢var users = document.queryselector(#users)這樣我們通過id選擇器，就獲得了div#users
再加上users.queryselectorall(".user"),這樣我們得到了[li, li, li]
我們可以有更加靈活的方式document.queryselector(#users .user)這樣我們科技迅速獲取節點。
注意，這種方法返回的list不是動態的
name
only document
sole(唯一的)
live(動態的)
getelementbyid**
getelementsbytagname
*getelementsbyclassname
*queryselectorall
queryselector*
節點操作 DOM程式設計
父子關係 兄弟關係 hello var ulnode document.getelementsbytagname ul 0 console.log ulnode.parentnode console.log ulnode.previouselementsibling null console.log...
DOM節點操作
節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容 文字節點 cdata section n...
操作dom節點
取到節點物件可以，我們可以建立乙個節點後動態插入到dom節點樹中 html中 1 建立乙個文字節點 第一段第二段 第三段 js var div document getelementsbytagname div 0 var textnode document createtextnode 文字節點 ...