Document接口表示任何在浏览器中已经加载好的网页，并作为一个入口去操作网页内容（也就是DOM tree）
image.png
图上每一个方框都是这个树的一个节点。位于上方的是父节点，位于下方的是子节点。位于同一个父节点下方的子节点是相邻的（兄弟节点）。
图上的内容用我们JS第一课中学的知识来实现就是
<script>
var h1 = document.createElement('h1')
document.body.appendChild(h1)
h1.textContent = 'Header'
var p = document.createElement('p')
document.body.appendChild(p)
p.textContent = 'paragraph'
</script>
获取一个元素可以用
document.getElementByClass
document.getElementByClassName
document.getElementById
document.querySelector //必须是有效的CSS选择器字符串，获取一个元素
document.querySelectorAll //必须是有效的CSS选择器字符串，获取一个对象的集合，配合篇历使用
第一节课还学习了.onclick和.onkeypress
edit.onclick = function (editThis) {
editItem = editThis['target']['id']
newurl = prompt('输入你想保存的网址')
hash[editItem] = newurl
localStorage.setItem('save',JSON.stringify(hash))
}
返回键盘所按键的相关信息
document.onkeypress = function (userPress) {
index3 = userPress['key']
website = hash[index3]
window.open('http://' + website, '_blank')
}
第二节课我们用canvas做了一个画板
获取浏览器的视口宽高
document.documentElement.clientWidth
document.documentElement.clientHight
在不同客户端（触屏和非触屏）上的用户接触属性
非触屏
document.onmousedown
document.onmousemove
document.onmouseup
触屏
someElement.ontouchstart
someElement.ontouchmove
someElement.ontouchend
节点之间的父子和兄弟关系
<div class="father">
<div class="son1">
bigbrother
</div>
<div class="son2">
littlebrother
</div>
</div>
<script>
var father = document.querySelector('.father')
var childNodes = father.childNodes //获取子元素的标签及文本内容（包含'text内容'回车）
console.log(childNodes)
var children = father.children //获取子元素的标签
console.log(children)
children[0].parentNode === father //ture
</script>
image.png
