element

  • 版本网址缩略名: DOM/element
  • 版本标题: element
  • 版本 id: 6919
  • 创建于:
  • 创建者: Dewang
  • 是否是当前版本?
  • 评论 /* 属性 */

修订内容

{{template.DomRef()}}

导言

本章为HTML和XML元素在Gecko DOM中普遍存在的一般方法、属性、事件提供简要的参考。

各种W3C规范:

  • DOM Core 规范—描述在HTML和XML文件中大多数通用的核心DOM对象接口
  • DOM HTML 规范—描述基于核心规范的HTML和XHTML文件对象接口
  • DOM Events 规范—描述大多数DOM对象共享的基于核心规范和Views 规范的事件模型

上面列出条目包括链接到适当W3C DOM规范。

虽然大多数接口被HTML和XML元素共享,但也有DOM HTML规范专有的对象接口—例如HTML Table ElementHTML Form Element 接口.

属性

attributes
返回元素的属性集合. (DOM Core){{template.NoIE()}}
childNodes
返回包含当前元素的子元素的列表. (DOM Core)
className
获取/设置元素的类别. (HTML, XUL, ...)
clientHeight
元素内部的高度. (HTML-specific)
clientLeft
The width of the left border of an element in pixels. 不被普遍的支持. (HTML-specific)
clientTop
The width of the top border of an element in pixels. 不被普遍的支持. (HTML-specific)
clientWidth
元素内部的宽度. (HTML-specific)
dir
获取/设置元素的方向. (HTML, XUL)
firstChild
返回当前元素第一个子元素. (DOM Core)
id
获取/设置元素的id. (HTML, XUL, ...)
innerHTML
获取/设置元素内部的HTML标记和内容. (HTML-specific)
lang
指定元素的属性值和文本内容的语言. (HTML-specific)
lastChild
返回当前元素最后一个子元素.(DOM Core)
length
返回列表内元素的数量.(例如:childNodes). (DOM Core, not part of Element interface)
localName
Returns the local part of the qualified name of this node. (DOM Core)
name
获取/设置元素的name属性—并非所有此属性. (HTML-specific)
namespaceURI
节点的命名空间 URI, 如果没有指定则为 null. (DOM Core)
nextSibling
返回节点的下一个兄弟节点. (DOM Core)
nodeName
返回节点的名称. (DOM Core)
nodeType
返回节点的类型. (DOM Core)
nodeValue
返回节点的值. (DOM Core)
offsetHeight
返回元素的高度相对布局. (HTML-specific)
offsetLeft
获取元素的左边界到它的offsetParent节点的左边界的水平距离(单位像素). (HTML-specific)
offsetParent
Returns a reference to the object in which the current element is offset (i.e., the parent element). (HTML-specific)
offsetTop
获取元素的上边界到它的offsetParent节点的上边界的垂直距离(单位像素). (HTML-specific)
offsetWidth
返回元素的宽度相对布局. (HTML-specific)
ownerDocument
返回元素所在的document对像. (DOM Core)
parentNode
返回元素的父亲节点. (DOM Core)
prefix
返回当前元素的命名空间前缀, 如果未指定则返回 null. (DOM Core)
previousSibling
Returns the node immediately previous to the given one in the tree. (DOM Core)
scrollHeight
Returns the height of the scroll view of an element. (HTML-specific)
scrollLeft
Gets or sets the number of pixels that an element's content is scrolled to the left. (HTML-specific)
scrollTop
Gets/sets the distance between the top of an element and the topmost portion of its content currently visible. (HTML-specific)
scrollWidth
Returns the width of the scroll view of an element. (HTML-specific)
style
Returns an object representing the declarations in the the element's style attribute. (HTML, XUL, ...)
tabIndex
获取/设置元素的TAB次序. (HTML)
tagName
返回元素的标签名称. (DOM Core)
textContent
Gets/sets the text content of an element including its descendants. (DOM Core)

Methods

addEventListener
Allows the registration of event listeners on the event target. (DOM Events)
appendChild
Inserts the specified node into the list of nodes on the current document. (DOM Core)
blur
Removes keyboard focus from the current element. (HTML, XUL)
click
Simulates a click on the current element. (HTML, XUL)
cloneNode
Returns a duplicate of the current node. (DOM Core)
dispatchEvent
Allows the dispatch of events into the implementation's event model. (DOM Events)
focus
Sets focus on the current element. (HTML, XUL)
getAttribute
Returns the value of the named attribute on the current node. (DOM Core)
getAttributeNS
Returns the value of the attribute with the given name and namespace. (DOM Core)
getAttributeNode
Returns the attribute of the element as a separate node. (DOM Core)
getAttributeNodeNS
A namespace-aware version of getAttributeNode (DOM Core)
getElementsByTagName
Returns the elements of a particular tag name that are descendants of the current element. (DOM Core)
hasAttribute
Returns a boolean value indicating whether the element has the specified attribute or not. (DOM Core)
hasAttributeNS
Returns a boolean value indicating whether the element has an attribute with the specified name and namespace. (DOM Core)
hasAttributes
Returns a boolean value indicating whether the element has any attributes. (DOM Core)
hasChildNodes
Returns boolean value indicating whether the current element has children or not. (DOM Core)
insertBefore
Inserts a node before the current element in the DOM. (DOM Core)
item
Retrieves a node from a NodeList by index. (DOM Core, not part of the Element interface)
normalize
Puts the node and all of its subtree into a "normalized" form. (DOM Core)
removeAttribute
Removes an attribute from the element. (DOM Core)
removeAttributeNS
Removes the attribute with specified name and namespace from the element. (DOM Core)
removeAttributeNode
Removes the specified attribute from the element. (DOM Core)
removeChild
Removes a child node from the current element. (DOM Core)
removeEventListener
Removes an event listener from the element. (DOM Events)
replaceChild
Replaces one child node on the current element with another. (DOM Core)
scrollIntoView
Scrolls the page until the element gets into the view. (HTML)
setAttribute
Adds a new attribute or changes the value of an existing attribute on the current element. (DOM Core)
setAttributeNS
Adds a new attribute or changes the value of an attribute with the given namespace and name. (DOM Core)
setAttributeNode
Adds a new attribute node to the current element. (DOM Core)
setAttributeNodeNS
Adds a new attribute node with the specified namespace and name. (DOM Core)
supports
Tests if this DOM implementation supports a particular feature.

Event Handlers

These are properties that correspond to the HTML 'on' event attributes.

Unlike the corresponding attributes, the values of these properties are functions (or any other object implementing the EventListener interface) rather than a string. In fact, assigning an event attribute in HTML creates a wrapper function around the specified code. For example, given the following HTML:

<div onclick="foo();">click me!</div>

If element is a reference to this div, the value of element.onclick is effectively:

function onclick(event) {
   foo();
}

Note how the event object is passed as parameter event to this wrapper function.

onblur
Returns the event handling code for the blur event.
onclick
Returns the event handling code for the click event.
ondblclick
Returns the event handling code for the dblclick event.
onfocus
Returns the event handling code for the focus event.
onkeydown
Returns the event handling code for the keydown event.
onkeypress
Returns the event handling code for the keypress event.
onkeyup
Returns the event handling code for the keyup event.
onmousedown
Returns the event handling code for the mousedown event.
onmousemove
Returns the event handling code for the mousemove event.
onmouseout
Returns the event handling code for the mouseout event.
onmouseover
Returns the event handling code for the mouseover event.
onmouseup
Returns the event handling code for the mouseup event.
onresize
Returns the event handling code for the resize event.
{{ wiki.languages( { "fr": "fr/DOM/element", "pl": "pl/DOM/element" } ) }}

修订版来源

<p>
{{template.DomRef()}}
</p>
<h3 name=".E5.AF.BC.E8.A8.80"> 导言 </h3>
<p>本章为HTML和XML元素在Gecko DOM中普遍存在的一般方法、属性、事件提供简要的参考。
</p><p>各种W3C规范:
</p>
<ul><li> <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Core 规范</a>—描述在HTML和XML文件中大多数通用的核心DOM对象接口
</li><li> <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">DOM HTML 规范</a>—描述基于核心规范的HTML和XHTML文件对象接口
</li><li> <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Events 规范</a>—描述大多数DOM对象共享的基于核心规范和<a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/">Views</a> 规范的事件模型
</li></ul>
<p>上面列出条目包括链接到适当W3C DOM规范。 
</p><p>虽然大多数接口被HTML和XML元素共享,但也有DOM HTML规范专有的对象接口—例如<a href="cn/DOM/table">HTML Table Element</a> 和 <a href="cn/DOM/form">HTML Form Element</a> 接口.
</p>
<h3 name=".E5.B1.9E.E6.80.A7"> 属性 </h3>
<dl><dt> <a href="cn/DOM/element.attributes">attributes</a>
</dt><dd> 返回元素的属性集合. (DOM Core){{template.NoIE()}}
</dd></dl>
<dl><dt> <a href="cn/DOM/element.childNodes">childNodes</a>
</dt><dd> 返回包含当前元素的子元素的列表. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.className">className</a>
</dt><dd> 获取/设置元素的类别. (HTML, XUL, ...)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.clientHeight">clientHeight</a>
</dt><dd> 元素内部的高度. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.clientLeft">clientLeft</a>
</dt><dd> The width of the left border of an element in pixels. <i>不被普遍的支持.</i> (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.clientTop">clientTop</a>
</dt><dd> The width of the top border of an element in pixels. <i>不被普遍的支持.</i> (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.clientWidth">clientWidth</a>
</dt><dd> 元素内部的宽度. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.dir">dir</a>
</dt><dd> 获取/设置元素的方向. (HTML, XUL)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.firstChild">firstChild</a>
</dt><dd> 返回当前元素第一个子元素. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.id">id</a>
</dt><dd> 获取/设置元素的id. (HTML, XUL, ...)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.innerHTML">innerHTML</a>
</dt><dd> 获取/设置元素内部的HTML标记和内容. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.lang">lang</a>
</dt><dd> 指定元素的属性值和文本内容的语言. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.lastChild">lastChild</a>
</dt><dd> 返回当前元素最后一个子元素.(DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.length">length</a>
</dt><dd> 返回列表内元素的数量.(例如:childNodes). (DOM Core, not part of <code>Element</code> interface)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.localName">localName</a>
</dt><dd> Returns the local part of the qualified name of this node. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.name">name</a>
</dt><dd> 获取/设置元素的name属性—并非所有此属性. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.namespaceURI">namespaceURI</a>
</dt><dd> 节点的命名空间 URI, 如果没有指定则为 <code>null</code>. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.nextSibling">nextSibling</a>
</dt><dd> 返回节点的下一个兄弟节点. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.nodeName">nodeName</a>
</dt><dd> 返回节点的名称. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.nodeType">nodeType</a>
</dt><dd> 返回节点的类型. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.nodeValue">nodeValue</a>
</dt><dd> 返回节点的值. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.offsetHeight">offsetHeight</a>
</dt><dd> 返回元素的高度相对布局. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.offsetLeft">offsetLeft</a>
</dt><dd> 获取元素的左边界到它的<code>offsetParent</code>节点的左边界的水平距离(单位像素). (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.offsetParent">offsetParent</a>
</dt><dd> Returns a reference to the object in which the current element is offset (i.e., the parent element). (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.offsetTop">offsetTop</a>
</dt><dd> 获取元素的上边界到它的<code>offsetParent</code>节点的上边界的垂直距离(单位像素). (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.offsetWidth">offsetWidth</a>
</dt><dd> 返回元素的宽度相对布局. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.ownerDocument">ownerDocument</a>
</dt><dd> 返回元素所在的document对像. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.parentNode">parentNode</a>
</dt><dd> 返回元素的父亲节点. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.prefix">prefix</a>
</dt><dd> 返回当前元素的命名空间前缀, 如果未指定则返回 <code>null</code>. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.previousSibling">previousSibling</a>
</dt><dd> Returns the node immediately previous to the given one in the tree. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.scrollHeight">scrollHeight</a>
</dt><dd> Returns the height of the scroll view of an element. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.scrollLeft">scrollLeft</a>
</dt><dd> Gets or sets the number of pixels that an element's content is scrolled to the left. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.scrollTop">scrollTop</a>
</dt><dd> Gets/sets the distance between the top of an element and the topmost portion of its content currently visible. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.scrollWidth">scrollWidth</a>
</dt><dd> Returns the width of the scroll view of an element. (HTML-specific)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.style">style</a>
</dt><dd> Returns an object representing the declarations in the the element's style attribute. (HTML, XUL, ...)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.tabIndex">tabIndex</a>
</dt><dd> 获取/设置元素的TAB次序. (HTML)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.tagName">tagName</a>
</dt><dd> 返回元素的标签名称. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.textContent">textContent</a>
</dt><dd> Gets/sets the text content of an element including its descendants. (DOM Core)
</dd></dl>
<h3 name="Methods"> Methods </h3>
<dl><dt> <a href="cn/DOM/element.addEventListener">addEventListener</a>
</dt><dd> Allows the registration of event listeners on the event target. (DOM Events)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.appendChild">appendChild</a>
</dt><dd> Inserts the specified node into the list of nodes on the current document. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.blur">blur</a>
</dt><dd> Removes keyboard focus from the current element. (HTML, XUL)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.click">click</a>
</dt><dd> Simulates a click on the current element. (HTML, XUL)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.cloneNode">cloneNode</a>
</dt><dd> Returns a duplicate of the current node. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.dispatchEvent">dispatchEvent</a>
</dt><dd> Allows the dispatch of events into the implementation's event model. (DOM Events)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.focus">focus</a>
</dt><dd> Sets focus on the current element. (HTML, XUL)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.getAttribute">getAttribute</a>
</dt><dd> Returns the value of the named attribute on the current node. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.getAttributeNS">getAttributeNS</a>
</dt><dd> Returns the value of the attribute with the given name and namespace. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.getAttributeNode">getAttributeNode</a>
</dt><dd> Returns the attribute of the element as a separate node. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.getAttributeNodeNS">getAttributeNodeNS</a>
</dt><dd> A namespace-aware version of <code>getAttributeNode</code> (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.getElementsByTagName">getElementsByTagName</a>
</dt><dd> Returns the elements of a particular tag name that are descendants of the current element. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.hasAttribute">hasAttribute</a>
</dt><dd> Returns a boolean value indicating whether the element has the specified attribute or not. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.hasAttributeNS">hasAttributeNS</a>
</dt><dd> Returns a boolean value indicating whether the element has an attribute with the specified name and namespace. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.hasAttributes">hasAttributes</a>
</dt><dd> Returns a boolean value indicating whether the element has any attributes. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.hasChildNodes">hasChildNodes</a>
</dt><dd> Returns boolean value indicating whether the current element has children or not. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.insertBefore">insertBefore</a>
</dt><dd> Inserts a node before the current element in the DOM. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.item">item</a>
</dt><dd> Retrieves a node from a <code>NodeList</code> by index. (DOM Core, not part of the <code>Element</code> interface)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.normalize">normalize</a>
</dt><dd> Puts the node and all of its subtree into a "normalized" form. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.removeAttribute">removeAttribute</a>
</dt><dd> Removes an attribute from the element. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.removeAttributeNS">removeAttributeNS</a>
</dt><dd> Removes the attribute with specified name and namespace from the element. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.removeAttributeNode">removeAttributeNode</a>
</dt><dd> Removes the specified attribute from the element. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.removeChild">removeChild</a>
</dt><dd> Removes a child node from the current element. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.removeEventListener">removeEventListener</a>
</dt><dd> Removes an event listener from the element. (DOM Events)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.replaceChild">replaceChild</a>
</dt><dd> Replaces one child node on the current element with another. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.scrollIntoView">scrollIntoView</a>
</dt><dd> Scrolls the page until the element gets into the view. (HTML)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.setAttribute">setAttribute</a>
</dt><dd> Adds a new attribute or changes the value of an existing attribute on the current element. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.setAttributeNS">setAttributeNS</a>
</dt><dd> Adds a new attribute or changes the value of an attribute with the given namespace and name. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.setAttributeNode">setAttributeNode</a>
</dt><dd> Adds a new attribute node to the current element. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>
</dt><dd> Adds a new attribute node with the specified namespace and name. (DOM Core)
</dd></dl>
<dl><dt> <a href="cn/DOM/element.supports">supports</a>
</dt><dd> Tests if this DOM implementation supports a particular feature.
</dd></dl>
<h3 name="Event_Handlers"> Event Handlers </h3>
<p>These are properties that correspond to the HTML 'on' event attributes.
</p><p>Unlike the corresponding attributes, the values of these properties are functions (or any other object implementing the <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener">EventListener</a> interface) rather than a string. In fact, assigning an event attribute in HTML creates a wrapper function around the specified code. For example, given the following HTML:
</p>
<pre>&lt;div onclick="foo();"&gt;click me!&lt;/div&gt;
</pre>
<p>If <code>element</code> is a reference to this <code>div</code>, the value of <code>element.onclick</code> is effectively:
</p>
<pre>function onclick(event) {
   foo();
}
</pre>
<p>Note how the <a href="cn/DOM/event">event</a> object is passed as parameter <code>event</code> to this wrapper function.
</p>
<dl><dt> <a href="cn/DOM/element.onblur">onblur</a>
</dt><dd> Returns the event handling code for the blur event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onclick">onclick</a>
</dt><dd> Returns the event handling code for the click event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.ondblclick">ondblclick</a>
</dt><dd> Returns the event handling code for the dblclick event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onfocus">onfocus</a>
</dt><dd> Returns the event handling code for the focus event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onkeydown">onkeydown</a>
</dt><dd> Returns the event handling code for the keydown event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onkeypress">onkeypress</a>
</dt><dd> Returns the event handling code for the keypress event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onkeyup">onkeyup</a>
</dt><dd> Returns the event handling code for the keyup event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onmousedown">onmousedown</a>
</dt><dd> Returns the event handling code for the mousedown event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onmousemove">onmousemove</a>
</dt><dd> Returns the event handling code for the mousemove event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onmouseout">onmouseout</a>
</dt><dd> Returns the event handling code for the mouseout event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onmouseover">onmouseover</a>
</dt><dd> Returns the event handling code for the mouseover event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onmouseup">onmouseup</a>
</dt><dd> Returns the event handling code for the mouseup event.
</dd></dl>
<dl><dt> <a href="cn/DOM/element.onresize">onresize</a>
</dt><dd> Returns the event handling code for the resize event.
</dd></dl>
{{ wiki.languages( { "fr": "fr/DOM/element", "pl": "pl/DOM/element" } ) }}
恢复到这个版本