JavaScript是前端領域的重要語言之一，它的核心是操作頁面的DOM元素。在這個過程中，我們常常需要獲取頁面中的li元素，來進一步修改結構或實現各種動態效果。

獲取li元素的方式有許多，其中常見的兩種是使用document.getElementByTagName和document.querySelectorAll函數。

//獲取ul下的所有li元素
var liList = document.getElementsByTagName("li");
//獲取id為ul1下所有class為"red"的li元素
var liList2 = document.querySelectorAll("#ul1 .red");

getElementByTagName函數返回的是Element對象列表，需要使用下標來訪問每個特定的li元素。

for(var i=0;i<liList.length;i++){
liList[i].style.color = "red";
}

querySelectorAll函數返回的是NodeList對象，也需要使用下標來訪問特定的li元素。

for(var i=0;i<liList2.length;i++){
liList2[i].style.color = "red";
}

除了上述兩種方法，我們還可以通過父元素、祖先元素、相鄰元素等來獲取特定的li元素。

例如，我們有一個頁面結構如下：

<ul id="ul2">
<li>1</li>
<li>2</li>
<li class="red">3</li>
<li>4</li>
</ul>

如果要獲取class為"red"的li元素，除了使用querySelectorAll外，我們還可以使用其祖先元素getElementById和childNodes來實現。

var ulElement = document.getElementById("ul2");
var liList3 = ulElement.childNodes;
for(var i=0;i<liList3.length;i++){
if(liList3[i].className == "red"){
liList3[i].style.color = "red";
}
}

使用childNodes可以獲取當前元素下的所有子元素，包括文本節點和元素節點。在這個例子中，為了保證只獲取li元素，我們需要判斷每個節點的className是否為"red"。

總的來說，獲取li元素的方式有多種，可以根據實際需求來選擇合適的方法。同時，代碼實現中需要注意遍歷的方式和判斷的條件，以保證程序的正確性和性能。