原生前端之DOM属性操作

最新推荐文章于 2023-08-16 16:46:47 发布

jifukui

最新推荐文章于 2023-08-16 16:46:47 发布

阅读量586

点赞数

分类专栏：前端综合文章标签：前端属性设置源代码

本文链接：https://blog.csdn.net/jifukui/article/details/103711575

版权

前端综合专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JavaScript与HTML交互最主要的是使用DOM进行控制HTML的文档信息。对于具有全标签结构的HTML元素可以分为属性和文本两部分，下面我们将对属性这一部分进行详细的讲解。话先不多说先举个栗子压压惊。

<!DOCTYPE html>
<html>
    <head>
        <title>设置读取元素的属性</title>
        <meta charset="utf-8">
        <style>
            input[type="checkbox"]
            {
                color: crimson;
            }
            input[type="button"]
            {
                background-color: black;
                color: blanchedalmond;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="checkbox" id="checkbox"  checked data-test="just do it" data-value="have fun">
            <pre id="info"></pre>
            <!--input type="button" onclick="display()" value="显示信息"-->
            <input type="button" onclick="UserSet()" value="显示自定义属性">
            <input type="button" onclick="check()" value="显示checked的属性值">
            <input type="button" onclick="has()" value="判断是否有checked的属性值">
            <input type="button" onclick="removecheck()" value="删除checked的属性值">
            <input type="button" onclick="removeuser()" value="删除test的属性值">
            <input type="button" onclick="setcheck()" value="设置checked的属性值">
            <input type="button" onclick="setuser()" value="设置用户自定义的属性值">
        </div>
        <script>
            var dim=document.getElementById("checkbox");
            var info=document.getElementById("info");
            function display()
            {
                info.innerHTML="当前元素具有的属性的数量为:"+dim.attributes.length+"<br>";
                for(var i=0;i<dim.attributes.length;i++)
                {
                    info.innerHTML+=`第${parseInt(i+1)} 个属性为:${dim.attributes[i].name} 属性值为：${dim.attributes[i].value}<br>`;
                }
            }
            function UserSet(){
                let value="",n=0;
                value=objp(dim.dataset);
                console.log(value);
                window.alert(`自定义的用户数据为:\n${value}`)
            }
            function objp(obj) 
            {
                let str="";
                for(let data in obj)
                {
                    if(Object.prototype.toString.call(obj[data])==='[object Object]')
                    {
                        str+=`属性名${data}\n`
                        str+=objp(obj[data]);
                    }
                    else
                    {
                        str+=`属性名为：${data} 属性值为 ${obj[data]} \n`;
                    }
                }
                return str;
            }
            function check()
            {
                window.alert(`当前的checked的属性值为:${dim.getAttribute('checked')}`);
            }
            function has()
            {
                window.alert(`是否具有checked属性:${dim.hasAttribute('checked')}`);
            }
            function removecheck()
            {
                dim.removeAttribute("checked");
                display();
            }
            function removeuser()
            {
                dim.removeAttribute("data-test");
                display();
            }
            function setcheck()
            {
                dim.setAttribute("checked","checked");
                display();
            }
            function setuser()
            {
                dim.setAttribute("data-haha","hahahahh");
                display();
            }
            display();
            
        </script>
    </body>
</html>

这个程序的主要思想是使用DOM提供的函数针对HTML元素的属性进行控制。

id为checkbox的标签是一个复选框。

id为info的标签将显示复选框这个元素的属性名称和属性值。

下方有7个按钮，通过点击按钮进行不同的操作：

显示自定义属性按钮用于显示用户自定义的属性的属性名称和属性值

显示checked的属性值按钮用于显示复选框元素的checked属性的属性值

判断是否有checked的属性值用于显示复选框元素是否具有checked这个属性

删除checked的属性值按钮用于删除复选框元素的checked属性值

删除test的属性值按钮用于删除复选框用户自定义的test属性。

设置checked的属性值按钮用于设置复选框的checked属性的属性值为checked

设置用户自定义的属性值按钮用于设置复选框的用户自定义属性haha的值为hahahahh

整体的效果图如下