12示例注意：document.getelementsbyclassname('p')等返回的是乙個htmlcollection 物件集合，document.queryselectorall('p')返回的是乙個nodelist 物件集合，兩者沒有很大的不同，但要注意『訪問 htmlcollection 專案，可以通過它們的名稱、id 或索引號訪問 nodelist 專案，只能通過它們的索引號』--這是w3school裡的解釋。3
注意：類陣列的物件集合之所以不能稱為陣列，是因為它們沒有陣列的pop(),join()等方法
1示例
一共12種，以下為常用的，每個型別的節點都有相應的nodename和nodevalue和nodetype等
**例項：
view code
處理html並構建dom樹
處理css等檔案並構建cssom樹
將dom樹和cssom樹合併成乙個渲染樹（節點不一定同dom樹，有display:none等情況）
根據渲染樹來計算每個節點的位置和尺寸
將每個節點繪製到螢幕上
注：在解析dom樹時遇到script標籤或外連的js檔案，及js裡修改變動dom節點都會導致上述渲染過程重複執行，js操作dom耗時長有以上原因，
解析js中，dom節點沒有解析時會出現錯誤等，這時script標籤的屬性defer(延遲執行)和async(非同步執行)就可以用來控制js中影響dom操作的載入順序
常見html的元素節點分為塊級元素和行內元素，顧名思義，塊級元素是乙個塊可以設定框高，且獨佔一行（width:預設為100%），行內元素大部分不能設定寬高，長度隨內容撐開。
注：以上為預設的css屬性，顯示修改的話會按照設定的屬性執行，如：display：inline-block，可以將乙個行內元素變成可設定寬高
常見的塊級標籤：div、h1~h6、p、form、ul、ol、li、table、tr、td、dd、dt等
常見的行內標籤：span、label、img、a、import、select、input、textarea、button等，其中img,textarea為特殊的可設定寬高的行內元素
節點的巢狀規則：行內元素不能包含塊級元素，塊級元素可以包含行內元素和塊級元素
注：h1、h2、h3、h4、h5、h6、p、dt等只能包含行內元素
建立乙個新節點：
var node = document.createelement('p');
新增新節點到指定的節點的位置中：insertbefore(newnode,oldnode) //將newnode插入到oldnode的前面
odiv.insertbefore(node, oldnode);
刪除指定節點的子節點：
ol.removechild(ol.children[2]);
以上要注意是什麼時候是 htmlcollection,什麼時候是nodelist，兩者的具體區別，待後續補充吧。
原生js操作Dom命令總結
常用的dom方法 document.getelementbyid box 通過id獲取標籤 document.getelementsbytagname div 根據標籤名獲取頁面元素 注意 由於獲取結果可能是多個，element後面要加s 根據標籤獲取的結果是偽陣列形式，偽陣列是不具備陣列的方法。要...
JS中DOM操作基礎（一）
事件 行為，操作 觸發事件 註冊事件 事件 響應 事件源 document.getelementbyid btn onclick function id 就像人的 身份證，是標籤在文件中的 身份位址 var btnobj document.getelementbyid btn 返回值時文件 頁面 中...
JS中DOM及其基礎操作
dom document object model 文件物件模型，提供一些屬性和方法供我們操作頁面的元素 獲取dom元素的方法 document.getelementbyid context getelementsbytagname 在指定上下文 容器 中，通過標籤名獲取一組元素集合 context...