一）節點屬性操作

①獲取屬性值

★DOM節點.屬性名 //不能獲取使用者自定義的屬性

★DOM節點.getAttribute(屬性名) //萬能

②設計屬性值

★DOM節點.屬性名 = 屬性值

★DOM節點.setAttribute(屬性名,屬性值)

③刪除屬性值

★DOM節點.屬性名 = ' ' //空字串

★DOM節點.removeAttribute(屬性名)

<button id = "btn">切換圖片</button>
<img src = "images/bg1.jpg" data-src = "images/bg2.jpg" alt = "圖片" />  //有data-是使用者自定義屬性
<img  data-src = "images/bg2.jpg" alt = "圖片" />  //沒有src圖片出不來

<script>
//
 
①獲取屬性值
//  ★DOM節點.屬性名            //不能獲取使用者自定義的屬性
//  ★DOM節點.getAttribute(屬性名)    //萬能，1次只能拿1個屬性
//獲取圖片
var img = document.getElementsByTagName('img');
console.log(img[0].src);      //獲取的是圖片的完整路徑，拿到瀏覽器中可以開啟
console.log(img[0].alt); 
console.log(img[0].data-src);    //使用者自定義屬性報錯
console.log(img[0].data);    //undefined
console.log(img[0].getAttribute(src)); 
console.log(img[
 
0].getAttribute(data-src));   //可以


//②設計屬性值
//  ★DOM節點.屬性名 = 屬性值
//  ★DOM節點.setAttribute(屬性名,屬性值)  
img[1].src = 'images/bg1.jpg';
img[1].data-src = 'images/bg1.jpg';     //報錯
document.getElementsById('btn').onclick = function(){
  alert();   //測試好用不
  var url = img[0].getAttribute('data-src');
  img[0].setAttribute('src',url)
}


 
//③刪除屬性值
//  ★DOM節點.屬性名 = ' '    //空字串
//  ★DOM節點.removeAttribute(屬性名) 
img[1].src = ' '
img[1].removeAttribute('src')


</script>