javascript之attribute和properties
19-03-30：近期一些想的通彻了些，能够用通用的语言来表达了：
once HTMLElement is done，
most of HTML attribute have corresponding property;
attribute can not be changed unless rewriting attributes;
property can be changed;
自定义的HTML attribute 并没有相对应的 property；
property textContent也没有相对应的 attribute；
首先看一下Jquery(1.9+)中的attr和prop
不看API了，工作中总结的经验比API好懂。
<div id="div1" class="divClass" title="divTitle" title1="divTitle1"></div>
<img id="img1" src="pic.jpg" alt="imgAlt">
<input type="checkbox" id="inputText1">
<input type="checkbox" id="inputText2" checked>
<button id="button1">点击获取checkbox的checked属性</button>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
var a1 = $("#div1").attr("title1");//divTitle1 var a2 = $("#div1").attr("title");//divTitle var a3 = $("#div1").attr("class");//divClass console.log(a1); console.log(a2); console.log(a3); var a1 = $("#div1").prop("title1"); //undefined var a2 = $("#div1").prop("title");//divTitle var a3 = $("#div1").prop("class");//divClass console.log(a1); console.log(a2); console.log(a3); //小结：prop获取不到自定义属性，只能获取到固有属性，自定义属性应该使用attr()获取自定义属性
var a1 = $("#img1").attr("src");//pic.jpg var a2 = $("#img1").attr("alt");//imgAlt console.log(a1); console.log(a2); var a1 = $("#img1").prop("src");//http://localhost:63342/nodejs/pic.jpg var a2 = $("#img1").prop("alt");//imgAlt console.log(a1); console.log(a2);
//小结：.attr("src")获取到html中的属性，.prop("src")获取到绝对路径。
var a1 = $("#inputText1").attr("type");//checkbox var a2 = $("#inputText1").attr("checked");//undefined console.log(a1); console.log(a2); var a1 = $("#inputText1").prop("type");//checkbox var a2 = $("#inputText1").prop("checked");//false console.log(a1); console.log(a2); //小结：prop获取到input[type=checkbox]的固有属性，布尔值。
var a1 = $("#inputText2").attr("type");//checkbox var a2 = $("#inputText2").attr("checked");//checked console.log(a1); console.log(a2); var a1 = $("#inputText2").prop("type");//checkbox var a2 = $("#inputText2").prop("checked");//true console.log(a1); console.log(a2); //.attr('checked')获取字符串‘checked’,.prop()获取bealoon。
尝试1.在页面上点击inputText1变成选中状态
$("#button1").on("click",function () {
var a1 = $("#inputText1").attr("type");//checkbox
var a2 = $("#inputText1").attr("checked");//undefined
console.log(a1);
console.log(a2);
var a1 = $("#inputText1").prop("type");//checkbox
var a2 = $("#inputText1").prop("checked");//true
console.log(a1);
console.log(a2);
})
.prop("checked")的值随状态的改变而改变了，而.attr("checked")是undefined（初始状态）
尝试2.在页面上点击inputText2变成未选中状态
$("#button1").on("click",function () {
var a1 = $("#inputText2").attr("type");//checkbox
var a2 = $("#inputText2").attr("checked");//checked
console.log(a1);
console.log(a2);
var a1 = $("#inputText2").prop("type");//checkbox
var a2 = $("#inputText2").prop("checked");//false
console.log(a1);
console.log(a2);
})
.prop("checked")的值随状态的改变而改变了，而.attr("checked")是checked（初始状态）
尝试3.使用代码修改inputText1的checked属性
使用prop修改
$("#inputText1").prop("checked",true);
$("#button1").on("click",function () {
var a1 = $("#inputText1").attr("type");//checkbox
var a2 = $("#inputText1").attr("checked");//undefined
console.log(a1);
console.log(a2);
var a1 = $("#inputText1").prop("type");//checkbox
var a2 = $("#inputText1").prop("checked");//true
console.log(a1);
console.log(a2);
})
//页面中inputText1显示选中，.prop("checked")的值随状态的改变而改变了，而.attr("checked")是undefined（初始状态）
使用attr修改
$("#inputText1").attr("checked","checked");
$("#button1").on("click",function () {
var a1 = $("#inputText1").attr("type");//checkbox
var a2 = $("#inputText1").attr("checked");//checked
console.log(a1);
console.log(a2);
var a1 = $("#inputText1").prop("type");//checkbox
var a2 = $("#inputText1").prop("checked");//true
console.log(a1);
console.log(a2);
})
//页面中inputText1显示选中，.prop("checked")的值随状态的改变而改变了，而.attr("checked")变为checked（代码修改成功，用户操作无效）
so，如果你要判断用户交互，使用.prop()(・。・)，而.attr()多用来获取或是设置我们实际业务需要的自定义属性；像是title，alt，type等两者都能获取的和修改的，看习惯（？？？）
看一下原生的javascript，不看MDN上那些东西了，我直接在浏览器上看到这个
可以在Properties下找到className,id和title，找不到title1,是不是和jq里的prop差不多？不能收集用户的自定义属性。
尝试使用getAttribute取值
var a1 = document.getElementById("div1").getAttribute("title1"); var a2 = document.getElementById("div1").getAttribute("class"); var a3 = document.getElementById("div1").getAttribute("id"); var a4 = document.getElementById("div1").getAttribute("title"); console.log(a1) console.log(a2) console.log(a3) console.log(a4)
无论是固有属性还是自定义的属性都可成功获取。
尝试换成inputText1和inputText2，使用两种方法获取对比：
var a1 = document.getElementById("inputText1").getAttribute("checked"); var a2 = document.getElementById("inputText2").getAttribute("checked"); var a3 = document.getElementById("inputText1").checked; var a4 = document.getElementById("inputText2").checked; console.log(a1) //null console.log(a2) // console.log(a3) //false console.log(a4) //true
尝试在页面上点击修改inputText1和inputText2的值
console.log(a1) //null
console.log(a2) //
console.log(a3) //true
console.log(a4) //false
尝试代码赋值
document.getElementById("inputText1").setAttribute("checked", "checked");
document.getElementById("inputText2").checked = false
document.getElementById("button1").onclick = function () {
var a1 = document.getElementById("inputText1").getAttribute("checked");
var a2 = document.getElementById("inputText2").getAttribute("checked");
var a3 = document.getElementById("inputText1").checked;
var a4 = document.getElementById("inputText2").checked;
console.log(a1)//checked
console.log(a2)//
console.log(a3)//true
console.log(a4)//false
}
不需要繁琐的概念，仔细想想这几个‘尝试’，在编辑器了试试就能明白他们的区别，然后怎么用了
补充：jquery的:checked选择器使用
input type="radio" name="llll" checked> <input type="radio" name="llll" value="1"> <input type="radio" name="llll" value="2"> <input type="radio" name="llll" value="3"> <input type="radio" name="llll" value="4"> <button>选取</button> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script> $("button").on("click", function () { var value = $("input[name=llll]:checked").val(); console.log(value); }) </script>
进入页面后直接点击button，获取的是 on ，没有设置value是默认值是 on ，设置value值则获取对应设置值；很有趣的地方，今天第一次发现
点击其他radio后，点击button获得相应的value；
