> For the complete documentation index, see [llms.txt](https://hannahpun.gitbook.io/leetcode-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hannahpun.gitbook.io/leetcode-note/bi-ji-note/walking-the-dom.md).

# Walking the DOM

<table><thead><tr><th width="245.95952615992104"></th><th width="188.59345739405245">Definition</th><th>Example</th></tr></thead><tbody><tr><td><mark style="color:blue;"><strong>Create/Remove element</strong></mark></td><td></td><td></td></tr><tr><td><strong>document.createElement(tag)</strong></td><td>To create DOM nodes</td><td><code>document.createElement('div.remove()');</code></td></tr><tr><td><strong>elem.remove()</strong></td><td>remove a node</td><td></td></tr><tr><td><strong>elem.cloneNode(true)</strong></td><td><code>elem.cloneNode(true)</code> creates a “deep” clone of the element – with all attributes and subelements. If we call <code>elem.cloneNode(false)</code>, then the clone is made without child elements.</td><td><code>let div2 =</code> <code>div.cloneNode(true)</code>;</td></tr><tr><td><mark style="color:blue;"><strong>Select element</strong></mark></td><td></td><td></td></tr><tr><td><h4>document.querySelector</h4></td><td>returns the first element for the given CSS selector.</td><td><code>document.querySelector('#ele')</code></td></tr><tr><td><strong>document.getElementById</strong></td><td></td><td><code>document.getElementById('ele')</code></td></tr><tr><td><h4>document.querySelectorAll</h4></td><td>returns all elements inside <code>elem</code> matching the given CSS selector.</td><td><code>document.querySelectorAll('ul > li:last-child');</code></td></tr><tr><td><strong>document.getElement</strong><em><strong>s</strong></em><strong>By*</strong></td><td>looks for elements with the given tag and returns the <strong>collection</strong> of them</td><td><code>document.getElementsByTagName('input')[0].value = 5;</code></td></tr><tr><td><mark style="color:blue;"><strong>Insertion methods</strong></mark></td><td></td><td></td></tr><tr><td><strong>node.append(...nodes or strings)</strong></td><td>append nodes or strings <em>at the end</em> of <code>node</code></td><td></td></tr><tr><td><strong>node.prepend(...nodes or strings)</strong></td><td>insert nodes or strings <em>at the beginning</em> of <code>node</code></td><td></td></tr><tr><td><strong>node.before(...nodes or strings)</strong></td><td>insert nodes or strings <em>before</em> <code>node</code></td><td></td></tr><tr><td><strong>node.after(...nodes or strings)</strong></td><td>insert nodes or strings <em>after</em> <code>node</code></td><td></td></tr><tr><td><strong>node.replaceWith(...nodes or strings)</strong></td><td>replaces <code>node</code> with the given nodes or strings</td><td></td></tr><tr><td><mark style="color:blue;"><strong>Method</strong></mark></td><td></td><td></td></tr><tr><td><strong>elem.matches</strong></td><td>Previous methods were searching the DOM.</td><td><code>document.body.children.matches('a[href$="zip"]'</code></td></tr><tr><td><h4>elem.closest</h4></td><td>looks for the nearest ancestor that matches the CSS-selector.</td><td><code>document.querySelector('.chapter').closest('.contents')); // DIV</code></td></tr><tr><td><mark style="color:blue;"><strong>Change Some content</strong></mark></td><td></td><td></td></tr><tr><td><strong>elem.innerHTML</strong></td><td>allows to get the HTML inside the element as a string.</td><td><code>let name = '&#x3C;b>A&#x3C;/b>';elem.innerHTML = name;</code>  // <strong>A</strong></td></tr><tr><td><strong>elem.textContent</strong></td><td>return pure text inside the element</td><td><code>elem.textContent = name; // &#x3C;b>A&#x3C;/b></code></td></tr><tr><td><mark style="color:blue;"><strong>Styles and classes</strong></mark></td><td></td><td></td></tr><tr><td>elem.className</td><td>replaces the whole string of classes</td><td></td></tr><tr><td>elem.classList</td><td>add/remove a single class</td><td><ul><li><code>elem.classList.add('red')</code></li><li><code>remove('red')</code></li><li><code>toggle('red')</code></li><li><code>contains("class")</code></li></ul></td></tr><tr><td>elem.style.{style}</td><td>an object that corresponds to what’s written in the <code>"style"</code></td><td>elem.style.margin = '20px'</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td>'</td></tr></tbody></table>

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

![](/files/CWFk90V43KiYwFgr8EHa)

![](/files/mZlA8JXUsKTJkEqNAcSm)

**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](https://dom.spec.whatwg.org/#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>
```

![](/files/PEMuIqUdosZnvjVYPMdF)