DOM繼承樹，增刪改操作(精簡版)

對節點進行查詢

• doaument代表整個文檔

• document.getElemnetByID();
  var div = document.getElemnetByID();//元素id在IE8以下的瀏覽器不區分大小寫，而且返回匹配name值的元素

• document.getElementsByTagName();//通過標籤名查找 實時的
  var div = document.getElementsByTagName("div");//類數組（DOM所生成的大多爲類數組）

• document.getElementsByName();//返回帶有給定name特性的所有元素。常用來取得單選按鈕。

非實時：css選擇器。IE7及以下版本沒有。選擇出來的元素不是實時的，是副本。

• document.querySelector();

var strong = document.querySelector("div>span strong.demo");//選擇div直屬span下class名爲demo的strong標籤

• document.querySelectorAll();//css選擇器。IE7及以下版本沒有。選擇出來的元素不是實時的，是副本。
  ####遍歷節點樹
• parentNode：父節點（最頂端parentNode爲"#document"）
• childNode: 子節點

        <div>
            123
            <!-- comment-->
            <strong></strong>
            <span></span>
        </div>
        
        <script>
        var div = document.getElementsByTagName("div")[0];
        console.log(div.childNodes.length); //7個節點
        </script>

• firstChild:第一個子節點；lastChild:最後一個子節點
• nextSibling：後一個兄弟節點 previousSilbing:前一個兄弟節點

遍歷元素節點樹（除children，IE9以下不兼容）

• parentElement：返回當前元素的父元素節點
• children：只返回當前元素的元素子節點
• firstElementChild:第一個子元素
• lastElementChild:最後一個子元素
• previousElementSibling:指向前一個同輩元素
• nextElementSibling:指向後一個同輩元素

節點四個屬性

• nodeName 元素標籤名，大寫形式，只讀
• nodeValue:text節點或Comment節點的文本內容，可讀寫
• nodeType:該節點的類型，只讀
• attributes:Element節點屬性集合
• hasChildNodes:返回true或false

DOM結構樹

DOM基本操作

• getElementById方法定義在Document.prototype上，即Element節點上不能使用。
• getElementsByName方法定義在HTMLDocument.prototype上，即非html中的document不能使用（xml document,Element）
• getElementsByTagName方法定義在Document.prototype和Element.prototype上
• HTMLDocument.prototype定義了一些常用屬性，body，head分別指HTML文檔中的標籤
• Document.prototype上定義了documentElement屬性，指代文檔的根元素，在HTML文檔中，它總指代元素
  document.documentElement代表html
• getElementsByClassName、querySelectorAll、querySelectorAll在Document.prototype,Element.prototype類中均有定義

增

• document.createElement();//創建元素節點
  var div = document.createElement('');
• document.createTextNode();//創建文本節點
• document.createComment();//創建註釋
• document.createDocumentFragment();

插

• PARENTNODE.appendChild();
• PARENTNODE.insertBefore();//插在前面
  div.insertBefore(a,b);//在div下的a插入在b之前

刪

• parentNode.removeChild();//剪切式刪除,返回刪除的標籤
• child.remove();//銷燬，無返回值

替換

• parentNode.replace(new,orgin);

Element節點屬性

• innerHTML

<div></div>
var div = getElementByTagName('div')[0];
div.innerHTML = "123";//div的內容變爲123
div.innerHTML += "456";//div的內容變爲123456
div.innerHTML = "<span style='background-color:red;'>123</span>";//可寫樣式

• innerText
  可賦值，但會覆蓋結構和文本；可取文本內容
  ####Element節點上的方法
• setAttribute(“屬性名”，“屬性值”)；//添加行間屬性（可以自定義屬性）
• getAttribute(‘屬性名’)；//讀取行間屬性值
  
  DOM基礎知識（詳細）