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

逃离我推掉我的手 2023-02-13 08:18 8阅读 0赞

## 通过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/**

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 27. 移除元素

27. 移除元素题干及输出示例为什么不把超过新数组长度的元素删掉解法暴力解法双指针法快慢指针法

我不是女神ヾ/ 2023年10月13日 15:53/ 0 赞/ 181 阅读

相关移除元素

给你一个数组 nums 和一个值 val，你需要 [原地][Link 1] 移除所有数值等于 val 的元素，并返回移除后数组的新长度。不要使用额外的数组空间，你必须仅使用

「爱情、让人受尽委屈。」/ 2023年07月23日 08:56/ 0 赞/ 135 阅读

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

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

逃离我推掉我的手/ 2023年02月13日 08:18/ 0 赞/ 9 阅读

相关 27.移除元素

题目描述：给你一个数组 nums 和一个值 val，你需要原地移除所有数值等于 val 的元素，并返回移除后数组的新长度。不要使用额外的数组空间，你必须仅使用 O(1)

灰太狼/ 2022年09月11日 05:25/ 0 赞/ 375 阅读

相关 python 元素移除

给定一个数组和一个数（该数不一定在数组中），从数组里删掉这个数字，返回剩下的数组长度。如：A\[\]=1,2,3,4,5A\[\] = \{1, 2, 3, 4,

秒速五厘米/ 2022年06月08日 07:10/ 0 赞/ 435 阅读

相关 LeetCode——移除元素

题目：给定一个数组 nums 和一个值 val，你需要[原地][Link 1]移除所有数值等于 val 的元素，返回移除后数组的新长度。不要使用额外的数组空间，你必须在

Love The Way You Lie/ 2022年05月19日 11:35/ 0 赞/ 399 阅读

相关移除元素

题目描述给定一个数组 nums 和一个值 val，你需要原地移除所有数值等于 val 的元素，返回移除后数组的新长度。不要使用额外的数组空间，你必须在原地修改输入数

冷不防/ 2021年12月14日 03:35/ 0 赞/ 475 阅读

相关 Iterator移除元素

iterator移除元素 > 移除list的某些元素 demo / 搜索 / public String search(WhiteScreenS

本是古典何须时尚/ 2021年12月11日 21:15/ 0 赞/ 527 阅读

相关 LeetCode移除元素

题目描述给定一个数组 nums 和一个值 val，你需要原地移除所有数值等于 val 的元素，返回移除后数组的新长度。不要使用额外的数组空间，你必须在原地修改输入数组

水深无声/ 2021年11月05日 07:34/ 0 赞/ 829 阅读

相关 jQuery设置disabled属性与移除disabled属性

作用范围： `Readonly`只针对`input`和`textarea`有效，而`disabled`对于所有的表单元素都有效。表单中`readOnly`和`dis

客官°小女子只卖身不卖艺/ 2021年06月26日 16:06/ 0 赞/ 838 阅读