DOM节点（二）

<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>