JS目前所学的DOM

Document接口表示任何在浏览器中已经加载好的网页，并作为一个入口去操作网页内容（也就是DOM tree）

image.png

图上每一个方框都是这个树的一个节点。位于上方的是父节点，位于下方的是子节点。位于同一个父节点下方的子节点是相邻的（兄弟节点）。
图上的内容用我们JS第一课中学的知识来实现就是

获取一个元素可以用

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

节点之间的父子和兄弟关系

        

            bigbrother
        
        

            littlebrother
        
    
    

image.png