Walking the DOM
輕而易舉用原生 code manipulate element nodes
Create/Remove element
document.createElement(tag)
To create DOM nodes
document.createElement('div.remove()');
elem.remove()
remove a node
elem.cloneNode(true)
elem.cloneNode(true)
creates a “deep” clone of the element – with all attributes and subelements. If we call elem.cloneNode(false)
, then the clone is made without child elements.
let div2 =
div.cloneNode(true)
;
Select element
returns the first element for the given CSS selector.
document.querySelector('#ele')
document.getElementById
document.getElementById('ele')
returns all elements inside elem
matching the given CSS selector.
document.querySelectorAll('ul > li:last-child');
document.getElementsBy*
looks for elements with the given tag and returns the collection of them
document.getElementsByTagName('input')[0].value = 5;
Insertion methods
node.append(...nodes or strings)
append nodes or strings at the end of node
node.prepend(...nodes or strings)
insert nodes or strings at the beginning of node
node.before(...nodes or strings)
insert nodes or strings before node
node.after(...nodes or strings)
insert nodes or strings after node
node.replaceWith(...nodes or strings)
replaces node
with the given nodes or strings
Method
elem.matches
Previous methods were searching the DOM.
document.body.children.matches('a[href$="zip"]'
looks for the nearest ancestor that matches the CSS-selector.
document.querySelector('.chapter').closest('.contents')); // DIV
Change Some content
elem.innerHTML
allows to get the HTML inside the element as a string.
let name = '<b>A</b>';elem.innerHTML = name;
// A
elem.textContent
return pure text inside the element
elem.textContent = name; // <b>A</b>
Styles and classes
elem.className
replaces the whole string of classes
elem.classList
add/remove a single class
elem.classList.add('red')
remove('red')
toggle('red')
contains("class")
elem.style.{style}
an object that corresponds to what’s written in the "style"
elem.style.margin = '20px'
'
Select element
<div id="ele">Hi</hi>
<div class="contents">
<ul class="book">
<li class="chapter">Chapter 1</li>
<li class="chapter">Chapter 1</li>
</ul>
</div>
Insert element
<ol id="ol">
<li>0</li>
<li>1</li>
<li>2</li>
</ol>
<script>
ol.before('before'); // insert string "before" before <ol>
ol.after('after'); // insert string "after" after <ol>
let liFirst = document.createElement('li');
liFirst.innerHTML = 'prepend';
ol.prepend(liFirst); // insert liFirst at the beginning of <ol>
let liLast = document.createElement('li');
liLast.innerHTML = 'append';
ol.append(liLast); // insert liLast at the end of <ol>
</script>


Change Some content
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "test", "passed"
}
</script>
Styles and classes
<body class="main page">
<script>
// add a class
document.body.classList.add('article');
alert(document.body.className); // main page article
</script>
</body>
Attribute
HTML attributes have the following features:
Their name is case-insensitive (
id
is same asID
).Their values are always strings, but properties are not always strings. For instance, the
input.checked
property (for checkboxes) is a boolean:
<input id="input" type="checkbox" checked> checkbox
<div id="elem" about="Elephant"></div>
<script>
alert( elem.getAttribute('About') ); // (1) 'Elephant', reading
elem.setAttribute('Test', 123); // (2), writing
alert( elem.outerHTML ); // (3), see if the attribute is in HTML (yes)
for (let attr of elem.attributes) { // (4) list all
alert( `${attr.name} = ${attr.value}` );
}
</script>
elem.hasAttribute(name)
– checks for existence.elem.getAttribute(name)
– gets the value.elem.setAttribute(name, value)
– sets the value.elem.removeAttribute(name)
– removes the attributeele.attributes
- a collection of objects that belong to a built-in Attr class, withname
andvalue
properties.
dataset
All attributes starting with “data-” are reserved for programmers’ use. They are available in the dataset
property.
<div id="userState" data-order-state="new"> </div>
<script>
alert(userState.dataset.orderState); // new
// modify
userState.dataset.orderState = "pending"; // (*)
</script>

Last updated
Was this helpful?