DOM（文档对象模型）

文档树：

each label is a node in the tree

getElementById

document.getElementById('page-title')

getElementsByTagName

document.getElementsByTagName('li')

querySelectorAll

querySelectorAll('.class a') 返回所有
querySelector 返回找到的第一个

访问属性

e.nodeName 标签名
e.innerText 内部文字
e.paretnNode 父节点
e.nextElementSibling 下一个兄弟元素 previousElementSibling
e.childNodes 子节点
e.childElementCount 返回子节点数量
e.firstELementChild 第一个子节点
e.lastELementChild 最后一个子节点
修改 用=赋值

创建新的节点

步骤：

1. var newMember = document.creatElement('li')
2. var text = document.createTextNode('你好啊');
3. newMember.appendChild(text)
4. document.querySelector('#list').appendChild(newMember) 添加到最后

insertBefore 插入到特定位置

countrylist.insertBefore(newMember, countrylist.firstChild)

修改CSS

document.getElementById(id).style.property=新样式

事件

onclick=JavaScript

点击文本!

绑定函数

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

onload onunload

onload 和 onunload 事件会在用户进入或离开页面时被触发

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

JavaScript HTML DOM EventListener

document.getElementById("myBtn").addEventListener("click", displayDate);