当前位置：网站首页>setAttribute、getAttribute、removeAttribute

setAttribute、getAttribute、removeAttribute

2022-07-21 18:06:00 【梁什么鸭，】

问题：下面两者的区别

box.setAttribute("liang", "456");
box.liang = 789;

<body>
	<div id="box" liang="123"></div>
</body>

<script>
		const box = document.getElementById('box');

            /*// 标签里元素里的自定义属性
            box.setAttribute('liang', '456');

            console.log(box.liang); // 输出undefined*/

            /*// JS里对象的 自定义属性
            box.liang = 789;

            console.log(box.liang); // 输出789*/

            console.log(box.liang); // 输出undefined     
</script>

setAttribute 设置的是标签里的liang

box.liang 设置的是box这个对象里的属性liang

   它跟标签是没有关系的，既不能修改div标签里的liang，也不能获取
   输出789，输出的是box这个对象的属性liang被 box.liang这条语句设置为值 789
而不是 div标签里的liang的值 被 box.liang这条语句修改成789

栗子1：

<script>
        window.onload = function () {
            let inp = document.getElementById('inp');

            inp.value = 'liang';
        };
    </script>
</head>

<body>
    <input type="text" id="inp">
</body>

页面立即显示 liang
在这里插入图片描述
打开控制台，查看Element

发现并没有value这个属性，也就是说输出的是 box这个对象上的 value属性值，而不是input标签里的value属性值

栗子2：

<script>
        window.onload = function () {
            let inp = document.getElementById('inp');

            inp.value = 'liang';

            /*inp.setAttribute('value', 'liang');*/

        };
    </script>
</head>
<body>
<div id="box" liang="123">
    <input type="text" id="inp" value="123">
    <p></p>
    <span></span>
    <img src="#" alt="">
</div>
</body>

立即输出liang
查看Element：
在这里插入图片描述
标签内的value 没有改变

栗子3：

/*inp.value = 'liang';*/

 inp.setAttribute('value', 'liang');

页面也立即输出liang
打开控制台查看Element
在这里插入图片描述
发现标签里添加了value属性

栗子4：

<script>
        window.onload = function () {
            let inp = document.getElementById('inp');

            /*inp.value = 'liang';*/

            inp.setAttribute('value', 'liang');

        };
    </script>
</head>
<body>
    <input type="text" id="inp" value="123">
</body>

页面立即输出liang
查看Element：
在这里插入图片描述
标签内的value属性改为了 liang

在控制台操作以下输入：
原始状态：
在这里插入图片描述
操作1：

无需刷新，立即输出123

操作2：
在这里插入图片描述
查看element，已做改变：

页面没有改变，控制台输出undefined

操作3：
在这里插入图片描述
无需刷新，直接显示 789

可以看出，当不刷新页面时，setAttribute输出undefined。
原因：
inp.value在修改值的过程中，修改的不是标签内 value属性的值，而是修改input里的值。
而setAttribute 修改的是 value属性的值，但不会触发视图更新

所以只用setAttribute 操作非法的自定义属性的标签属性节点

栗子：

<script>
        window.onload = function () {
            let inp = document.getElementById('inp');

            inp.value = 'liang';

            /*inp.setAttribute('value', 'liang');*/

        };
    </script>

</head>
<body>
<div id="box" liang="123">
    <input type="checkbox" id="inp" checked="123">
    <!--不管checked 的值是什么，复选框都会被选中-->
</div>

控制台输入：
在这里插入图片描述
复选框默认选中，就算checked是个空值，也会是选中状态