# traversing DOM

{% tabs %}
{% tab title="🗺️ 圖解" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2Fk6BgajgR2fG4x1A7Gwqz%2Ffile.drawing.svg?alt=media&#x26;token=850658d3-bd27-4ef4-a58c-7dc42880ca18" alt="" class="gitbook-drawing">
{% endtab %}

{% tab title="🔴 主題" %}
* [node.traverse](type/node/+ext/node.traverse "mention")
{% endtab %}

{% tab title="💈範例" %}
💾 replit: [textContent()](https://replit.com/@pegasusroe/textContent#script.js)

```javascript
// ⭐️ traditional for-loop
for (let i = 0; i < nodeList.length; i++) {
  let node = nodeList[i];
}

// ⭐️ for-of loop
const list = document.querySelectorAll('input[type=checkbox]');

for (let checkbox of list) {
  checkbox.checked = true;
}

// ⭐️ for browsers which don't support NodeList.forEach()
Array.prototype.forEach.call(list, (checkbox) => {
  checkbox.checked = true;
});
```
{% endtab %}

{% tab title="📗 參考" %}
* [x] JavaScript: The Definitive Guide (15.3 Scripting Documents)
* [ ] [Traversing the DOM with JavaScript](https://zellwk.com/blog/dom-traversals/)
{% endtab %}

{% tab title="👥 相關" %}
* [element](type/element "mention")
* [node](type/node "mention")
* [nodelist](type/nodelist "mention")
{% endtab %}
{% endtabs %}
