Practical native events in web development

get element

//通过指定的id获取某个元素
document.getElementById('标签名')
//根据标签名获取一组元素
document.getElementsByTagName('标签名')
//根据类名返回元素对象集合
document.getElementsByClassName('类名')
//根据指定选择器返回第一个元素对象
document.querySelector('元素对象')
//根据指定选择器返回
document.querySelectorAll('元素对象')
//例子：
document.queryselector ('#nav')
//获取body元素
doucumnet.body
//获取html元素对象
document.documentElement

Modify element content

//去除html标签，去除空格和换行
'元素对象'.innerText
//解析html标签，保留空格和换行
'元素对象'.innerHTML

Manipulating element nodes

//获取父元素节点
'元素对象'.parentNode
//获取子节点:
'元素对象'.children  
//创建节点
document.createElement('元素对象')
//添加节点
'元素对象'.appendChild('节点') //将一个节点添加到指定父节点的子节点列表末尾
'元素对象'.append('节点')//简写
'元素对象'.insertBefore('节点')//将一个节点添加到指定父节点的子节点列表前面
//删除节点
'元素对象'.removeChild('节点') 
/*复制节点
*括号参数为 true ，会复制整个元素对象一切
*括号参数为空或者为 false ，只复制节点本身，不包含子节点
*/
'元素对象'.cloneNode() 
//替换节点
'元素对象'.replaceChild('新节点', '旧节点'); 

window load event

//禁止鼠标右键菜单
​
//contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
​
document.addEventListener('contextmenu', function(e) {
​
e.preventDefault();
​
})
​
//禁止鼠标选中（selectstart 开始选中）
​
document.addEventListener('selectstart', function(e) {
​
  e.preventDefault();
​
  })

element offset offset

//返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
'元素对象'.offsetParent
//返回元素相对带有定位父元素上方的偏移
'元素对象'.offsetTop
//返回元素相对带有定位父元素左边框的偏移
'元素对象'.offsetLeft
//返回自身包括padding、边框、内容区的宽度，返回数值不带单位
'元素对象'.offsetWidth
//返回自身包括padding、边框、内容区的高度，返回数值不带单位
'元素对象'.offsetHeight

Element viewport client

//返回元素上边框的大小
'元素对象'.clientTop
//返回元素左边框的大小
'元素对象'.clientLeft
//返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
'元素对象'.clientWidth
//返回自身包括padding、内容区的高度，不含边框，返回数值不带单位
'元素对象'.clientHeight
元素滚动 scroll
//返回被卷去的上侧距离，返回数值不带单位
'元素对象'.scrollTop
//返回被卷去的左侧距离，返回数值不带单位
'元素对象'.scrollLeft
//返回自身实际的宽度，不含边框，返回数值不带单位
'元素对象'.scrollWidth
//返回自身实际的高度，不含边框，返回数值不带单位
'元素对象'.scrollHeight

touch screen event

//手指摸到一个DOM元素时触发
touchstart
//手指在一个DOM元素上滑动时触发
touchmove
//手指从一个DOM元素上移开时触发
touchend

Touch event object (TouchEvent)

The three events touchstart, touchmove, and touchend each have their own event objects.

A list of all fingers that are touching the screen touches

A list of fingers that are touching the current DOM element targetTouches (commonly used)

A list of finger status changes, from nothing to something, from something to nothing changed changedTouches

//例：
ul.addEventListener('touchstart',function(e){
    cosnt startx = e.targetTouches[].pagex;
})

mouse event type

//鼠标点击左键触发
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>

mouse event object

//返回鼠标相对于浏览器窗口可视区的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>

keyboard events

//某个键盘按键被松开时触发
onkeyup
//某个键盘按键被按下时触发
onkeydown
//某个键盘按键被按下时并弹起时触发(不识别功能键比如左右箭头，shift等。)
onkeypress

Location object

The Location object is part of the Window object and can be accessed through the window.location property.

Location Object Properties

Attributes	describe
hash	Sets or returns a URL (anchor) starting with a pound sign (#).
host	Sets or returns the hostname and port number of the current URL.
hostname	Sets or returns the hostname of the current URL.
href	Set or return the full URL.
pathname	Sets or returns the path portion of the current URL.
port	Sets or returns the port number of the current URL.
protocol	Sets or returns the protocol of the current URL.
search	Sets or returns the URL (query part) starting with a question mark (?).

Location object methods

Attributes	describe
assign()	Load a new document.
reload()	Reloads the current document.
replace()	Replace the current document with a new one.

History object

The History object is part of the window object and can be accessed through the window.history property.

History object methods

method	describe
back()	Load the previous URL in the history list.
forward()	Loads the next URL in the history list.
go()	Load a specific page in the history list.

History object description

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

//一行代码执行的操作与单击后退按钮执行的操作一样：
history.back() 
//一行代码执行的操作与单击两次后退按钮执行的操作一样：
history.go(-2)