DOM
- 节点类型
元素
文本
属性（getAttribute、 setAttribute）
<div id="app" name="main">Hello!</div> <script> let node = document.querySelector('#app'); console.log(node.firstChild.nodeValue) // Hello! console.log(node.getAttribute('id')) // app console.log(node.getAttribute('name')) // main </script>
2.获取节点方法
querySelector() // 返回一个对象
querySelectorAll() // 返回一个数组对象
getElementById() // 获取id的
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 }; }
键盘按钮
document.onkeyup = function () { if(event.keyCode) { console.log(event.keyCode) } }
document.body 返回html dom中的body节点 即<body>
document.documentElement 返回html dom中的root 节点 即<html>
获取鼠标位置
http://www.cnblogs.com/dolphinX/archive/2012/10/09/2717119.html
https://www.cnblogs.com/mrdooo/p/6633688.html
三、new URLSearchParams：接收一个 URL 的查询字符串
const searchParams = new URLSearchParams(window.location.search);
searchParams.get('name')
