dom節點及對節點的常用操作方法
在說dom節點前，先來看看頁面的呈現：
dom渲染流程：
1、瀏覽器解析html原始碼，然後建立乙個dom樹。
在dom樹中，每乙個html標籤都有乙個對應的節點(元素節點),並且每乙個文字也都有乙個對應的節點(文字節點)。dom樹的根節點就是documentelement，對應的是html標籤。
2、瀏覽器解析css**，計算出最終的樣式資料。
對css**中非法的語法它會直接忽略掉。解析css的時候會按照如下順序來定義優先順序：瀏覽器預設設定，使用者設定，外聯樣式，內聯樣式，html中的style(嵌在標籤中的行間樣式)。
3、建立完dom樹並得到最終的樣式資料之後，構建乙個渲染樹。
渲染樹和dom樹有點像，但是有區別。dom樹完全和html標籤一一對應，而渲染樹會忽略不需要渲染的元素(head、display:none的元素)。渲染樹中每乙個節點都儲存著對應的css屬性。
4、當渲染樹建立完成之後，瀏覽器就可以根據渲染樹直接把頁面繪製到螢幕上。
那我們的節點大致是12種：
我們平常可見的也就文字節點，屬性節點，元素節點，注釋節點等...
先來看看獲取節點：
childnodes：獲取元素下的所有節點：返回乙個陣列
var box_ele = document.getelementbyid("box");
var child_nodes = box_ele.childnodes;
nodetype:辨別元素的型別
1=> 元素節點
2=> 屬性節點
3=》 文字節點
4....
nodevalue：獲得文字節點的值
children：獲取元素下的所有元素節點：返回乙個陣列
var box_ele = document.getelementbyid("box");
var child_nodes = box_ele.children;
一般而言，我們多用childr。
nodename：判定元素的型別 返回標籤的大寫 如：div span等.
另外的獲取：關係型節點獲取
子集類：
firstchild：第乙個子節點
firstelementchild：第乙個元素子節點
lastchild：最後乙個子節點
lastelementchild：最後乙個元素子節點
兄弟類：
nextsibling：下乙個節點
nextelementsibling：下乙個元素節點
previoussibling：上乙個節點
previouselementsibling：上乙個元素節點
父級類：
parentnode：父節點
特別注意的：
屬性節點：
由於屬性都是在元素裡邊的，所以屬性節點獲取一定是在元素節點之上。
var box_ele = document.getelementbyid("box");
var attributes = box_ele.attributes;
這裡的attributes是乙個陣列：
屬性分為屬性和屬性值：
那我們可以通過之前的nodetype，nodename，nodevalue來看看attributes裡的內容：
如：attributes[0].nodetype
attributes[0].nodename
attributes[0].nodevalue
以上是對節點的獲取，下面看一看對節點的操作：
首先看看如何穿建立乙個節點；
var ele = document.createelement("div");
建立乙個div節點
ele.innerhtml = "你好世界";
加入內容，再放入頁面中：
如何放入呢？
ele.insertbefore(newnode, existnode) 在box內，把newnode節點插入到exsitnode的前面
再來看看如何刪除：
removechild()：這個方法需要找到父節點再刪除：
box.parentnode.removechild(box);
box.remove();
remove：直接刪除！但：相容極差。
節點的轉殖
clonenode()：轉殖當前層，不會深層次轉殖。
clonenode(true)：整層及以下都轉殖。
最後就是節點替換了：
obj.replacechild(新新增的節點 , 被替換的節點) 替換子節點
dom節點及對節點的常用操作方法
在說dom節點前，先來看看頁面的呈現 dom渲染流程 1 瀏覽器解析html原始碼，然後建立乙個dom樹。在dom樹中，每乙個html標籤都有乙個對應的節點 元素節點 並且每乙個文字也都有乙個對應的節點 文字節點 dom樹的根節點就是documentelement，對應的是html標籤。2 瀏覽器解...
DOM之對節點的操作
1.createelement 建立乙個元素節點 let p document.createelement p 這個方法必須要傳遞乙個節點作為引數 不能字串 是放在父元素的末尾 2.insertbefore 插入到某乙個元素的前面 語法 父元素.insertbefore 你要插入的元素,哪乙個元素的...
DOM節點及高階操作
1 attributes得到dom屬性節點 包含所有的預設屬性 自定義屬性的屬性名和屬性值 2 getattribute 得到某個屬性值，括號裡為屬性名，可得到所有屬性 預設屬性和自定義屬性 console.log obox.getattribute id console.log obox.geta...