码迷,mamicode.com
首页 > 其他好文 > 详细

DOM节点(二)

时间:2020-09-08 21:04:30      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:fine   doc   class   打开   onclick   rem   button   pre   完整路径   

一)节点属性操作

①获取属性值

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

 

二)节点文本操作275

 

DOM节点(二)

标签:fine   doc   class   打开   onclick   rem   button   pre   完整路径   

原文地址:https://www.cnblogs.com/goule/p/13578719.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!