JavaScript基础: DOM中操作属性以及自定义属性

最新推荐文章于 2022-12-23 14:33:12 发布
最新推荐文章于 2022-12-23 14:33:12 发布
阅读量602 收藏 2
点赞数
分类专栏： JavaScript 文章标签： JavaScript getAttribute setAttribute 样式属性 自定义属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011863822/article/details/124280443
版权

上一篇聊了一些常用的事件以及演示其如何使用，演示的时候发现一件事情，那就是DOM操作不单是得到元素，还可以修改元素的属性。现在开始如何操作其属性。

普通自带的属性

这些属性是某些标签自带的属性比如src，alt等

现在举个例子搞一波

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>
        img{
            display: block;
            margin-top: 10px;
            width: 200px;
            border-radius: 100px;
            border: 2px solid #9a6e3a;
            box-shadow: 0 0 4px  #ee9900;
        }
    </style>
</head>
<body>
<button id="b1" >选择大老婆</button>
<button id="b2" >选择二老婆</button>
<img id="laopo" src="jpg/dalaopo.jpg">

<script>
    var eleb1=document.getElementById("b1");
    var eleb2=document.getElementById("b2");
    var src_imga=document.getElementById("laopo");
    eleb1.onclick=function () {
        src_imga.src="jpg/dalaopo.jpg";
    }
    eleb2.onclick=function () {
        src_imga.src="jpg/erlaopo.jpg";
    }
</script>
</body>
</html>

在这里插入图片描述

表单的元素属性

当然也可以操作表单的一些属性，比如type，checked，value以及selected，disabled等

下面就演示几个属性的操作，如果类似的操作或者效果差不多就不再多次列举了，不然会托的篇幅很长。

value属性操作

其实这个前面演示过，现在再演示一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
<input id="in_id" type="text" value="点击前 ">
<button id="b_id" >点击查看效果</button>
<script>
<!-- 两种不同的地方元素的方法，不是了为装逼和卖弄，而是强化读者记忆，以防以为只有一种方式-->
    var element_in=document.querySelector("#in_id");
    var element_b=document.getElementById("b_id");
    element_b.onclick=function () {
       element_in.value="我被点击。";
    }

</script>
</body>
</html>

在这里插入图片描述

disable属性

其实这个属性的操作和上面几乎没什么区别，但是可以演示一个关键字this。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

    </style>
</head>
<body>
<input id="in_id" type="text" value="点击前 ">
<button id="b_id" >点击查看效果</button>
<script>
<!-- 两种不同的地方元素的方法，不是了为装逼和卖弄，而是强化读者记忆，以防以为只有一种方式-->
    var element_in=document.querySelector("#in_id");
    var element_b=document.getElementById("b_id");
    element_b.onclick=function () {
       element_in.value="我被点击。";
    //   如果点击了 就不用再点击了当然也可以设置其它元素
    //     element_b.disabled=true;  如果调用其它的标签就需要这样
        this.disabled=true;// 但是这个却是自己控制自己，所以可以使用this
    }
    
</script>
</body>
</html>

在这里插入图片描述

上面这几中都是直接属性赋值，现在补充一个案例，感受一下现实的使用。

例子1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        form{
            margin: 10px auto;
            width: 250px;
        }
        div{
            margin: 10px 0px;
            display: inline-block;
            width: 160px;
            border: 1px solid black;
        }
        legend{
            margin: 0px auto;
        }
        label{
            display: inline-block;
            width: 60px;
            text-align: center;
        }
        input{
            width: 100%;
            outline:none;
            border: none;
        }
        #pas{
            width:130px;
        }
        img{

            width: 16px;
            height: 16px;
        }


    </style>
</head>
<body>
<form action="#" method="post">
    <fieldset>
        <legend>用户登录</legend>
        <label for="nm">用户名:</label><div><input  id="nm" type="text" value=""></div>

        <label for="pas">密&nbsp;码:</label><div><input id="pas" type="password" value=""><img id="mmimg" src="jpg/by.png"></div>

    </fieldset>
</form>
<script>
    var element_mmimg=document.getElementById("mmimg");
    var element_pas=document.getElementById("pas");
    //作为一个标志参数，方便后面的逻辑判断
    var flag=true;
    element_mmimg.onclick=function(){
      if(flag){
          element_pas.type="text";
          element_mmimg.src="jpg/zy.png";
          flag=false;
      }else{
           element_pas.type="password";
          element_mmimg.src="jpg/by.png";
          flag=true;
      }
    }

</script>
</body>
</html>

在这里插入图片描述

样式属性

当然也可以修改样式的属性，样式的属性可以修改元素打大小，颜色位置等等。

单独修改某样式属性

常用格式：

element.style.属性  // 样式参数
  • JS操作style样式，产生的效果是行内样式，所以再css权重中比较高。
  • JS里面的样式采用的数驼峰命名方式比如：element.style.fontSize等。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        div{
            /* 这里不使用定位的话会 导致input输入数据的时候下滑*/
            position: relative;
            margin: 10px auto;
            width: 300px;
            height: 32px;
        }
        input{
            position:absolute;
            border-top-left-radius: 32px;
            border-bottom-left-radius: 32px;
            font-size: 14px;
            width: 212px;
            height:32px;
            border: 1px solid black;
            padding-left: 10px;
            outline: none;

        }
        button{
            position: relative;
            left:212px;
            line-height: 32px;
            margin-left: -1px;
            width: 88px;
            height: 32px;
            border-top-right-radius: 32px;
            border-bottom-right-radius: 32px;
            border: 1px solid red;
            background-color: red;
        }
        i{
            position: absolute;
            top: 4px;
            left: 10px;
            width: 24px;
            height: 24px;
            background: red url("jpg/search.png") no-repeat;
            background-size:24px  24px;

        }

    </style>
</head>
<body>
<div>
    <input id="i_id" type="text" value="艾尔登法环"><button><i></i>&nbsp;&nbsp;搜索</button>
</div>
<p id="er"></p>
<script>
    var element_input=document.getElementById("i_id");

    element_input.onfocus=function(){
        this.value='';
        // 这里可以看出单个属性就会的驼峰命名
        this.style.borderColor='red';
    }
    element_input.onblur=function () {
        if(this.value==''){
            this.value='艾尔登法环';
        }
        this.pointer
        this.style.borderColor='black';
    }

</script>
</body>
</html>

在这里插入图片描述

通过类名进行修改样式

毕竟如果修改的样式中有涉及到多个属性，那么如果用单独样式依次写出有些累赘，所以就需要通过样式的类名进行修改。

格式：

element.className // 类名操作
  • 因为class是一个保留字，所以使用className来修改样式
  • className会直接更改元素的类名，也就是会重新覆盖原先的类名。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        div{
            margin: 10px auto 0px 200px;
        }
        .message{

            font-size: 12px;

            padding: 12px;

        }
        .warn{
            background: url("jpg/warn.jpg") no-repeat left center;
            background-size: 12px 12px;
            color: lightskyblue;
        }
        .err{
            background: url("jpg/err.jpg") no-repeat left center;
            background-size: 12px 12px;
            color:red;
        }
        .sucess{
            background: url("jpg/sucess.jpg") no-repeat left center;
            background-size: 12px 12px;
            color:green;
        }
        input{
            outline: none;
        }
    </style>
</head>
<body>
<div>
    <label for="pwd">设置密码:</label> <input id="pwd" type="password"> <span  id ="warn" class="message warn">请输入密码</span>
</div>
<p id="er"></p>
<script>
    var ele_id=document.getElementById("pwd");
    var ele_wrn=document.getElementById("warn");

    ele_id.onfocus=function () {

        if (ele_id.value.length<6 || ele_id.value.length>12){
            // 这个后面会聊 是一个文本节点的属性
            ele_wrn.textContent="密码需要设置6-12位"
            ele_wrn.className='message err';
        }else {
            ele_wrn.textContent="密码符合要求"
            ele_wrn.className='message sucess';
        }

    }

    ele_id.onblur=function () {

        if (5<ele_id.value.length &&  ele_id.value.length<13){
            // 这个后面会聊 是一个文本节点的属性
            ele_wrn.textContent="密码符合要求"
            ele_wrn.className='message sucess';
        } else {
            ele_wrn.textContent="密码需要设置6-12位 请重新设置"
            ele_wrn.className='message err';
        }
    }
    
</script>
</body>
</html>

在这里插入图片描述

属性操作

其实除了一些标签中常用的属性属性操作，有时候为了更加方便的进行操作会添加一些自定义属性。下面聊一下。

属性赋值

如果非自定义的属性，我们很容易得到比如id，name，value，type等等格式如下：

// 第一种
element.属性: 可以得到自身属性，无法得到自定义属性
// 第二种  
element.getAttribute("属性名")：可以得到所有属性，包括自带属性，不过一般用来得到自定义属性

而自定义得到属性只能通过第二种方式。

属性修改

前面的案例都是修改自带的属性然后通过：

element.属性=""

进行赋值，当然自定义无法通过这种方式赋值，其可以如下：

element.setAttribute("属性名","属性值"); 这种方式也可以赋值自带属性，不过一般用在赋值自定义属性。

删除属性

删除属性的格式如下：

element.removeAttribute("属性名")；

这个可以直接将属性删除，自定义和自带的属性都是这样删除的。

自定义属性

自定义属性目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库当中。方便开发者使用，也减少了页面与后台过多的交互。

自定义属性的获得，上面再属性获得的时候已经说了，所以不再重复。

而自定义属性有时候定义的时候名字很难区分是自定义还是自带属性，常见的id和name这些还好说，比如一些少用的属性，偶然用一次也很难区分是自定义还是自带，所以自定义属性的h5命名就有了一些规范(如果不遵守规范也可以自定义，但是不好区分是否自定义)。

格式：

//自定义属性一般都用data-开头
  //在标签中定义 
  data-属性名=属性值;
  // 在js中定义
  element.setAttribute("data-属性名","属性值");

上面的设置如果获得自定义属性可如下：

//这样获得属性值的时候  兼容性很高
  element.getAttribute("data-属性名")
// H5中新增的方式，兼容性就差一些 尤其ie11版本以上才支持
  element.dataset.属性名   //或 element.dataset["属性名"]

案例演示

下面演示的案例会涉及到一些常用的算法，在开发过程中拿起来就可以用的。

案例1 排他思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>
        div{
            margin: 10px auto;
            text-align: center;
        }
        button{
            margin-left: 5px;
            cursor: pointer;
            background-color: blue;
        }
    </style>
</head>
<body>
<div>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
</div>

<script>
    <!--  -->
    var elements=document.getElementsByTagName("button");
    var len=elements.length;
    for (var i=0; i<len;i++){
        var element= elements[i];
        // 循环元素 将其绑定onclick事件
        element.onclick=function(){
            // 这个就是排他思想 将其它的元素如果 被点击变红就将其还原
            for (var j=0; j<len;j++) {
                var element_z = elements[j];
                element_z.style.backgroundColor="blue";
            }
            this.style.backgroundColor="red";

        }
    }
</script>
</body>
</html>

在这里插入图片描述

这个使用了最经典的一个算法或者说逻辑，那就是排他思想，就在自己变化之前，先把所有变化的的对象干掉，然后再自己变。

案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            margin: 10px auto;
            text-align: center;
        }

        table{
            width: 200px;
            margin: 0px auto;
            border-collapse: collapse;
        }
        td{
            border: 1px solid black;
        }
        thead tr{
            background-color: dodgerblue;
        }
        input{
            width: 50px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div>
    <strong>游戏选择</strong>
    <table>
        <thead>
        <tr>
            <td><input  value="all" type="checkbox"></td>
            <td>游戏名称</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input value="艾尔登法环" type="checkbox"></td>
            <td>艾尔登法环</td>
        </tr>
        <tr>
            <td><input value="塞尔达传说荒野之息" type="checkbox"></td>
            <td>塞尔达传说荒野之息</td>
        </tr>
        <tr>
            <td><input value="消逝的光芒" type="checkbox"></td>
            <td>消逝的光芒</td>
        </tr>
        <tr>
            <td><input  value="赛博2077" type="checkbox"></td>
            <td>赛博2077</td>
        </tr>
        <tr>
            <td><input value="使命召唤系列" type="checkbox"></td>
            <td>使命召唤系列</td>
        </tr>
        </tbody>
    </table>
</div>


<script>
    <!-- 估计这样复杂使用，明白得到元素可以这样用 -->
    var element_thead_input=document.getElementsByTagName("thead")[0].getElementsByTagName("input")[0];
    var elements_tbody_input=document.getElementsByTagName("tbody")[0].getElementsByTagName("input");
    var len=elements_tbody_input.length;
    // 如果选择全部或者取消全部，所有的checkbox都会勾选或者不勾选
    element_thead_input.onclick=function () {
        for(var i=0;i<len;i++){
            elements_tbody_input[i].checked=this.checked;
        }
    }
    //     绑定其它的可选
    for(var i=0;i<len;i++){
        elements_tbody_input[i].onclick=function(){
            element_thead_input.checked=true;
            for(var i=0;i<len;i++){
                if (!elements_tbody_input[i].checked){
                    element_thead_input.checked=false;
                    break;
                }

            }
        }
    }

</script>
</body>
</html>

在这里插入图片描述

案例3 自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <style>

        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            width: 400px;
            margin: 10px auto;
        }
        li{
            list-style: none;
            float: left;
            padding: 10px;
            background-color: grey;
            border-bottom: 1px solid red;
            cursor: pointer;
        }
        .current{
            background-color: red;
        }
        .clearfix:after{
            display: block;
            content: "";
            clear: both;

        }

        .content_txt div{
            display: none;
        }

    </style>
</head>
<body>
<div class="tap clearfix">
    <ul>
        <li class="current">商品介绍</li>
        <li>规格包装</li>
        <li>售后保障</li>
        <li>商品评价(100w)</li>
    </ul>
</div>
<div class="content_txt">
    <div class="item" style="display: block;">这个是一个神奇的产品，使用后会让脱发。</div>
    <div class="item">一盒有五包，一包5kg，一次吃一包</div>
    <div  class="item">吃死人不包退，购买后不退</div>
    <div class="item">
        <p>隔壁老王：吃了一包瞬间觉得自己头顶不觉得闷了</p>
        <hr>
        <p>龙傲天：瞬间觉得头顶的犄角没有毛发遮挡了</p>
        <hr>
    </div>
</div>


<script>
    var elements_li=document.getElementsByTagName("li");
    var elements_item=document.getElementsByClassName("item");
    var len=elements_li.length;
    for(var i=0;i<len;i++){
        var element_li=elements_li[i];
        element_li.setAttribute("data-index",i)
        element_li.onclick=function () {

            for(var j=0;j<len;j++){
                elements_li[j].className="";
            }
            this.className="current";

            for(var j=0;j<len;j++){
                elements_item[j].style.display="none";
            }
            elements_item[this.getAttribute("data-index")].style.display="block";

        }
    }

</script>
</body>
</html>

在这里插入图片描述

小猪弟
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全面解析HTML5中的标准属性与自定义属性
09-28
主要介绍了HTML5中的标准属性与自定义属性,文中也谈到了JavaScript操作DOM时访问自定义属性的一些相关知识点,非常推荐,需要的朋友可以参考下
JavaScript实现body内任意节点的自定义属性功能示例
10-19
主要介绍了JavaScript实现body内任意节点的自定义属性功能,涉及javascript针对DOM节点的获取及属性设置相关操作技巧,需要的朋友可以参考下
DOM破坏及复现实验
lml_0916的博客
08-01 395
这个也是，onerror替代了src排的第一个的位置，它就变成了第一个，但是我在刚刚循环的时候，已经把第一个给循环了，我要去循环下一个的时候它没有了，所以我就结束循环了。就是将src元素写道第2为，在删除第一位的时候它变成第一位就会保留了，然后将onerror保存到第四位，那样在删除第一位后，原来的第三位变成了第二位，第四位就变成了第三位，，第二位运行完后被删除，最开使的第四位就变成了第2位，但是我们已经执行完第二位了，所以后面就没有了，他就跳出了循环。可以看到它第一个返回的是area，另一个是a标签。..
JS DOM属性，包括固有属性和自定义属性，以及属性获取、移除和设置
08-08 1237
属性分为固有属性property和自定义属性attribute 固有属性查看 固有属性可以通过ele.property 来获取，自定义属性不行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ ...
JavaScript之DOM自定义属性的使用
weixin_44827643的博客
06-26 640
本文主要介绍DOM中自定义属性的设置、获取及移除。自定义属性比较典型的应用是给元素添加一个“标签”，方便查找该元素或建立此元素同其他元素之间的联系。1.setAttribute用于设置属性的值，若不存在该属性则进行创建2.getAttribute用于获取相应属性的值3.removeAttribute用于移除相应属性。（注：有时某些属性的值通过设置值的方式达不到效果，就可以进行移除）...
js之DOM获取元素,更改属性
Gik99的博客
08-04 3272
js之DOM获取元素,更改属性
【DOM】DOM操作之如何修改元素的内容与属性_02
青春木鱼的博客
05-04 3324
DOM操作之如何修改元素的内容与属性。元素的内容修改分为3种：元素开始标签到结束标签之间的原始的HTML内容、纯文本内容以及获取或修改表单元素的值；元素的属性修改分为3种：字符串类型的HTML标准属性、bool类型的HTML标准属性、自定义扩展属性
ckeditor5-custom-element:在ckeditor5中插入自定义元素（html标记）
04-28
它允许在编辑器中添加自定义元素。 创建的元素的html转换如下所示：<CustomTag>placeholder text安装使用NPM安装： npm install ckeditor5-custom-element 要添加此插件的功能，您应该对编辑器进行自定义构建。 请...
jasmine-dom::sloth:自定义茉莉花匹配器以测试DOM的状态
04-28
[所有贡献者]（ )](# ） 茉莉花 自定义茉莉花匹配器以测试DOM的状态 问题您想使用Jasmine编写测试来断言有关DOM状态的各种事情。 作为该目标的一部分，您希望避免这样做时出现的所有重复模式。 检查元素的属性，其...
hlf-dom-extensions:自定义用户界面
05-18
HLF DOM扩展 __ __ ___/\ \ /\ \ / __\\ \ \_... 某些扩展还具有可通过自定义属性配置的示例和/或必需的样式。主要功能摘要： 基于悬停的“意图”，并防止冗余切换或DOM颠簸。 对一组触发器重复使用相同的技巧，以使DOM
浅谈JS读取DOM对象(标签)的自定义属性
10-21
下面小编就为大家带来一篇浅谈JS读取DOM对象(标签)的自定义属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
getElementsByClassName()获取元素后onclick事件无效解决办法
段占彪的博客
05-15 8559
问题描述 今天使用源生js实现 点击按钮关闭对应div功能（有多个按钮，相同class名），出现onclick无效情况。 问题原因 使用getElementById获取元素的结果是：当前元素 使用getElementsByClassName获取元素的结果是：相同class名元素数组。 解决办法 var div = document.getElementById("div"); console.log("getElementById: "); console.log(div);
JavaScript之DOM之获取元素、操作元素、自定义属性、节点、事件
m0_63374484的博客
01-23 1573
一、获取元素 1. 根据ID获取（getElementById(ID)获取元素） <div id="time">2022-01-23</div> <script> var element = document.getElementById('time'); console.log(element); console.log(typeof element); console.dir(element);
Web-API-DOM的自定义属性的操作-H5自定义属性-节点概述-节点层级-父子节点-兄弟节点-创建节点-添加节点
dream_vk的博客
07-01 306
4.6 自定义属性的操作 获取属性值 element.属性 获取属性值。 element.getAttribute(‘属性’); 区别： element.属性 获取内置属性值（元素本身自带的属性） element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性 设置属性值  element.属性 = ‘值’ 设置内置属性值。 element.setAttribute(‘属性’, ‘值’); 区别： element.属性 设置内置属性值  element.
document.getElementById获取不到值的几种原因分析
热门推荐
java journey
09-23 5万+
前几天修改那个分页类，想加入跳转到指定页的功能，就是用户直接输入页码，点击按钮就可以跳到指定的页码！     一看这个需求，就可以想到利用GET传值的方式，但常规GET方式需要把链接写入标签的a href里面，而我们实际上是希望用按钮来进行点击，而不是一个简单的超链接形式。于是
Vue中使用getElementById结果返回元素为null ？
云间月
03-31 2万+
【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ？ 文章目录【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ？在created()中使用getElementByIdmounted()中使用getElementByIdcreated()中结合this.$nextTick()实现业务需求总结 首先，我在项目中用这样一个需求，...
DOM（一）：获取页面元素、操作元素、自定义属性
weixin_53912712的博客
12-23 1838
获取页面元素、操作元素
js获取自定义属性的两种方法
qq_41271393的博客
08-19 1万+
js获取自定义属性的两种方法 一、四种获取属性的方法 首先获取一个元素：var elem = document.getElementById(‘elem’); <div id="elem" class="box" title="hello" ancheng="Ancheng" data-user="小明" data-user-name="小小明"></div> 1、点(...
dom 自定义属性 data
最新发布
05-27
DOM 自定义属性 data-* 是 HTML5 中新增的一种用于在 HTML 元素上存储自定义数据的方式。这种方式可以避免使用全局变量或者其他容易产生命名冲突的方式来存储数据。 以 `data-` 开头的自定义属性可以在 HTML 元素上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值