一、预备知识
1、节点与节点类型
- 如何获得元素节点
var elementNode=document.querySelector('selector'); var elementNodes=document.querySelectorAll('selector');
- 如何获得属性节点(一个元素节点的html属性)
var attrs=elementNode.attributes; //返回elementNode的所有属性节点的集合 var attr=elementNode.getAttrubuteNode('attrName');//返回elementNode指定的属性节点
- 如何获得文本节点
var subNode=elementNode.firstChild; //返回元素节点的第一个子节点 var subNode=elementNode.lastChild; //返回元素节点的最后一个子节点
- 如何获得所有的子节点:childNodes
var temp=elementNode.childNodes;
- 三大节点类型:nodeType
三大节点:元素节点(<div></div>
)、属性节点(title='标题'
)、文本节点。
节点的三大属性:nodeType、nodeName、nodeValue。
返回节点的类型:元素节点–1、属性节点–2、文本节点–3
2、属性的特性:也叫作属性的“描述符”
属性:利用var声明的变量、对象的属性、对象的方法。
一个属性要么具备数据特性,要么具备访问器特性。
-
属性的数据特性:枚举性、可写性、取值、可配置性。
一个属性被创建出来之后,默认具备属性的数据特性。
Vue实例中data数据区所有的变量都具备访问器特性,不具备数据特性。 -
属性的访问器特性:枚举性可配置性、getter、setter。
getter:当获取属性取值时执行的代码(get:function(){})。
setter:当设置属性取值时执行的代码(set:function(){})。getter(可以拦截用户为变量的使用)和setter(可以拦截用户对变量的赋值)可以成功的实现数据拦截,例:
//有两个window下的属性:a,x。实现x对a的响应。 //修改x的值,a也变。 //获取x的值,返回a的值。 var a = 1000; Object.defineProperty(window,'x',{ enumberable:true, //可枚举 configurable:true, //可配置 get:function(){ //有人使用x变量了 return a; }, set:function(newValue){ //有人为X变量赋新值了 a = newValue; // console.log(newValue) } })
-
读取属性的特性:
Object.getOwnPropertyDescriptor(对象,'属性');
Object.getOwnPropertyDescriptors(对象))
var x=100,y=200,z='abc'; var temp=Object.getOwnPropertyDescriptor(window,"x"); console.log(temp);
-
设置属性的特性:
Object.defineProperty(对象,'属性',{描述符}); Object.defineProperty(对象,{ 属性:{描述符} 属性:{描述符} })
3、利用利用Object的方法遍历对象的可枚举属性
Object.keys(对象)
:遍历对象的可枚举属性名,结果为数组。
Object.values(对象)
:遍历对象的可枚举属性值,结果为数组。
Object.entries(对象)
:遍历对象的可枚举属性名和属性值,结果为二维数组。
var obj = {a:100,b:200,c:300,d:400,e:'abC'}
console.log(Object.keys(obj)) //["a", "b", "c", "d", "e"]
console.log(Object.values(obj)) //[100, 200, 300, 400, "abC"]
console.log(Object.entries(obj)) //[["a", 100]["b", 200]["c", 300]["d", 400]["e", "abC"]]
4、ES6为数组新增的静态方法
Array.from()
:将类数组和可遍历对象转换为数组。
我们这里用来遍历NodeList对象、NameNodeMap对象。
-
类数组(长得像数组的对象like-array object)
//对象的属性必须是整数,对象必须具备length属性。例: let obj={“0”:100,“1”:200,“2”:300,length:3} let array=Array.from(obj);
-
可遍历对象(lterator):可以使用for-of遍历的对象
原生的可遍历对象:数组、字符串、Set、Map、NodeList、NameNodeMap
for-in和for-of的区别:for-in用来遍历对象,for-of用来遍历可遍历的对象
NodeList对象:DOM操作当中找到的包含多个标记的元素节点。
NameNodeMap对象:DOM操作当中找到的属性节点的集合。
A. 利用for-of遍历NodeList对象:let nodes = document.querySelectorAll('.box'); //[Object NodeList] for(let item of nodes){ console.log(item) } let temp = Array.from(nodes) console.log(temp)
B. 利用for-of遍历NameNodeMap对象:
<a href="#" title="链接" target="_blank" class="lj">超级链接</a> let ljNode = document.querySelector('.lj'); let attrs = ljNode.attributes; console.log(attrs); for(let item of attrs){ console.log(item) } let temp = Array.from(attrs) console.log(temp)
5、ES6为字符串新增的方法
startWith(str)
:判断字符串是否以指定的子串str开头。
//例:判断.lj元素节点的所有属性是属性还是指令。
<a href="#" title="链接" target="_blank" class="lj" v-text='wenben' v-ok='message'>超级链接</a>
let ljNode = document.querySelector('.lj');
let attrs = ljNode.attributes;
Array.from(attrs).forEach(item=>{
if(item.nodeName.startsWith('v-')){
console.log(item.nodeName + '是指令')
}else{
console.log(item.nodeName + '是属性')
}
})
6、ES6类的书写方式
class 类名{
constructor(){//构造函数(创建实例的同时自动执行的函数叫做构造函数,在构造函数例this是指向实例的)}
方法名(){//方法}
}
//例:利用ES6类的书写方式定义Person类并创建p实例
class Person{
constructor(name,sex,age){
this.name = name;
this.sex = sex;
this.age = age;
}
showName(){
return this.name;
}
}
var p = new Person('小惜','女',21);
console.log(p.showName())