JavaScript DOM API Cheatsheet

[ajhsu]

Table of Content

The document was migrated and re-organized from thegitfather's gist.

Working with DOM
Accessing Dom Elements
Grab Children/Parent Node(s)
Create DOM Elements
Add Elements to the DOM
Add/Remove/Toggle/Check Classes

---

Accessing Dom Elements

// Returns a reference to the element by its ID.
document.getElementById('someid');

// Returns an array-like object of all child elements which have all of the given class names.
document.getElementsByClassName('someclass');

// Returns an HTMLCollection of elements with the given tag name.
document.getElementsByTagName('LI');

// Returns the first element within the document that matches the specified group of selectors.
document.querySelector('.someclass');

// Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes)
// that match the specified group of selectors.
document.querySelectorAll('div.note, div.alert');

Grab Children/Parent Node(s)

// Get child nodes
var stored = document.getElementById('someid');
var children = stored.childNodes;

// Get parent node
var parental = children.parentNode;

Create New DOM Elements

// create new elments
var newHeading = document.createElement('h1');
var newParagraph = document.createElement('p');

// create text nodes for new elements
var h1Text= document.createTextNode('This is a nice header text!');
var pText= document.createTextNode('This is a nice paragraph text!');

// attach new text nodes to new elements
newHeading.appendChild(h1Text);
newParagraph.appendChild(pText);

// elements are now created and ready to be added to the DOM.

Add Elements to the DOM

// grab element on page you want to add stuff to
var firstHeading = document.getElementById('firstHeading');

// add both new elements to the page as children to the element we stored in firstHeading.
firstHeading.appendChild(newHeading);
firstHeading.appendChild(newParagraph);

// can also insert before like so

// get parent node of firstHeading
var parent = firstHeading.parentNode;

// insert newHeading before FirstHeading
parent.insertBefore(newHeading, firstHeading);

Add Elements to the DOM cont.

Suppose you have the following HTML:

<div id='box1'>
  <p>Some example text</p>
</div>
<div id='box2'>
  <p>Some example text</p>
</div>

You can insert another snippet of HTML between #box1 and #box2:

var box2 = document.getElementById('box2');
box2.insertAdjacentHTML('beforebegin', '<div><p>This gets inserted.</p></div>');

// beforebegin - The HTML would be placed immediately before the element, as a sibling.
// afterbegin - The HTML would be placed inside the element, before its first child.
// beforeend - The HTML would be placed inside the element, after its last child.
// afterend - The HTML would be placed immediately after the element, as a sibling.

Add/Remove/Toggle/Check Classes

// grab element on page you want to use
var firstHeading = document.getElementById('firstHeading');

// will remove foo if it is a class of firstHeading
firstHeading.classList.remove('foo');

// will add the class 'anotherClass' if one does not already exist
firstHeading.classList.add('anotherclass');

// add or remove multiple classes
firstHeading.classList.add('foo', 'bar');
firstHeading.classList.remove('foo', 'bar');

// if visible class is set remove it, otherwise add it
firstHeading.classList.toggle('visible');

// will return true if it has class of 'foo' or false if it does not
firstHeading.classList.contains('foo');

[ajhsu]

Most commonly used Classes in DOM API

(R) = Read-only property (E) = Experimental API

EventTarget

Methods

• .addEventListener()
• .removeEventListener()
• .dispatchEvent()

Node (EventTarget <- Node)

Properties

• Node 本身
• .nodeName (R)
• .nodeType (R)
• .nodeValue
• Node 文字
• .textContent
• Node 的長輩
• .parentNode (R)
• .parentElement (R)
• .ownerDocument (R)
• Node 的小孩
• .childNodes (R)
• .firstChild (R)
• .lastChild (R)
• Node 的同輩
• .previousSibling (R)
• .nextSibling (R)

Methods

• .cloneNode()
• .normalize()
• DOM 的增減
• .insertBefore()
• .appendChild()
• .removeChild()
• .replaceChild()
• DOM 的檢查
• .contains()
• .hasChildNodes()
• .isEqualNode()
• .isSameNode()
• .compareDocumentPosition()

Element (EventTarget <- Node <- Element)

Properties

• 元素本質
• .tagName (R)
• .localName (R)
• .id
• .attributes (R)
• .classList (R)
• .className
• .innerHTML
• .outerHTML
• .shadowRoot
• 元素的樣式
• .clientLeft (R)
• .clientTop (R)
• .clientWidth (R)
• .clientHeight (R)
• .scrollLeft
• .scrollTop
• .scrollWidth (R)
• .scrollHeight (R)

Methods

• 元素 attribute 的操作
• .hasAttribute()
• .hasAttributes()
• .getAttributes()
• .getAttributeNames()
• .setAttribute()
• .removeAttribute()
• 取得元素尺寸
• .getClientRect()
• .getBoundingClientRect()
• 元素的尋找
• .querySelector()
• .querySelectorAll()
• .getElementsByTagName()
• .matches()
• 其他
• .remove() (E)
• .scrollIntoView()
• .insertAdjacentElement() (E)
• .insertAdjacentHTML() (E)
• .insertAdjacentText() (E)

HTMLElement (EventTarget <- Node <- Element <- HTMLElement)

Properties

• HTML元素本身
• .title
• .tabIndex
• .contextMenu
• .dataset
• .style
• .lang
• .hidden
• HTML元素的樣式
• .offsetWidth (R)(E)
• .offsetHeight (R)(E)
• .offsetLeft (R)(E)
• .offsetTop (R)(E)

Methods

• .click()
• .blur()
• .focus()

Document (EventTarget <- Node <- Document)

Properties

• 文件本身
• .doctype (R)
• .domain
• .contentType (R)(E)
• .lastModified (R)
• .cookie
• .location (R)
• .referrer (R)
• .title
• .URL (R)
• 文件結構
• .head (R)
• .body
• .designMode
• 文件裡的元素們
• .anchors
• .images (R)
• .links (R)
• .scripts (R)
• .plugins (R)
• .readyState (R)
• .documentElement (R)

Events

太多了，常見的頁面事件註冊都在這

Methods

• 文件的元素建立
• .createDocumentFragment()
• .createElement()
• .createTextNode()
• .createTreeWalker()
• 文件底下的元素搜尋
• .querySelector()
• .querySelectorAll()
• .getElementsByClassName()
• .getElementsByTagName()
• 其他
• .importNode()
• .open()
• .close()
• .write()