outerHTML

outerHTMLはouterHTMLを所有している要素を指定した文字列の内容に置き換える。
DEMO

element.insertAdjacentHTML(position, html)

element自身や子要素の前後にhtmlを挿入する。
positionには以下の4つを指定することができる。

beforebegin

elementの前にhtmlを挿入

afterend

elementの後にhtmlを挿入

afterbegin

elementの最初の子要素の前にhtmlを挿入

beforeend

elementの最後の子要素の後にhtmlを挿入

DEMO

parentElement.insertBefore(insert_elem, child_elem)

parentElementの子要素の前に挿入対象の要素を挿入する。
基準となる要素がparentElementの子要素でない場合エラーになる。
DEMO

NodeListはArray.prototypeのメソッドを適用することができる

Array.prototype.slice.call(nodeList)でnodeListをArrayに変換することができる。
DEMO
es6ではArray.from()でも変換することができる。

firstChildとfirstElementChildの違い

firstChildは第1子Node(TextNodeを含む)を返す。
firstChildElementは第1子Elementを返す。
DEMO

node.isEqualNode(someNode)

ノードの種類や属性が同じ時trueを返す。
DEMO

document.activeElement

document.activeElementはフォーカスがあたっている要素を返す。
document.hasFocus()はフォーカスがあたっている要素がある場合はtrueを返す。

elem.classList

classListリストは要素のclassを編集する際に利用する。
DOMTokenListの一種である。
elem.classList.add(class_name)#class_nameを追加
elem.classList.remove(class_name)#class_nameを削除
elem.classList.toggle(class_name)#class_nameをドグル
elem.classList.contains(class_name)#class_nameがclassListに含まれるか
elem.classList.length#classListの長さ

elem.matchesSelector(selector)

要素が指定したセレクタの対象か判定する。

elem.scrollIntoView()

要素が画面に出てくるまでスクロールする

CSSStyleSheet

スタイルシートの内容を動的に変更する。

document.querySelector('#styleElement').sheet.insertRule('p{color:red}',1);

var styleElm = document.createElement('style');
styleElm.innerHTML = 'body{color:red}';

CSSを無効にする

document.querySelector('#linkElement').disabled = true;

DEMO