JS操作DOM

什么是DOM？

DOM（Document Object Model）文档对象模型。DOM为HTML提供了结构化表示方法，定义了访问和处理文档结构的方法规范。
HTML可以理解为是由DOM节点构成的集合，主要由元素节点、文本节点、属性节点三部分构成。

获取

• 通过ID获取（getElementById）
• 通过类名（getElementsByClassName）
• 通过name属性（getElementsByName）
• 通过标签名（getElementsByTagName）
• 通过选择器获取一个元素（querySelector） document.querySelector(’.animated’)
• 通过选择器获取一组元素（querySelectorAll）document.querySelectorAll(’.animated’)

获取元素位置

属性	描述
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

|

固定对象获取：

固定对象获取换而言之，就是对HTML页面及其中的页面结构进行获取。

	console.log(document.body);//对HTML中的body进行获取
	
    console.log(document.head);//对html中的head进行获取
    
    console.log(document.title);//对html中的title进行获取
    
    console.log(document.documentElement);//获取整个HTML

获取DOM

操作

增删改查

创建元素节点 ：document.createElement(“div”);
removeChild()；//该方法不是在待删除的节点上调用，而是在它的父元素节点上调用。
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。

鼠标事件

onload :页面加载时触发
onclick :鼠标点击时触发
onmouseover :鼠标滑过时触发
onmouseout :鼠标离开时触发
onfocus :获得焦点时触发 ,事件用于：input标签type为text、password; textarea;
onblur :失去焦点时触发
onchange：域的内容改变时发生，一般作用于select或checkbox或radio
onsubmit:表单中的确认按钮被点击时发生：不是加在按钮上，而是在表单上（from）。
onmousedown : 鼠标按钮在元素上按下时触发.
onmousemove :在鼠标指针移动时发生
onmouseup :在元素上松开鼠标按钮时触发

键盘事件

• onkeydown(键盘按下)
• onkeyup(键盘抬起)
• onkeypress(按键事件)

表单事件

• onfocus(获得焦点)
• onblur（失去焦点）

浏览器事件

window事件 ：

• onload（加载完成事件）
• onerror（报错事件）
• onresize :当调整浏览器窗口的大小时触发
• onscroll :(滑动事件)拖动滚动条滚动时触发

移动端事件

• touch（触屏）
• touchstart （开始触屏 ）
• touchmove（触屏移动）
• touchend(触屏结束)

总结