DOM,全称Document Object Model文档对象模型,JS中通过DOM来对HTMl文档进行操作,只要理解了DOM就可以随心所欲的操作WEB页面。
文档:文档表示就是整个的HTML网页文档。
对象:对象表示将网页中的每一个部分都转换为了一个对象。
模型:使用模型来表示对象之间的关系,这样方便我们获取对象。
节点:节点Node,是是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点,比如:html标签、属性、文本、注释、整个文档等都是一个节点,虽然都是节点,但是实际上他们的具体类型是不同的。
常用节点分为四类:文档节点:整个HTML文档,(文档节点document,代表的是整个HTML文档,网页中的所有节点都是它的子节点)元素节点:HTML文档中的HTML标签,(HTML中的各种标签都是元素节点,这也是我们最常用的一个节点)属性节点:元素的属性,(文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点)文本节点:HTML标签中的文本内容。(属性节点表示的是标签中的一个的属性,这里要注意的是属性节点并非是元素节点的子节点,而是元素节点的一部分)
geElementById方法:
//在html中创建一个按钮。
var btn = document.getElementById(“btn”)//从HTML中获取到btn
btn.onclick = function(){//给btn添加点击事件
alert(“hello world”);//弹窗
}
除了getElementById方法以外,还有getElementsByTagName() 通过标签名获取一组元素节点对象,getElementsByName() 通过name属性获取一组元素节点对象,getElementsByClassName() 通过标类名获取一组元素节点对象。
element.clientHeight、element.clientWidth 这两个属性可以获取元素的可见度和高度,这些属性都是不带px,返回的都是一个数字,可以直接进行计算,会获取元素的高度和宽度,包括内容区和内边距。这些属性都是只读的,不能修改。
element.offsetLeft 当前元素相对应其定位元素的水平偏移量element.offsetTop 当前元素相对应其定位元素的垂直偏移量