web前端：JS 的 Element元素对象

作者:zyueer更新于： 2020-02-28 11:12:13

　　html DOM是HTMLDocumentObjectModel(文档对象模型)的缩写，HTMLDOM则是专门适用于html/XHTML的文档对象模型。熟悉软件开发的人员可以将HTMLDOM理解为网页的API。

　　在HTMLDOM中,元素对象代表着一个HTML元素。

　　元素对象的子节点可以是,可以是元素节点，文本节点，注释节点。

　　NodeList对象代表了节点列表，类似于HTML元素的子节点集合。

　　Element对象的属性和方法

　　1.元素特性相关属性

　　element.id设置/返回元素的id

　　element.tagName设置/返回元素的标签名

　　element.dir设置/返回元素的文字方向

　　element.accessKey设置/返回元素的快捷键

　　element.draggable设置/返回元素的是否可拖拽

　　element.lang设置/返回元素的语言

　　element.tabIndex设置/返回元素的在Tab键遍历时的顺序，-1表示不可被遍历

　　element.hidden设置/返回元素是否可见

　　element.contentEditable设置/返回元素是否可编辑

　　element.isContentEditable返回元素是否可编辑

　　2.元素状态相关属性

　　element.attributes设置/返回元素的属性，返回一个类似数组的对象。

　　element.className设置/返回元素的类名，它的值是一个字符串，每个class之间用空格分隔

　　element.classList设置/返回元素的类名，返回一个类似数组的对象。

　　element.innerHTML设置/返回元素包含的所有HTML代码

　　3.盒模型相关属性

　　element.clientHeight返回元素的css高度，只对块级元素有效，行内元素返回0。除了元素本身的高度，还包括padding（不包括border、margin）。如果有滚动条还要减去水平滚动条的高度。

　　document.body.clientHeight网页总高度大于>document.documentElement.clientHeight浏览器窗口高度（减去滚动条的高度）

　　element.clientLeft,element.clientTop返回元素左边框的宽度，不包括padding和margin

　　element.scrollHeight,element.scrollWidth返回当前元素的总高度，包括溢出容器部门，包括padding、伪元素高度不包括border、margin、滚动条。

　　element.scrollLeft,element.scrollTop返回当前元素向右滚动的px

　　如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取

　　element.offsetHeight,element.offsetWidth返回元素的垂直高度，包括heigth、padding、border、滚动条高度。

　　element.offsetLeft,element.offsetTop返回当前元素左上角位移

　　4.节点属性

　　element.appendChild()为元素添加一个新的子元素

　　element.children,element.childElementCount

　　element.firstElementChild,element.lastElementChild

　　element.nextElementSibling,element.previousElementSibling

　　element.offsetParent

　　5.属性相关方法

　　element.getAttribute()返回同名属性的值

　　element.setAttribute()

　　element.removeAttribute()

　　element.hasAttribute()

　　element.querySelector()返回匹配的第一个元素

　　getElementsByTagName返回指定标签名的所有子元素集合

　　getElementsByClassName

　　6.事件

　　监听事件都继承EventTarget接口

　　element.addEventListener()添加事件监听函数

　　element.removeEventListener()移除

　　dispatchEvent()触发事件

　　scrollIntoView()滚动到当前元素

　　element.focus()设置元素获取焦点

　　简单理解，DOM解决了Netscape的Javascript和Microsoft的JavaScript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。