在JavaScript中，上下級元素的概念十分常見。它們使用DOM來處理，所以你可以使用JavaScript代碼來訪問和修改它們。不管是創建子元素或是查詢父節點，JavaScript都能派上用場。
下面來看一些具體的應用實例。假設我們有一個網頁，其HTML結構為一堆列表項（li）嵌套在一個無序列表（ul）中。要想使用JavaScript來訪問這些元素，需要首先獲取它們的父元素。這可以使用querySelector或getElementById方法進行操作。代碼如下：

html
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

js
const parent = document.getElementById('myList'); // 獲取父元素
const child = parent.querySelector('li'); // 獲取第一個子元素

在上面的代碼中，我們獲取了ul元素，并用querySelector方法獲取了第一個li元素。
接下來，讓我們看一些更加復雜的操作。假設我們有一個表單，其中包括一個輸入框（input）和一個按鈕（button）。操作時需要在用戶點擊按鈕時，從輸入框中獲取值，并把它添加到另一個元素中。

html
<div>
<input type="text" id="input">
<button id="button">Add to List</button>
<ul id="myList"></ul>
</div>

js
const input = document.getElementById('input');
const button = document.getElementById('button');
const list = document.getElementById('myList');
button.addEventListener('click', function() {
const value = input.value;
const newItem = document.createElement('li');
newItem.textContent = value;
list.appendChild(newItem);
});

在上面這個例子中，我們首先獲取了input元素、button元素和ul元素。然后，我們在按鈕的click事件監聽器中，獲取了輸入框的值，在創建一個新的li元素后添加到ul中。
這些例子說明了，JavaScript中會經常使用到上下級元素。當你對DOM有一定的了解，這些任務不會成為你做前端開發的絆腳石。