Walking the DOM

輕而易舉用原生 code manipulate element nodes

Definition

Example

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
ele.attributes - a collection of objects that belong to a built-in Attr 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>