DOM

节点

　　　　元素、文本、属性

　　 2.

　　　　querySelector()　　querySelectorAll()

　　　　getElementById()　　getElementsByTagName()　　getElementsByName()

　　 3.

子节点

　　　　childNodes[0]　　firstChild　　lastChild

父节点

　　　　parentNode　　nextSibling　　previousSibling

节点信息

　　　　nodeName　　nodeType(132)　　nodeValue

二、事件

onload
onscroll

onkeyup
onkeydown

onmouseenter(鼠标指针移动到元素上时触发)
onmouseout(鼠标指针移动到元素外时触发)

onclick
onmousedown(点击鼠标时触发)
onmousemove
onmouseup(松开鼠标时触发)

　　mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。

　　mouseenter和mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次。

　　mouseover和mouseout比mouseenter和mouseleave先触发

touchstart，touchmove，touchend

实现图片轮播
　　https://blog.csdn.net/m0_37568521/article/details/77836756

screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。
client：使用区、客户区。指的是客户区，当然是指浏览器区域。
offset：偏移。指的是目标甲相对目标乙的距离。
scroll：卷轴、卷动。指的是包含滚动条的的属性。
inner：内部。指的是内部部分，不含滚动条。
avail：可用的。可用区域，不含滚动条，易与inner混淆。
window.innerWidth/innerHeight：浏览器可见区域的内宽度、高度（不含浏览器的边框，但包含滚动条）。兼容：ie9/10、chrome、firefox。
window.screen.availWidth/availHeight:屏幕的可用宽度、高度（通常与屏幕的宽度、高度一致）。兼容性：ie6/7/8/9/10、chrome、firefox。

鼠标移动

    document.onclick = function (ev) {
        console.log('相对于屏幕：菜单栏+可视区')
        console.log(getScreenMousePos(ev))
        console.log('相对于可视区窗口')
        console.log(getFaceMousePosx(ev))
        console.log('相对于文档： 相对于可视区窗口 + 滚动条区')
        console.log(getDocMousePoss(ev))
    }
    function getScreenMousePos(event) {
        var e = event || window.event;
        return {'x':e.screenX,'y':e.screenY}
    }
    function getFaceMousePosx(event) {
        var e = event || window.event;
        return {'x':e.clientX,'y':e.clientY}
    }
    function getDocMousePoss(event) {
       var e = event || window.event;
       var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
       var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
       var x = e.pageX || e.clientX + scrollX;
       var y = e.pageY || e.clientY + scrollY;
       return { 'x': x, 'y': y };
    }

View Code

键盘按钮

document.onkeyup = function () {
    if(event.keyCode) {
        console.log(event.keyCode)
    }
}

View Code

document.body　　　　　　　　返回html dom中的body节点即<body>

document.documentElement　　返回html dom中的root 节点即<html>

setAttribute

getAttribute

获取鼠标位置

http://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html

https://www.cnblogs.com/mrdooo/p/6633688.html

JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别

原文地址：https://www.cnblogs.com/lgyong/p/8998967.html