HTML attribute特性和DOM property属性的区别

最新推荐文章于 2022-06-19 12:46:14 发布

置顶 Alcantara6

最新推荐文章于 2022-06-19 12:46:14 发布

阅读量1.1k

点赞数

分类专栏：前端文章 jQuery文章文章标签： jQuery javascript 表单

本文链接：https://blog.csdn.net/alcantara/article/details/79674085

版权

前端文章同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

jQuery文章

6 篇文章 0 订阅

订阅专栏

2019-9-4更新：
Angular官方文档中的解释

详解 HTML attribute 和 DOM property，作者：justjavac

特性attributes的范围更大，包括标签的标准属性和自定义加入的非标准的属性。
当浏览器解析网页时，将 HTML 特性映射为了 DOM 属性
可以从DOM 对象添加属性
当 HTML 特性映射为 DOM 属性时，只映射标准属性，访问非标准属性将得到 undefined。
DOM 对象也提供了操作特性的 API，可以从attributes获取非标准的属性。
特性永远都是字符串或 null
data- 开头的属性
input.value 的同步是单向的，只是 attribute --> property

attr——映射到prop

HTML标签的属性——初始状态
checked 是个布尔值，只要存在该属性即为true
checked=”checked”或checked=其它任意数据类型（false、空字符串），赋的只是字面量，不改变本身的属性值true

prop——不会影响attr

DOM元素的特性——实时状态
<input>标签里有checked， prop的值即为true
通过在浏览器点选，改变checked作为prop的值，不会改变checked作为attr的值

以下为示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>attr and prop</title>
        <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <fieldset class="sports1">
            <h2>你爱好的运动是？</h2>
            <!--checked的“=”右边即使设为空，甚至false，这只是字面量，本身的值还是true，被选中，checked的property属性为true-->
            <input type="checkbox" checked = "checked" name="items" value="足球" />
            <label for="football">足球</label> 
            <input type="checkbox" checked = "任意字面量" name="items" value="篮球" />
            <label for="basketball">篮球</label>
            <input type="checkbox" name="items" value="羽毛球" />
            <label for="badminton">羽毛球 </label>
            <input type="checkbox" name="items" value="乒乓球" />
            <label for="pingpang">乒乓球</label>
            <br />
            <input type="button" id="checkedAll" value="全　选" />
            <input type="button" id="checkedNo" value="全不选" /> 
            <input type="button" id="checkedRev" value="反　选" />
            <input type="submit" id="send" value="提　交" />                
        </fieldset>

        <script>
            $(function() {
                $items = $(".sports1 :checkbox");
                $("#checkedAll").click(function() {
                    //attr相当于设置初始状态，如果初始没有出现checked,这里给checked的boolean属性设置为true，相当于给所有input加了checked属性且boolean值为true, 此时checked的property值也为true
                    //$items.attr("checked", true);
                    $items.prop("checked", true);
                });
                $("#checkedNo").click(function() {
                    // attr相当于设置初始状态，这里给checked的布尔属性设置为false，相当于移除了每个input里的checked属性，checked的property特性相应地变为false; 
                    // 但是如果状态被选中过，checked的property特性变为了true,checked的布尔属性设置设为false并不会改变checked的property特性为true，所以状态还是选中的。
                    // $items.attr("checked", false);
                    $items.prop("checked", false);
                });
                $("#checkedRev").click(function() {
                    $items.each(function() {
                        //这里也是property特性
                        this.checked = !this.checked;
                    });
                });
            });
        </script>
    </body>
</html>