Javascript Element - 38 Properties (Reference)

contentEditable

Check if the element is editable.

var x = document.getElementById("id_name");
var y = x.contentEditable;

// true/false

isContentEditable

Check if the element is editable.

var x = document.getElementById("id_name");
var y = x.isContentEditable;

// read only

dataset

It returns DOM string map.

var x = document.getElementById("id_name");
x.dataset.custom_attr === "abc";

delete x.dataset.custom_attr;

hidden

It returns true if the element is hidden.

var x = document.getElementById("id_name");
var y = xmlEncoding.hidden;
// false

// read only

dir

It returns the direction of the element.

var x = document.getElementById("id_name");
var y = x.dir;
// "rlt"

document.dir = "rtl";
document.dir = "ltr";

innerText

It returns the text content of the element.

var x = document.getElementById("id_name");
x.innerText = "Some text";

lang

It gets or sets the base language of an element's attribute values and text content.

var x = document.getElementById("id_name");
var y = x.lang;

offsetHeight

It returns a double containing the height of an element, relative to the layout.

var x = document.getElementById("id_name");
var y = x.offsetHeight;

offsetLeft

It returns a double, the distance from this element's left border to its offsetParent's left border.

var x = document.getElementById("id_name");
var y = x.offsetLeft;

offsetTop

It returns a double, the distance from this element's top border to its offsetParent's top border.

var x = document.getElementById("id_name");
var y = x.offsetTop;

offsetParent

It returns a Element that is the element from which all offset calculations are currently computed.

var x = document.getElementById("id_name");
var y = x.offsetParent;

offsetWidth

It returns a double containing the width of an element, relative to the layout.

var x = document.getElementById("id_name");
var y = x.offsetWidth;

scrollHeight

It is a measurement of the height of an element's content including content not visible on the screen due to overflow.

var x = document.getElementById("id_name");
var y = x.scrollHeight;
// 3328

// read only

scrollLeft

It gets or sets the number of pixels that an element's content is scrolled from its left edge.

var x = document.getElementById("id_name");
var y = x.scrollLeft;
// 0

scrollTop

It gets or sets the number of pixels that an element's content is scrolled vertically.

var x = document.getElementById("id_name");
var y = x.scrollTop;
// 0

scrollWidth

It is a measurement of the width of an element's content including content not visible on the screen due to overflow.

var x = document.getElementById("id_name");
var y = x.scrollWidth;
// 1357

clientHeight

It returns a Number representing the inner height of the element The number will be zero for elements with no CSS or inline layout boxes otherwise, it's the inner height of an element in pixels

var x = document.getElementById("id_name");
var y = x.clientHeight;
// 3328

// read only

clientLeft

It returns a Number representing the width of the left border of the element. The width of the left border of an element in pixels.

var x = document.getElementById("id_name");
var y = x.clientLeft;
// 0

// read only

clientTop

It returns a Number representing the width of the top border of the element. The width of the top border of an element in pixels.

var x = document.getElementById("id_name");
var y = x.clientTop;
// 0

// read only

clientWidth

It returns a Number representing the inner width of the element The number will be zero for inline elements and elements with no CSS otherwise, it's the inner width of an element in pixels.

var x = document.getElementById("id_name");
var y = x.clientWidth;
// 1357

// read only

style

It get/set the inline style of an element.

var x = document.getElementById("id_name");
var y = (x.style.color = "red");

tabIndex

It represents the tab order of the current element.

var x = document.getElementById("id_name");
var y = x.tabIndex;

title

It represents the title the text usually displayed in a 'tooltip'.

var x = document.getElementById("id_name");
x.title = "some text";

accessKey

It sets the keystroke which a user can press to jump to a given element.

var x = document.getElementById("id_name");
x.accessKey = "a";

inert

When present, may make the browser "ignore" the element from assistive technologies, page search and text selection.

var x = document.getElementById("id_name");
x.inert = true;

attributes

It returns a live collection of all attribute nodes registered to the specified node.

var x = document.getElementById("id_name");
var y = x.attributes;
// NamedNodeMap {0: id, 1: class, id: id, class: class, length: 2}

// read only

classList

It returns a live DOMTokenList collection of the class attributes of the element.

var x = document.getElementById("id_name");
var y = x.classList;
// DOMTokenList ["class_name", value: "class_value"];

// read only

id

It is a DOMString representing the id of the element.

var x = document.getElementById("id_name");
var y = x.id;
// "some_id"

className

It is a DOMString representing the classes of the element.

var x = document.getElementById("id_name");
var y = x.className;
// "some_class_name"

innerHTML

It gets or sets the HTML or XML markup contained within the element.

var x = document.getElementById("id_name");
var y = x.innerHTML;
// HTML element

outerHTML

It is a DOMString representing the markup of the element including its content When used as a setter, it replaces the element with nodes parsed from the given string.

var x = document.getElementById("id_name");
var y = x.outerHTML;
// HTML element

nextElementSibling

It returns element immediately following the given one in the tree and returns null if there's no sibling node.

var x = document.getElementById("id_name");
var y = x.nextElementSibling;
// next element ref

// read only

previousElementSibling

It returns the element immediately preceding the given one in the tree and null if there's no sibling node.

var x = document.getElementById("id_name");
var y = x.previousElementSibling;
// previous element ref

// read only

part

It represents the part identifier(s) of the element.

var x = document.getElementById("id_name");
var y = x.part;
// DOMTokenList [value: ""]

shadowRoot

It represents the shadow root hosted by the element.

var x = document.getElementById("id_name");
var y = x.shadowRoot;
// null

slot

It returns the name of the shadow DOM slot the element is inserted in.

var x = document.getElementById("id_name");
var y = x.slot;
// ""

localName

A DOMString representing the local part of the qualified name of the element.

var x = document.getElementById("id_name");
var y = x.localName;
// "div"

// read only

tagName

It returns the tag name of the element on which it's called.

var x = document.getElementById("id_name");
var y = x.tagName;
// "DIV"