一、查詢

1.不需要查詢就可直接獲得的元素

html    document.documentElement
head    document.head
body    document.body

2.按節點間關係查詢

1.父子關係
elem.parentElement    獲得elem的父元素
elem.children    獲得elem的所有直接子元素
    返回值：所有直接子元素組成的類陣列物件
elem.firstElementChild    獲得elem下的第一個子元素
elem.lastElementChild    獲得elem下的最後一個子元素
2.兄弟關係
elem.previousElementSibling    獲得elem的前一個兄弟元素
elem.nextElementSibling    獲得elem的後一個兄弟元素
注意：元素樹IE9及以上版本才支援

3.遍歷指定父節點下的所有後代節點

節點迭代器：NodeIterator
1.用父節點建立節點迭代器物件：
    var iterator=document.createNodeIterator(parent,NodeFilter.SHOW_ALL,null,false .SHOW_ELEMENT);
2.反覆呼叫迭代器的nextNode()方法獲取下一個節點物件
    nextNode()有兩個作用
    1.返回當前節點 2.跳到下一個節點，如果沒有後續節點，返回null
do{
    var node=iterator.nextNode()
    if(node!=null)
        console.log(node.nodeName);
    else break;
}while(true)

4.按HTML查詢

1.按id查詢
    var elem=document.getElememtById("標籤名");
    注意：只能用document呼叫
2.按標籤名查詢
    var elems=parent.getElementsByTagName("標籤名");
    返回動態集合
    注意：1.可在任意父元素上呼叫，僅在當前父元素下查詢
             2.不僅找直接子元素，且查詢所有後代中的元素
3.按name屬性查詢（多用在表單中）
    var elems=document.getElementsByName("name");
    返回動態集合
    注意：只能用document呼叫
4.按class屬性查詢
    var elems=parent.getElementByClassName("class");
    返回動態集合
    注意：1.可在任意父元素上呼叫
            2.不僅找直接子元素，且在所有後代中查詢
            3.如果一個元素同時被多個class修飾時，只要按其中一個class，就可找到該元素
    缺點：每次只能按一種條件查詢，當查詢條件複雜時，步驟就非常繁瑣

5.用選擇器查詢

1.僅查詢一個元素
    let elem=parent.querySelector("selector");
2.查詢多個元素
    var elems=parent.querySelectorAll("selector");
    注意：1.可以在任何父元素上呼叫
            2.返回非動態集合（實際儲存完整資料，即使反覆訪問集合，也不會反覆查詢DOM樹）
            3.selector受制於瀏覽器的相容性限制

二、修改

1.修改內容

1.獲取或修改元素的HTML程式碼片段內容
    elem.innerHTML
2.獲取或修改元素的純文字內容
    elem.textContent
    去掉了內嵌標籤，將轉移字元翻譯為原文
3.獲取或修改表單元素的值
    elem.value

2.修改屬性

HTML標準屬性：HTML中規定的值為字串型別的
1.核心DOM
    屬性節點都儲存在elem的attributes集合中
        var node=elem.attributes["屬性名"];
        var value=node.nodeValue;
    獲取：var value=elem.getAttribute("屬性名")
    修改：elem.setAttribute("屬性名","值")
    判斷有沒有該屬性var bool=elem.hasAttribute("屬性名")
    移除：elem.removeAttribute("屬性名")
2.HTML DOM：專門操作HTML文件的簡化版DOM API
    獲取：elem.屬性名
    修改：elem.屬性名=值
    判斷有咩有該屬性：elem.屬性名!=""
    移除：elem.屬性=""
注意：class屬性
    核心DOM可直接使用class
    HTML DOM必須換為.className=>就是HTML中的class，因為js的物件中已經提前有一個內部屬性class，用來記錄物件建立時的型別名
3.狀態屬性：disabled    selected    checked
    特點：值是bool型別，不能用核心DOM操作，只能用HTML DOM操作
4.自定義擴充套件屬性（只要給元素新增行為時，查詢元素都用自定義擴充套件屬性）
步驟：
    1.定義data-屬性名="值"
    2.獲取或設定：2種
        1.核心DOM
        2.HTML5：elem.dataset.屬性名

3.修改樣式

1.內聯樣式
特點：優先順序最高，當前元素獨有
修改：
    1.僅修改一個內聯樣式
        elem.style.css屬性=值
        注意：所有css屬性都要去橫線邊駝峰
            比如：z-index=>zIndex
                    font-size=>fontSize
                    background-position=>backgroundPosition
    2.批量替換內聯樣式
        elem.style.cssText="…";
獲取
    錯誤: elem.style.css屬性
        style僅表示內聯樣式，無法獲得外部樣式，丟樣式
    解決: 獲得計算後的樣式（最終應用到當前元素上的所有樣式的合集）
    為什麼: 一個元素的完整樣式，可能來源自多個地方
    何時: 只要獲取樣式，都要獲得計算後的樣式！
    步驟: 2步:
        1. 獲得計算後的style物件
            var style=getComputedStyle(elem);
        2. 獲得style中的css屬性值;
            var value=style.css屬性;
    注意: 計算後的樣式style是隻讀的，不能修改！

三、新增和刪除

1.建立空元素
    var a=document.createElement("a");
        <a></a>
2.設定關鍵屬性
    a.href="http://tmooc.cn";
    a.innerHTML="go to tmooc";
        <a href="http://tmooc.cn">go to tmooc</a>
3.將新元素新增到DOM樹
    末尾追加：parent.appendChild(a)
    中間插入：parent.inserBefore(a,child)     將a插入到child之前
    替換：parent.replaceChild(a,child)     用a替換child
優化：儘量減少操作DOM樹的次數，因為每次操作DOM樹都會導致網頁重新 layout
    如果同時新增父元素和子元素時，都要先在記憶體中將子元素新增到父元素中，最後，再將父元素，一次性新增到DOM樹中