通过DOM对元素的属性进行获取、设置、移除javascript,DOM,文档对象模型qq39155611的博客-

通过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"); 

视频讲解链接：
https://www.bilibili.com/video/BV12K411H7ew/