/

HTML / CSS / JavaScript Tutorial

JavaScript Properties and Methods for HTML Elements

[this page | pdf | back links]

HTML elements within the JavaScript DOM support the following properties and methods:

 

Properties:

 

Property

Description

More

accessKey

Sets/returns the accesskey attribute

Here

attributes

Returns NamedNodeMap of attributes

Here

childElementCount

Returns number of child elements

Here

childNodes

Returns collection of the child elements (including text and comment nodes)

Here

children

Returns collection of the child elements (excluding text and comment nodes)

Here

classList

Returns the class name(s) of an element

Here

className

Sets / returns the class attribute

Here

clientHeight

Returns height, including padding

Here

clientLeft

Returns width of left border

Here

clientTop

Returns width of top border

Here

clientWidth

Returns width, including padding

Here

contentEditable

Sets / returns whether content is editable

Here

dir

Sets / returns the dir attribute

Here

firstChild

Returns first child node

Here

firstElementChild

Returns first child element

Here

id

Sets / returns the id attribute

Here

innerHTML

Sets / returns the element’s content

Here

isContentEditable

Returns true if element contents are editable, otherwise returns false

Here

lang

Sets / returns the lang attribute

Here

lastChild

Returns last child node

Here

lastElementChild

Returns last child element

Here

namespaceURI

Returns namespace URI of element

Here

nextElementSibling

Returns next element at same node tree level

Here

nextSibling

Returns next node at same node tree level

Here

nodeName

Returns node name

Here

nodeType

Returns node type

Here

nodeValue

Sets/returns node value

Here

offsetHeight

Returns element height, including padding, border and scroll bar

Here

offsetWidth

Returns element width, including padding, border and scroll bar

Here

offsetLeft

Returns horizontal offset position

Here

offsetParent

Returns offset container of element

Here

offsetTop

Returns vertical offset position

Here

ownerDocument

Returns root element (i.e. document object) within which element resides

Here

parentNode

Returns parent node

Here

previousElementSibling

Returns previous element at same node tree level

Here

previousSibling

Returns previous node at same node tree level

Here

scrollHeight

Returns entire height of element

Here

scrollLeft

Sets / returns number of pixels content is scrolled horizontally

Here

scrollTop

Sets / returns number of pixels content is scrolled vertically

Here

scrollWidth

Returns entire width of element

Here

style

Sets / returns the style attribute

Here

tabIndex

Sets / returns the tabindex attribute

Here

tagName

Returns the tag name of element (i.e. its type of element)

Here

textContent

Sets / returns the text content of a node and its descendants

Here

title

Sets / returns the title attribute

Here

 

Methods:

 

Method

Description

More

addEventListener()

Attaches an event handler

Here

appendChild()

Adds a new child after last existing one

Here

blur()

Removes focus from element

Here

click()

Simulates a mouse click on element

Here

cloneNode()

Clones an element

Here

compareDocumentPosition()

Compares position in document of two elements

Here

contains()

Returns true if node is a descendant of other node, otherwise returns false

Here

focus()

Gives focus to element

Here

getAttribute()

Returns specified attribute value

Here

getAttributeNode()

Returns specified attribute node

Here

getElementsByClassName()

Returns NodeList containing all elements with specified class attribute

Here

getElementsByTagName()

Returns NodeList containing all elements with specified tag name (i.e. element type)

Here

hasAttribute()

Returns true if element has specified attribute, otherwise returns false

Here

hasAttributes()

Returns true if element has any attributes, otherwise returns false

Here

hasChildNodes()

Returns true if element has any child nodes, otherwise returns false

Here

insertBefore()

Inserts new child node before specific existing child node

Here

isDefaultNamespace()

Returns true if a specified namespace URI is the default namespace, otherwise returns false

Here

isEqualNode()

Returns true if two elements / nodes are ‘equal’ (but not necessarily exactly the same), otherwise returns false

Here

isSameNode()

Returns true if two elements / nodes are the same (i.e. equal but also computationally refer to the same node), otherwise returns false

Here

isSupported()

Returns true if specified feature is supported, otherwise returns false

Here

normalize()

Removes empty text nodes and joins adjacent notes

Here

querySelector()

Returns first (child) element that matches specified CSSSelector

Here

querySelectorAll()

Returns (NodeList) collection containing all (child) elements that match specified CSSSelector(s)

Here

removeAttribute()

Removes specified attribute

Here

removeAttributeNode()

Removes specified attribute node, and returns the removed node

Here

removeChild()

Removes specified child node

Here

removeEventListener()

Detaches (removes)an event handler

Here

replaceChild()

Replaces specified child node

Here

scrollIntoView()

Scroll specified element into visible area of browser window

Here

setAttribute()

Sets specified attribute

Here

setAttributeNode()

Sets specified attribute node

Here

toString()

Converts element to string

Here

item()

Returns node at specified index position in a NodeList

Here

 

Further comments:

 

Collections of nodes form NodeLists, so there is always a NodeList associated with an element (although it might be empty initially).

 


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile