Javascript作為一門腳本語言，大大簡化了我們前端開發的流程。其中，表達父子關係是一個很重要的概念，下面我們就來簡單介紹一下Javascript怎麼表達父子關係。
一、DOM樹結構
先來說一說Javascript最廣泛使用的DOM樹結構。 HTML DOM樹是一種層級結構，其中每個HTML元素都會成為父、子或兄弟關係的一部分，而所有節點都源自於一個根。樹結構的節點有以下概念：
在DOM樹中，元素節點就是父子節點之間最常見的關係。例如：
<div id="parent"> <ul> <li>item 1</li> <li>item 2</li> </ul> </div>
我們可以把一段HTML內容抽象化成上述DOM結構，其中div標籤是ul標籤的父元素。而li標籤是ul標籤的子元素，也是div標籤的孫子元素。而這種父子關係，在Javascript裡是如何表達的呢？
二、Node物件
在Javascript中，我們使用Node物件來表示這些DOM節點。 Node物件是所有DOM節點的基底類，所有DOM節點都繼承了Node的屬性和方法。 Node物件有以下常用屬性：
parentNode：表示父節點，如果沒有則傳回NULL。 childNodes：表示子節點的一個陣列。 previousSibling：表示前一個兄弟節點。 nextSibling：表示後一個兄弟節點。 以上面那段HTML程式碼為例，我們可以透過以下方式來取得父子節點的關係：
const div = document.getElementById('parent');
const ul = div.firstElementChild;
const li1 = ul.firstElementChild;
const li2 = li1.nextElementSibling;
console.log(ul.parentNode === div); // true
console.log(li1.parentNode === ul); // true
console.log(li2.previousSibling === li1); // true
console.log(li1.nextSibling === li2); // true以上程式碼中，我們使用了getElementById方法來取得div，並使用firstElementChild方法取得其第一個子元素ul。接下來，我們使用firstElementChild方法來取得ul的第一個子元素li1，並使用nextElementSibling方法取得li1 的後一個兄弟節點li2。最後，我們使用Node物件的屬性來偵測它們之間的父子關係。
三、jQuery中的父子操作
除了使用Node物件來表示父子節點的關係，jQuery也提供了方便的DOM操作函數來實現同樣的功能。以下是一些簡單的範例：
parent()：這個方法傳回符合元素的父元素，可以傳入一個選擇器來過濾結果。 $('li').parent() // 返回行成父子关系的ul节点children()：這個方法傳回符合元素集合的所有子元素的集合，也可以傳入選擇器來篩選結果。 $('div').children() // 返回div下的所有子元素siblings()：這個方法傳回符合元素的所有兄弟元素，也可以傳入選擇器來過濾結果。 $('li').siblings() // 返回li的兄弟元素（不包括它自己）以上簡單的範例中，jQuery提供了便利的方法幫助我們找出並操作DOM節點父子關係，簡化了Javascript操作DOM節點的流程。
結論
Javascript中使用Node物件來表示DOM節點的父子關係。使用Node物件時，我們可以直接存取節點的屬性，例如parentNode、previousSibling等來取得父子節點的關係。另外，jQuery函式庫也提供了更簡單方便的函數來讓我們操作並尋找DOM節點之間的父子關係，透過巧妙使用這些函數，我們可以大幅快速完成前端開發工作，提升前端開發效率。
以上是Javascript怎麼表達父子關係的詳細內容。更多資訊請關注PHP中文網其他相關文章！
