1、獲取屬性

<div id="box" class="test">11111</div>
var oDiv=document.getElementById("box");
oDiv.id
oDiv.className

2、自定義屬性的一些操作

<div id="box" class="test" data-id="222">11111</div>
  var oDiv=document.getElementById("box");
oDiv.attributes //獲取所有的屬性
oDiv.getAttribute("data-id")   //獲取預設屬性和自定義屬性都可
oDiv.setAttribute("id","box11") //修改屬性
oDiv.removeAttribute("id") //移除屬性
 

3、節點型別：元素節點、屬性節點、、文字節點

<div id="box" class="test" data-id="222">11111</div>
var oDiv=document.getElementById("box");
oDiv.nodeType  //1 即元素節點
oDiv.nodeName // DIV 節點名稱
oDiv.attributes[0].nodeType // 2  即屬性節點

var oTxt=document.createTextNode("這是一個文字節點");
oTxt.nodeType //3 即文字節點

4、獲取子元素節點

<div id="box" class="test" data-id="222">
        <p>ppp</p>
        <span>span</span>
</div>
<script>
    var oDiv=document.getElementById("box");
    console.log(oDiv.children)  //獲取子元素節點
</script>
 

5、獲取元素內部資訊

<div id="box" class="test" data-id="222">
        <p>ppp</p>
        <span>span</span>
</div>
<script>
    var oDiv=document.getElementById("box");
    console.log(oDiv.innerHTML,oDiv.outerHTML,oDiv.innerText) 
 </script>
//innerHTML outerHTML 
//相同點：標籤輸出
//不同點 ：innerHTML 把元素內部的資訊原樣輸出。outerHTML 元素本身和元素內部的內容待標籤輸出
//oDiv.innerText 輸出元素內的內容  不帶標籤
 

6、獲取第一個子節點相容寫法

<div id="box" class="test" data-id="222">
       <p>1</p>
       <p>2</p>
       <p>3</p>
       <p>4</p>
</div>
<script>
    var oDiv=document.getElementById("box");
    var firstchild =oDiv.firstElementChild||firstchild;   //相容寫法
    console.log(firstchild)
</script>