<body>
<h2 id="h2"></h2>
<input type="text" id="input">
<div id="app"></div>
</body>
let data = {};
Object.defineProperty(data, "a", {
get() {
return h2.innerText
},
set(value) {
let h2 = document.getElementById('h2');
h2.innerText = value;
console.log('set', value);
}
});
input.value = data.a//获取值 触发set
// 方式一 触发事件改变旧数据渲染新数据
input.oninput = function (e) {
data.a = e.target.value;
}
//方式 二
input.addEventListener('input',(e) => {
data.a = e.target.value
})
获取DOM方法
//节点 文档节点 docmuent->html
// 元素节点 element
// 属性节点 attribute
// 文本节点 text
let elementNOde = document.getElementById("app")//获取DOM节点
let attrNodeOne = elementNode.getAttribute("id")//获取属性值
let attrNodeTow = elementNode.getAttributeNode("id")//获取属性节点
let textNode = elementNode.firstChild;//获取文本节点