@(前端)
探索深度受个人能力所限，如有不当之处，恳请指教。
基础知识就此略过，下面主要记录在工作中的困惑。
1. DOM对象中的Property与Attribute
在jQuery中操纵DOM对象的属性用$\ $obj.attr()$ , 特性用 $\ $obj.prop()$
在《javascript高级程序》一书中DOM对象中的Property被翻译为DOM对象的特性，DOM对象的Attribute被翻译为DOM对象的属性。这个Property其实就是对象中的property（经常被称为对象的属性：属性名，属性描述）
比如通过对象字面量形式声明一个对象：
let peng = {
"name": "fuxiao",
"age": 25
}
// 检测对象中是否有name属性（属性名name，和属性名name的描述）
peng.hasOwnProperty('name')
// 列举出对象中所有的可枚举的属性的属性名（包括继承下来的属性，以数组的形式返回）
Object.getOwnPropertNames(peng)
// ES6中简介的对象表示方法（也属于字面量的形式）就很好理解了
var sex = "man"
var other = { sex }
页面渲染完成后，浏览器已将 DOM结构转为 DOM对象。此时再通过针对DOM对象属性操作的API对其属性操作，DOM对象的Attributes（NamedNodeMap）是动态变化的。但是DOM对象所对应的特性没有发生变化。
JS通过API获取到的是转换后的DOM对象。DOM对象的Property是基于DOM对象的Attribute创建的。
- 原生JS API将input对象的checked分别按特性和属性的操作（checked disabled hidden ....）
// input 输入框 <input type="text" checked="any value" id="inputText">
// 原生对checked按特性的操作 只要input元素设置特性checked ,无论值是什么，都将按checked=true 处理 这和元素特性disabled hidden一样
var oInput = document.getElementById('inputText')
console.log(oInput.checked) // true 获取checked特性
oInput.checkded = false // 设置checked特性
console.log(oInput.checked) // false 获取特性正确 但是DOM结构和DOM对象均没有发生变化
下面看下对DOM属性的操作
// 原生对checked按属性的操作
var oInput = document.getElementById('inputText')
console.log(oInput.getAttribute('checked')) // any value
oInput.setAttribute('checked', 'other value')
console.log(oInput.getAttribute('check')) // other value
// 更对其他DOM对象的属性操作一样
显然判断多选框或单选框是否选取，通过getAttribute得到的结果不正确。将checked 按特性处理，获取和设置均正确。但是对特性checked设置值时DOM结构和DOM对象没有发生变化，是浏览器的问题么？
应该与shadowDom有关，组件
网友评论