DOM 遍歷是指在 HTML 文檔中導航和定位元素的過程。通過 DOM 遍歷，您可以在文檔中移動并查找特定的元素，以便對其進行操作或者檢索信息。
尋找子元素
//DOM遍歷
const h1 = document.querySelector('h1');//尋找子元素
console.log(h1.querySelectorAll('.highlight'));
上面的代碼說明可以通過DOM遍歷快速的定位到子元素
● 我們也可以找到元素的所有子節點（包括元素節點、文本節點和注釋節點）的 NodeList 對象
console.log(h1.childNodes);
● 我們也可以找到元素的所有子元素節點，不包括文本節點和注釋節點。這將返回一個 HTMLCollection 對象，其中包含所有子元素。
console.log(h1.children);
● 當然，我們可以通過這種尋找某個元素的子元素的方式來定義style
h1.firstElementChild.style.color = 'white';
h1.lastElementChild.style.color = 'orangered';
尋找父元素
● 找到元素的父節點，無論父節點是什么類型的節點（元素節點、文本節點等）。這將返回一個 Node 對象，表示 h1 元素的父節點。
console.log(h1.parentNode);
● 找到元素的最近的父元素節點。如果 h1 的父節點是一個元素節點，則返回這個元素節點；如果 h1 沒有父元素節點，則返回 null。
console.log(h1.parentElement);
● 使用 closest 方法來查找最接近的具有指定選擇器的祖先元素，并為找到的元素設置背景顏色。
h1.closest('.header').style.background = 'var(--gradient-secondary)';
h1.closest('h1').style.background = 'var(--gradient-primary)';
尋找兄弟元素
● 打印出該前一個兄弟元素節點
console.log(h1.previousElementSibling);
說明向上沒有兄弟元素，我們也可以往下找
console.log(h1.nextElementSibling);
● h1 元素的前一個兄弟節點和后一個兄弟節點，或者如果它們不存在則顯示 null。需要注意的是，這兩個屬性獲取的節點可能是元素節點也可能是文本節點（或者其他類型的節點）。
console.log(h1.previousSibling);
console.log(h1.nextSibling);
● 那我們怎么知道元素的所有兄弟元素呢，我們可以找父元素的所有子元素
console.log(h1.parentElement.children);
● 最后，我們來玩一下，將除h1元素的所有兄弟元素縮小一半
[...h1.parentElement.children].forEach(function (el) {if (el !== h1) el.style.transform = 'scale(0.5)';
});
注解)
