JavaScript-DOM（1）

DOM簡介

DOM 節點分類	DOM 節點層級關係
一、文檔節點	一、父節點
二、標籤（元素)節點	二、子節點
三、屬性節點	三、兄弟節點
四、註釋節點	四、根節點
五、文本節點

DOM節點分類

DOM節點關係

獲取元素

• 經過 id 獲取元素

  // document自己是window的屬性 但window是能夠省略不學的
  // window.document.getElementById()
  var divID = document.getElementById("divID")

• 經過 class 獲取元素（標籤）節點

  // 返回值 集合類型（數組類型）
  var divClassArr = document.getElementsByClassName('divClass');
  for(var i = 0; i < divClassArr.length; i++){
      console.log(divClassArr[i]);
  }

• 經過 tag 獲取元素

  var divTagArr = document.getElementsByTagName('div');

• 經過 name 屬性獲取元素

  var nameArr = document.getElementsByName('a')

獲取屬性節點

<script type="text/javascript">
    //經過id獲取input標籤
    var myInput = document.getElementById("inputID")

    // 獲取屬性節點
    // 方式一 標籤節點.屬性點
    console.log(myInput.type)   // text
    console.log(myInput.placeholder);

    // 修改屬性節點
    // 標籤節點.屬性名 = 新的屬性值
    myInput.placeholder = '嘿嘿'


    // 方式二
    // 獲取屬性節點  標籤節點.getAttribute(屬性名稱)
    var inPl = myInput.getAttribute('type');

    // 修改屬性節點
    // 標籤節點 : setAttribute(屬性名稱，新的屬性值)
    myInput.setAttribute('placeholder', '666');

    // 刪除屬性節點
    myInput.removeAttribute('placeholder')
</script>

內部節點與外部節點屬性

<script type="text/javascript">
    // 獲取div1節點
    var div1 = document.getElementById("div1")
    
    // 一、innerHTML:獲取元素節點
    //從對象的開始標籤到結束標籤的所有內容,不包括自己Html標籤
    var innerDiv = div1.innerHTML;
    
    //二、元素節點.outerHTML
    //除了包含innerHTML的所有內容外, 還包含對象標籤自己
    var outerDiv = div1.outerHTML;
    
    //三、元素節點.innerText
    //從對象的開始標籤到結束標籤的所有的文本內容
    var innerText = div1.innerText;
    
    //四、修改元素節點
    div1.innerHTML = '<h1>666</h1>';
</script>

行間樣式的獲取

css對應的style屬性

<div id="div1" style="width: 150px;height: 150px;background-color: red;"></div>
<button onclick="changeColor()">換顏色</button>
<script type="text/javascript">
    var div1 = document.getElementById("div1");
    console.log(div1);    
    var divArr = document.getElementsByTagName('div');
    console.log(divArr);  // [object HTMLCollection]
    console.log(divArr[0]); // [object HTMLDivElement]

    // 經過標籤節點獲取style屬性的值
    var styleDiv = div1.style

    // 獲取style屬性下面的樣式值 width
    var width = div1.style.width;

    // 修改背景顏色
    div1.style.backgroundColor = 'green';

    // 按鈕 點擊一次按鈕更換一次div的背景顏色

    function changeColor() {
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    var colorStr = "rgb(" + r + ", " + g + ", " + b + ")";
    div1.style.backgroundColor = colorStr;
    }

</script>