获取元素
//通过指定的id获取某个元素
document.getElementById('标签名')
//根据标签名获取一组元素
document.getElementsByTagName('标签名')
//根据类名返回元素对象集合
document.getElementsByClassName('类名')
//根据指定选择器返回第一个元素对象
document.querySelector('元素对象')
//根据指定选择器返回
document.querySelectorAll('元素对象')
//例子：
document.queryselector ('#nav')
//获取body元素
doucumnet.body
//获取html元素对象
document.documentElement修改元素内容
//去除html标签，去除空格和换行
'元素对象'.innerText
//解析html标签，保留空格和换行
'元素对象'.innerHTML操作元素节点
//获取父元素节点
'元素对象'.parentNode
//获取子节点:
'元素对象'.children
//创建节点
document.createElement('元素对象')
//添加节点
'元素对象'.appendChild('节点') //将一个节点添加到指定父节点的子节点列表末尾
'元素对象'.append('节点')//简写
'元素对象'.insertBefore('节点')//将一个节点添加到指定父节点的子节点列表前面
//删除节点
'元素对象'.removeChild('节点')
/*复制节点
*括号参数为 true ，会复制整个元素对象一切
*括号参数为空或者为 false ，只复制节点本身，不包含子节点
*/
'元素对象'.cloneNode()
//替换节点
'元素对象'.replaceChild('新节点', '旧节点'); 窗口加载事件
//禁止鼠标右键菜单
//contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
//禁止鼠标选中（selectstart 开始选中）
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})元素偏移量 offset
//返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
'元素对象'.offsetParent
//返回元素相对带有定位父元素上方的偏移
'元素对象'.offsetTop
//返回元素相对带有定位父元素左边框的偏移
'元素对象'.offsetLeft
//返回自身包括padding、边框、内容区的宽度，返回数值不带单位
'元素对象'.offsetWidth
//返回自身包括padding、边框、内容区的高度，返回数值不带单位
'元素对象'.offsetHeight元素可视区 client
//返回元素上边框的大小
'元素对象'.clientTop
//返回元素左边框的大小
'元素对象'.clientLeft
//返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
'元素对象'.clientWidth
//返回自身包括padding、内容区的高度，不含边框，返回数值不带单位
'元素对象'.clientHeight
元素滚动 scroll
//返回被卷去的上侧距离，返回数值不带单位
'元素对象'.scrollTop
//返回被卷去的左侧距离，返回数值不带单位
'元素对象'.scrollLeft
//返回自身实际的宽度，不含边框，返回数值不带单位
'元素对象'.scrollWidth
//返回自身实际的高度，不含边框，返回数值不带单位
'元素对象'.scrollHeight触屏事件
//手指摸到一个DOM元素时触发
touchstart
//手指在一个DOM元素上滑动时触发
touchmove
//手指从一个DOM元素上移开时触发
touchend触摸事件对象（TouchEvent）
touchstart、touchmove、touchend 三个事件都会各自有事件对象。
正在触摸屏幕的所有手指的一个列表 touches
正在触摸当前DOM元素上的手指的一个列表 targetTouches (常用)
手指状态发生了改变的列表，从无到有，从有到无变化 changedTouches
//例：
ul.addEventListener('touchstart',function(e){
cosnt startx = e.targetTouches[].pagex;
})鼠标事件类型
//鼠标点击左键触发
onclick
//鼠标经过触发
onmouseover
//鼠标离开触发
onmouseout
//获得鼠标焦点触发
onfocus
//失去鼠标焦点触发
onblur
//鼠标移动触发
onmousemove
//鼠标弹起触发
onmouseup
//鼠标按下触发
onmousedown
//例子
<script>
var div = document.querySelector('div');
div.onmouseenter = function() {
console.log('鼠标进入了div');
};
div.onmouseleave = function() {
console.log('鼠标离开了div');
};
</script>鼠标事件对象
//返回鼠标相对于浏览器窗口可视区的X坐标
e.clientX
//返回鼠标相对于浏览器窗口可视区的Y坐标
e.clientY
//返回鼠标相对于文档页面的X坐标
e.pagex
//返回鼠标相对于文档页面的Y坐标
e.pageY
//返回鼠标相对于电脑屏幕的X坐标
e.screenX
//返回鼠标相对于电脑屏幕的Y坐标
e.screenY
//例：
<script>
//鼠标事件对象MouseEvent
document.addEventListener ('click',function(e){
/1.c1ient鼠标在可视区的x和y坐标
console.log(e.clientx);
console.log(e.clientY);
console.log('------
-----)
//page鼠标在页面文档的x和y坐标
console.log(e.pagex);
console.log(e.pageY);
cons01e.1og('------
-----);
//screen鼠标在电脑屏幕的x和y坐标
console.log(e.screenx);
console.log(e.screenY);
})
</script>键盘事件
//某个键盘按键被松开时触发
onkeyup
//某个键盘按键被按下时触发
onkeydown
//某个键盘按键被按下时并弹起时触发(不识别功能键比如左右箭头，shift等。)
onkeypressLocation 对象
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
Location 对象属性
属性 |
描述 |
hash |
设置或返回从井号 (#) 开始的 URL（锚）。 |
host |
设置或返回主机名和当前 URL 的端口号。 |
hostname |
设置或返回当前 URL 的主机名。 |
href |
设置或返回完整的 URL。 |
pathname |
设置或返回当前 URL 的路径部分。 |
port |
设置或返回当前 URL 的端口号。 |
protocol |
设置或返回当前 URL 的协议。 |
search |
设置或返回从问号 (?) 开始的 URL（查询部分）。 |
Location 对象方法
属性 |
描述 |
assign() |
加载新的文档。 |
reload() |
重新加载当前文档。 |
replace() |
用新的文档替换当前文档。 |
History 对象
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
History 对象方法
方法 |
描述 |
back() |
加载 history 列表中的前一个 URL。 |
forward() |
加载 history 列表中的下一个 URL。 |
go() |
加载 history 列表中的某个具体页面。 |
History 对象描述
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。
//一行代码执行的操作与单击后退按钮执行的操作一样：
history.back()
//一行代码执行的操作与单击两次后退按钮执行的操作一样：
history.go(-2)