DOM

• 文档对象模型（Document Object Model, DOM）是HTML的编程接口，用对象和HTML结构一一映射，通过修改对象达到修改HTML节点的目的

元素操作

获取元素

    <div class="box">box1
        <div class="a"></div>
    </div>
    <div class="box">box2</div>
  	document.querySelector('.box')			//获取第一个.box
  	document.querySelectorAll('.box')		//获取一个 NodeList 类数组对象（可用...[]将其变为数组），包含多个Element
  	document.querySelector('.box>.a') 	//同理，任何在CSS3中合法的选取元素的方式都可以使用

querySelector和querySelectorAll都是ES5写法 推荐使用

• querySelector 的参数是一个任意合法的CSS3参数 获取的是一个Element 对象
• querySelectorAll 得到的是一个类数组对象 NodeList，需要遍历才能操作
• document.getElementsByClassName('class') 获取的是一个HTMLCollection 类数组对象 ES3写法（不推荐
• 类数组对象NodeList没有数组方法，但是它是一个可迭代对象，可以调用forEach遍历，可以用...[ ]把它变为数组

遍历元素

• NodeList 和 HTMLCollection的差异是前者可以直接遍历（调用forEach 方法），而HTMLCollection需要转换为数组（通过Array.from 或 for of）才能遍历
• 两者都可以用for of 进行遍历

.querySelector技巧

1. 不止document.querySlector 任何DOM元素都可以使用.querySlector

    <div class="box">box1
        <div class="a"></div>
    </div>
		let $box = document.querySelector('.box')
		let $a = $box.querySelector('.a')				//找到$box下面的.a并赋值

2. 把document.querySelector (All) 封装为函数，这样使用起来更方便

    <div class="box">box1
        <div class="a"></div>
    </div>
		let $ = s => document.querySelector(s)			//$是函数名，s是函数的参数，调用$，传入s
    console.log($('.a'));							//获取到.a

DOM元素属性

获取到 dom 元素后，可以用这些获取它们的属性

事件绑定

主要有两种方法

$node.onclick = function(){		//绑定不代表执行，只有当用户点击了，才会触发事件
       //操作
}				

$node.addEventListener('click', function(e) {
        	console.log(this)						//this代表$node
}

元素赠删改查

1. DOM创建、追加

• document.createElement('div') 创建DOM节点，参数是标签名
• $parent.append() 在node元素内部尾部追加DOM节点或字符串
• $node.innerText = 'hello' 设置的内容会作为$node内的文本，安全，可随意使用

2. DOM 移动、替换、删除

• $reference.before($node1, $node2)$reference的前面是$node1
• $reference.after($node1, $node2)$reference的后面是 $node1
• $old.replaceWith($node1) 把$old替换为$node1
• $old.remove() 删掉$old

$node1 可以是文本可以是节点

DOM 属性操作

1. 增删改查

• node.getAttribute('id) 获取 node 的id
• node.setAttribute('id', 'name') 设置node的id为name，重复设置会替换掉node之前的属性

2. 样式

• node.style.height = '12px' //设置node高为12px
• getComputedStyle(node).backgroundColor //获取node的背景色，记得采取驼峰
• 尽量通过设置 class 去更改样式

class 操作

• node.classList.add('className') //在node中添加上className
• node.classList.remove('className') //删除node上的className
• node.classList.contains('className') //验证node中是否有该className，返回true/false
• node.classList.toggle('className') //如果node中有该className，则删除该className并返回false，如果没有，则添加并返回true