Accessing HTML Elements

id, class, tag, query, query all

getElementById('demo')

#demo

getElementsByClassName('demo')

.demo
.demo
.demo

getElementsByTagName('article')

article
article
article

querySelector('.query')

.query
.query

querySelectorAll('[role=demo]')

[role=demo]
[role=demo]
[role=demo]

Creating Nodes

create element, create text node

createElement('button')

Create Button

createTextNode('hello')

Create Text Node

Modifying Elements

innerHTML, attribute, style

innerHTML

Change inner HTML

setAttribute('src', 'url')

style.backgroundColor

Change style

Modifying nodes

append, remove, replace, insert before

appendChild('li')

Append List Item

removeChild('li')

Remove List Item

replaceChild('li')

Replace List Item

Traversing the DOM

first child, last child, previous sibling, next sibling, childNodes

Click on the green element to see the related elements.