100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 通过DOM对元素的属性进行获取 设置 移除

通过DOM对元素的属性进行获取 设置 移除

时间:2023-07-22 22:12:10

相关推荐

通过DOM对元素的属性进行获取 设置 移除

通过DOM对元素的属性进行获取、设置、移除

在DOM的学习中有一个知识点我们一定不可以忽略,那就是DOM中元素的属性。接下来讲解如何让通过DOM对HTML中元素的属性进行获取,设置,以及移除。

HTMl代码:

<div class="wrap" id="wrap"><p id="text" class="text">这是一个段落</p><ul class="list"><li class="item">列表01</li><li>列表02</li><li>列表03</li><li>列表04</li></ul><img src="../../CSS/0421/car.gif" alt=""></div>

1。获取元素的属性

var oWrap=document.getElementsByClassName("wrap")[0];var oText=document.getElementById("text");var oList=document.getElementsByClassName("list")[0];var oImg=document.querySelector("img");// 获取属性 // 通过属性获取 元素的属性console.log(oWrap.className);console.log(oText.className);console.log(oImg.src);// 通过方法获取 元素的属性 node.getAttribute("属性名")console.log(oWrap.getAttribute("class"));console.log(oImg.getAttribute("src"));

2.设置元素的属性

// 设置元素的属性// 通过属性设置 元素的属性oWrap.className="box";oImg.src="../../CSS/0421/car.jpg";// 通过方法设置 元素的属性 node.setAttribute("属性名","属性值")oWrap.setAttribute("id","box");oImg.setAttribute("src","../../CSS/0421/小鸭子.png");

3.移除元素属性

// 移除元素的属性 node.removeAttribute("属性名)oWrap.removeAttribute("id");

视频讲解链接:

/video/BV12K411H7ew/

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。