js_dom 操作

html被浏览器解析之后就是一颗dom树，要改变html的结构，就需要通过js来操作dom

1. 找到节点

• document.getElementById() 
• document.getElementByTagName()
• document.getElementByClassName()
• document.querySelector('#q1')
• document.querySelectorAll('div.highlighted > p')

2. 修改

• ele.innerHTML = 'hello world'
• ele.attr = 'new value'
• ele.setAttribute(attr, val)
• ele.style.property = 'new style'  修改css样式

3. 添加和删除元素

• document.createElement(html)
• document.removeChild(html)　
• document.appendChild(html)
• document.replaceChild(html)
• document.write(text)

4. 添加事件处理程序

• document.getElementById(id).onclick = function(){code}　　　　　　　

HTML 事件的例子：

• 当用户点击鼠标时
• 当网页加载后
• 当图像加载后
• 当鼠标移至元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户敲击按键时

事件：

• <h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1>

•  <h1 onclick="changeText(this)">点击此文本！</h1>
• onload 和 onunload ； 用户进入及离开页面
• onchange 与输入字段验证结合使用
• onmouseover 和 onmouseout 鼠标移至元素上或移出元素时出发的事件
• onmousedown  和 onmouseup , onclick

事件监听器

　　addEventListener() 方法　

　　　1.为指定元素指定事件处理程序

　　　2.为方法附加事件处理程序而不会覆盖原来的事件处理程序， 可以为同一个事件添加多个事件处理程序。

　　　3. document.getElementById('mybtn').addEventListener('click',displaydate)　

　　removeEventListener()

　　　1. 为指定元素删除通过addeventlistener添加的事件处理程序