技術標籤：jsjavascriptjs

DOM Document Object Model 文件物件模型

javascript由三部分組成：ECMAScript、BOM、DOM

DOM提供API來操作HTML頁面，如：document下面的東西

1、常用子節點（子節點有十二種）

• 元素節點
• 文字節點（text)，回車就會產生文字節點
• 註釋節點(comment)

    <div id="wrap">
        <p>p1</p>
        <p>p2</p>
        <a href=""
 
>a</a>
        嗚呼啦呼，黑魔變身
        <b>b</b>
    </div>
    
     let owrap = document.getElementById("wrap")
     console.log(owrap.childNodes);
     // 註釋節點的話，修改nodevalue
     owrap.childNodes[7].innerText = "小蘭，哪裡逃"

     console.log(document.querySelector("#wrap a"
 
) === owrap.childNodes[5]);  // true
     //document.querySelector("#wrap a")  返回的是節點物件；owrap.childNodes[6]返回的是物件。獲取方式不同，但是是同一個a

2、節點的屬性

每個節點本身是個物件

• nodeValue,元素節點無nodeValue

          // 此處的childNodes[0]是div回車那裡，儲存形式是按字串儲存，修改如下
          owrap.childNodes[0].nodeValue = "小月在此"
  

• nodeType

          // nodeType可顯示節點型別,節點型別與編號一一對應
   
  
          console.log(owrap.childNodes[1].nodeType);  // 1
  

• nodeName

  text 的 nodeName 是 #text

  comment 的 nodeName 是 #commentt

  p 的 nodeName 是 大寫的P

3、獲取節點

        //獲取元素節點(平常操作最多)
		let owrap = document.getElementById("wrap")
        console.log(owrap.children)     //HTMLCollection(4)[p,div,div,a]
        // console.log(owrap.children.forEach())   //報錯
        console.log([...owrap.children].forEach((node,index)=>{   // forEach要傳一個函式引數
            console.log(node,index)
        }))

        //獲取id為標籤a的html結構上的父級節點
        let oabd = document.getElementById("abd")
        console.log(oabd.parentNode)  //  <div>
                                    //      <a id="abd"></a>  
								//			</div>
		// 定位父級,自身無定位屬性的話，也是有定位父級的
		console.log(oabd.offsetParent)

oabd.parentNode.parentNode,可獲得oabd的爺爺，以此類推

 <div id="abd">
            <p></p>
 </div>
 //獲取所有節點
 let oabd = document.getElementById("abd")
 console.log(oabd.getElementsByTagName("*"))   // [p]

    <div id="wrap">
        <div></div>
        <p>
            <a href=""></a>
        </p>
    </div>
    <p id="op"></p>
    
     let owrap = document.getElementById("wrap")
     console.log(owrap.firstChild)   //#text
     console.log(owrap.firstElementChild)   // <div></div>
     console.log(owrap.lastChild)  //#text
     console.log(owrap.lastElementChild)    //<p>...</p>
     console.log(owrap.nextSibling)   //#text
     console.log(owrap.previousElementSibling)  //null
     console.log(owrap.previousSibling)   //#text

4、節點的建立、新增與刪除

    <div id="wrap">
        <div></div>
    </div>
    
//用此方法新增標籤時，會覆蓋原始標籤，且會使原標籤上的onclick等操作失效
     let owrap = document.getElementById("wrap")
     owrap.innerHTML += '<a href="">我是標籤a</a>'
     console.log(owrap.children)   // [div, a]

    <div id="wrap">
        <div></div>
    </div>
    
    //新增節點
    let owrap = document.getElementById("wrap")
    let oA = document.createElement("a")
    owrap.appendChild(oA)
    console.log(owrap.children)   // [div,a]

    <div id="wrap">
        <div></div>
    </div>
    
    //插入節點
    let owrap = document.getElementById("wrap")
    let oA = document.createElement("a")
    //插入標籤a到owrap的第一個節點前
    owrap.insertBefore(oA, owrap.children[0])
    console.log(owrap.children)   // [a,div]

    <div id="wrap">
        <div></div>
    </div>
    
        //刪除節點，節點不能自殺，需要通過父級移除 
        let owrap = document.getElementById("wrap")
        let odiv = document.querySelector("#wrap .lan")
        owrap.removeChild(odiv)   // 或者odiv.parentNode.removeChile(odiv)
        console.log(owrap.children)   // []
//執行了刪除節點之後，再次列印被刪除節點時，還是顯示原先的節點。因為頁面是頁面，記憶體是記憶體，這個移除操作只是從頁面中移除，記憶體中還保留