HTML DOM 元素对象在实际中的应用

在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :文档本身就是一个文档对象所有 HTML 元素都是元素节点所有 HTML 属性都是属性节点插入到 HTML 元素文本是文本节点注释是注释节点元素对象在 HTML DOM 中, 元素对象代表着一个 HTML 元素。 元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。 NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。 元素可以有属性。属性属于属性节点（查看下一章节）。属性和方法以上属性和方法可适用于所有HTML 元素：属性 / 方法描述element.accessKey设置或返回accesskey一个元素element.addEventListener()向指定元素添加事件句柄element.appendChild()为元素添加一个新的子元素element.attributes返回一个元素的属性数组element.childNodes返回元素的一个子节点的数组element.children返回元素的子元素的集合element.classList返回元素的类名，作为 DOMTokenList 对象。element.className设置或返回元素的class属性element.clientHeight在页面上返回内容的可视高度（不包括边框，边距或滚动条）element.clientWidth在页面上返回内容的可视宽度（不包括边框，边距或滚动条）element.cloneNode()克隆某个元素element.compareDocumentPosition()比较两个元素的文档位置。element.contentEditable设置或返回元素的内容是否可编辑element.dir设置或返回一个元素中的文本方向element.firstChild返回元素的第一个子节点element.focus()设置文档或元素获取焦点element.getAttribute()返回指定元素的属性值element.getAttributeNode()返回指定属性节点element.getElementsByTagName()返回指定标签名的所有子元素集合。element. getElementsByClassName()返回文档中所有指定类名的元素集合，作为 NodeList 对象。element.getFeature()返回指定特征的执行APIs对象。element.getUserData()返回一个元素中关联键值的对象。element.hasAttribute()如果元素中存在指定的属性返回 true，否则返回false。element.hasAttributes()如果元素有任何属性返回true，否则返回false。element.hasChildNodes()返回一个元素是否具有任何子元素element.hasFocus()返回布尔值，检测文档或元素是否获取焦点element.id设置或者返回元素的 id。element.innerHTML设置或者返回元素的内容。element.insertBefore()现有的子元素之前插入一个新的子元素element.isContentEditable如果元素内容可编辑返回 true，否则返回falseelement.isDefaultNamespace()如果指定了namespaceURI 返回 true，否则返回 false。element.isEqualNode()检查两个元素是否相等element.isSameNode()检查两个元素所有有相同节点。element.isSupported()如果在元素中支持指定特征返回 true。element.lang设置或者返回一个元素的语言。element.lastChild返回的最后一个子节点element.namespaceURI返回命名空间的 URI。element.nextSibling返回该元素紧跟的一个节点element.nextElementSibling返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点）。element.nodeName返回元素的标记名（大写）element.nodeType返回元素的节点类型element.nodeValue返回元素的节点值element.normalize()使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点element.offsetHeight返回任何一个元素的高度包括边框和填充，但不是边距element.offsetWidth返回元素的宽度，包括边框和填充，但不是边距element.offsetLeft返回当前元素的相对水平偏移位置的偏移容器element.offsetParent返回元素的偏移容器element.offsetTop返回当前元素的相对垂直偏移位置的偏移容器element.ownerDocument返回元素的根元素（文档对象）element.parentNode返回元素的父节点element.previousSibling返回某个元素紧接之前元素element.previousElementSibling返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。element.querySelector()返回匹配指定 CSS 选择器元素的第一个子元素document.querySelectorAll()返回匹配指定 CSS 选择器元素的所有子元素节点列表element.removeAttribute()从元素中删除指定的属性element.removeAttributeNode()删除指定属性节点并返回移除后的节点。element.removeChild()删除一个子元素element.removeEventListener()移除由 addEventListener() 方法添加的事件句柄element.replaceChild()替换一个子元素element.scrollHeight返回整个元素的高度（包括带滚动条的隐蔽的地方）element.scrollLeft返回当前视图中的实际元素的左边缘和左边缘之间的距离element.scrollTop返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离element.scrollWidth返回元素的整个宽度（包括带滚动条的隐蔽的地方）element.setAttribute()设置或者改变指定属性并指定值。element.setAttributeNode()设置或者改变指定属性节点。element.setIdAttribute()element.setIdAttributeNode()element.setUserData()在元素中为指定键值关联对象。element.style设置或返回元素的样式属性element.tabIndex设置或返回元素的标签顺序。element.tagName作为一个字符串返回某个元素的标记名（大写）element.textContent设置或返回一个节点和它的文本内容element.title设置或返回元素的title属性element.toString()一个元素转换成字符串nodelist.item()返回某个元素基于文档树的索引nodelist.length返回节点列表的节点数目。