Walking the DOM

輕而易舉用原生 code manipulate element nodes

Definition

Example

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

document.querySelector

returns the first element for the given CSS selector.

document.querySelector('#ele')

document.getElementById

document.getElementById('ele')

document.querySelectorAll

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"]'

elem.closest

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 as ID).
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 attribute

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>

PreviousPromise NextElement size and scrolling

Last updated 1 year ago

Was this helpful?

<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>

<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>

Attribute

HTML attributes have the following features:

Their name is case-insensitive (id is same as ID).

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 attribute

ele.attributes - a collection of objects that belong to a built-in class, with name and value 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>