| nodeName | nodeType | nodeValue | |
|---|---|---|---|
| 文档节点 | #document | 9 | null |
| 元素节点 | 标签名 | 1 | null |
| 属性节点 | 属性名 | 2 | 属性值 |
| 文本节点 | #text | 3 | 文本内容 |
dom元素.childNodes属性,获取dom元素下的所有节点(包括文本节点和其他(换行符也是文本节点))
而dom元素.children是获取dom元素下的所有的元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Title</title>
</head>
<body>
<div id="d">
<p>1</p>
<p>12</p>
<p>123</p>
<p>1234</p>
<p>12345</p>
</div>
<script>
var d = document.getElementById("d");
console.log(d.childNodes);
console.log(d.children);
</script>
</body>
</html>
使用children输出结果
使用childNodes输出结果
特别注意,如果使用node.appendChild(被添加的节点) 如果被添加的节点存在于原有的文档上面,那么被添加的节点就会被移动到新的位置!
node.attributes获取元素节点身上的所有属性(返回一个对象)
<div id="id" attr="123"></div>
调用attributes返回截图
所以我们可以通过其里面的name,和value等获取属性名称和值
node.removeAttribute()从指定的元素中删除一个属性。具体用法
数据代理理解与原理
什么是数据代理
本来我们需要通过this._data.属性名才可以读取到data上的属性值的,但是我们通过数据代理,可以直接通过vm.属性名就可以读取到了
数据代理干什么的,有什么用简化了流程 *** 作,可以看看vuex当中的mapGetters和mapState就是简化了我们的流程
数据代理原理是什么原理就是通过defineProperty给vm添加data当中所有的属性和属性值
并且通过getter返回所要读取的属性值,比如读取this.msg.那么就自动调用getter当中的方法
并且通过setter设置要设置的属性值,比如要设置this.msg = "新信息",那么就会自动调用setter方法
{{ xxx }}) *** 作的是文本节点,通过textContent=动态值和正则来进行匹配指令语法: *** 作元素节点
事件指令(比如说v-on:xxx=xxxx),给元素绑定直接的事件名和回调函数,(通过addEventListener(事件类型,事件回调.bind(vm)))来进行绑定(注意通过bind来改变this的指向了)非事件指令
v-text: element.textContent = 动态值v-html: element.innerHTML = 动态值v-bind:class: element.className = 动态值 + 静态class 除了事件指令外,解析其他模板语法的时候,都会创建一个对应的watcher对象,用于将来更新对应的节点
数据绑定
数据双向绑定
理解
以input中的v-model来说,也就是从data到页面的绑定:输入框是根据data中的msg做初始化显示和更新显示从页面到data绑定:当输入发生改变时，会自动的将输入的最新值自动保存到data的msg上 原理
从vm配置对象当中的data到页面的绑定:内部给input指定了动态value为msg的值，因为有单向数据绑定的存在，一旦更新msg, 输入框就会自动更新显示**从页面到data绑定:**内部给input绑定了input事件监听(input事件监听是输入的内容和原来内容不同的时候才会执行,而change是改变就触发)，在回调函数中读取input最新的value值保存到data的msg属性上
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）