【学习前端第三十五课】DOM的自定义属性

DOM的自定义属性

首先，标签的属性除了我们认识的一些系统自带的属性之外，我们也可以自定义标签的属性，我们可以在任意你需要的元素上面添加任何你想要的属性，没有限制

<input type="text" placeholder="请输入内容" age="18" >

属性我们可以分成两个大类来看

1、attribute属性：标签元素属性

2、property属性：DOM对象属性

当我们通过querySelector方法获取到一个标签元素之后，attribute属性会自动转换成property属性，在attribute属性当中还分为系统自带属性和自定义属性，在上面提到的自动转换过程当中，自会转换attribute属性中系统自带属性并不会自动转换自定义属性

<input type="text" placeholder="请输入内容" age="18" >
<script type="text/javascript">
    var text = document.querySelector("input");
    //系统自带属性
    text.type;
    text.placeholder;
    
    //age属性自定义属性，无法在获取成DOM之后自动转换成property属性，所以不能通过上面的方式调用
    //要使用DOM的一个特殊的方法getAttribute
    text.getAttribute("age");    //"18"
</script>

自定义属性介绍

针对HTML里面的自定义属性的情况，我们发现，自定义的attribute是不能转换为property的，这样操作是不太方便的，所以w3c推出了标准的自定义属性定义与使用方式，只需要在原来自定义属性的基础上在前面添加一个 data- 即可，比如 data-age="18" 这样做之后就可以在网页加载的时候自动把这些自定义属性转换成property

自定义属性定义

<input type="text" placeholder="请输入内容" id