首页
/ 正文

HTML DOM Li 对象（手把手讲解）

更新时间: 2025-04-02 07:34:14

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

（注：根据要求，实际输出内容从二级标题开始，此处仅为结构示意）

一、前言：为什么需要学习 HTML DOM Li 对象？

在网页开发中，列表（List）是最常见的内容组织形式之一。无论是菜单栏、任务清单还是商品列表，开发者都需要通过 <ul>、<ol> 和 <li> 标签来构建结构。而 HTML DOM Li 对象 则是操作这些列表项的核心工具。

想象一下，DOM（文档对象模型）就像一棵大树，每个 HTML 元素都是树上的枝叶。<li> 元素作为列表的“叶子”，其对应的 DOM 对象就像是为这些叶子赋予“生命”的接口——通过它，开发者可以动态修改文本、增删节点，甚至触发交互效果。

对于编程初学者而言，掌握 HTML DOM Li 对象 的操作方法，不仅能提升基础 HTML/CSS/JS 的综合能力，还能为后续学习前端框架（如 React、Vue）打下坚实基础。

二、基础概念：Li 对象的定义与特性

1. Li 对象的定义

Li 对象 是 HTML DOM 中 <li> 元素的接口表示。每个 <li> 标签在页面加载时，都会生成一个对应的 HTMLLIElement 对象。开发者可以通过 JavaScript 的 DOM 方法访问这些对象，例如：

// 通过 id 获取单个 <li> 元素  
const firstItem = document.getElementById("list-item-1");  
console.log(firstItem.nodeName); // 输出 "LI"

2. Li 对象的层级关系

<li> 元素必须嵌套在 <ul>（无序列表）或 <ol>（有序列表）标签内，因此其父节点（parentNode）只能是这两种元素。这种层级关系类似于“树枝与叶子”的关系：

<ul>  
  <li>叶子1</li> <!-- 父节点是 <ul> -->  
  <li>叶子2</li>  
</ul>

3. Li 对象的默认样式

浏览器默认会为 <li> 元素添加左侧的圆点（<ul>）或数字（<ol>），并通过 margin 和 padding 控制间距。开发者可以通过 CSS 或 DOM 操作动态修改这些样式。

三、核心方法：如何操作 Li 对象？

1. 访问 Li 对象的三种方式

（1）通过 `getElementById()`

<ul>  
  <li id="item1">第一个列表项</li>  
</ul>

const item = document.getElementById("item1");  
item.style.color = "red"; // 动态修改文本颜色

（2）通过 `getElementsByClassName()`

<ul class="task-list">  
  <li class="completed">任务1</li>  
  <li>任务2</li>  
</ul>

const tasks = document.getElementsByClassName("task-list")[0].getElementsByTagName("li");  
for (let i = 0; i < tasks.length; i++) {  
  if (tasks[i].classList.contains("completed")) {  
    tasks[i].style.textDecoration = "line-through"; // 为已完成任务添加删除线  
  }  
}

（3）通过 `querySelectorAll()`

// 选择所有 class 为 "highlight" 的 <li>  
const highlightedItems = document.querySelectorAll("li.highlight");  
highlightedItems.forEach(item => item.style.backgroundColor = "#ffffcc");

2. 动态修改 Li 对象内容

（1）修改文本内容

const liElement = document.querySelector("li");  
liElement.textContent = "新的列表内容"; // 替换原有文本  
liElement.append(" - 补充说明"); // 追加文本

（2）修改 HTML 内容（注意 XSS 风险）

// 动态插入超链接  
liElement.innerHTML = '<a href="https://example.com">点击跳转</a>';

3. 操作 Li 对象的样式与属性

（1）直接修改内联样式

liElement.style.fontSize = "1.2em";  
liElement.style.cursor = "pointer"; // 鼠标悬停显示手型

（2）添加/移除 CSS 类

liElement.classList.add("active"); // 添加类  
liElement.classList.remove("inactive"); // 移除类  
liElement.classList.toggle("highlight"); // 切换类状态

四、进阶技巧：Li 对象的遍历与动态增删

1. 遍历列表项

const list = document.querySelector("ul");  
const items = list.getElementsByTagName("li");  

for (let i = 0; i < items.length; i++) {  
  items[i].addEventListener("click", function() {  
    this.style.backgroundColor = "lightblue"; // 点击高亮  
  });  
}

2. 动态添加 Li 元素

// 创建新 <li> 元素  
const newLi = document.createElement("li");  
newLi.textContent = "新任务";  

// 将其插入到列表末尾  
const list = document.querySelector("ul");  
list.appendChild(newLi);

3. 动态删除 Li 元素

// 删除第一个 <li>  
const firstLi = document.querySelector("li");  
firstLi.remove(); // 或使用 firstLi.parentNode.removeChild(firstLi);

五、实战案例：可交互的待办事项列表

1. HTML 结构

<ul id="todo-list">  
  <li>学习 HTML DOM</li>  
  <li>练习 JavaScript</li>  
</ul>  

<input type="text" id="new-task" placeholder="添加新任务">  
<button onclick="addTask()">添加</button>

2. JavaScript 实现

function addTask() {  
  const input = document.getElementById("new-task");  
  const taskText = input.value.trim();  

  if (taskText === "") return;  

  // 创建新 <li>  
  const newLi = document.createElement("li");  
  newLi.textContent = taskText;  

  // 添加删除按钮  
  const deleteBtn = document.createElement("button");  
  deleteBtn.textContent = "删除";  
  deleteBtn.onclick = function() {  
    newLi.remove(); // 删除当前项  
  };  

  newLi.appendChild(deleteBtn);  

  // 插入到列表  
  const list = document.getElementById("todo-list");  
  list.appendChild(newLi);  

  input.value = ""; // 清空输入框  
}

六、常见问题与最佳实践

1. 如何避免 DOM 操作的性能问题？

批量操作而非单次修改：例如，将多个 <li> 的样式修改操作集中执行，而非逐个修改。

使用文档碎片（DocumentFragment）：在内存中构建节点后再一次性插入 DOM，例如：

const fragment = document.createDocumentFragment();  
for (let i = 0; i < 100; i++) {  
  const li = document.createElement("li");  
  fragment.appendChild(li);  
}  
document.querySelector("ul").appendChild(fragment);

2. 如何处理动态生成的 Li 元素的事件绑定？

避免直接在 HTML 中写 onclick 属性，改用事件委托：

document.querySelector("ul").addEventListener("click", function(event) {  
  if (event.target.tagName === "LI") {  
    event.target.style.color = "green"; // 针对 <li> 的点击事件  
  }  
});

七、结论：掌握 Li 对象，解锁列表交互的无限可能

通过本文，我们系统学习了 HTML DOM Li 对象 的访问方法、操作技巧及实战案例。从基础的样式修改到动态增删列表项，开发者能够灵活控制网页中的列表内容，实现丰富的用户交互。

对于编程初学者，建议从简单的列表操作开始练习，逐步尝试事件绑定和数据绑定；中级开发者则可以结合框架（如 Vue 的 v-for 或 React 的 map()）进一步探索列表的高级应用场景。

记住：DOM 操作是连接静态 HTML 与动态交互的桥梁，而 Li 对象 恰恰是这座桥梁上最灵活的“砖石”之一。通过不断实践，你将能更自信地构建出功能强大、用户体验优秀的网页应用！

HTML DOM Li 对象（手把手讲解）

一、前言：为什么需要学习 HTML DOM Li 对象？

二、基础概念：Li 对象的定义与特性

1. Li 对象的定义

2. Li 对象的层级关系

3. Li 对象的默认样式

三、核心方法：如何操作 Li 对象？

1. 访问 Li 对象的三种方式

（1）通过 `getElementById()`

（2）通过 `getElementsByClassName()`

（3）通过 `querySelectorAll()`

2. 动态修改 Li 对象内容

（1）修改文本内容

（2）修改 HTML 内容（注意 XSS 风险）

3. 操作 Li 对象的样式与属性

（1）直接修改内联样式

（2）添加/移除 CSS 类

四、进阶技巧：Li 对象的遍历与动态增删

1. 遍历列表项

2. 动态添加 Li 元素

3. 动态删除 Li 元素

五、实战案例：可交互的待办事项列表

1. HTML 结构

2. JavaScript 实现

六、常见问题与最佳实践

1. 如何避免 DOM 操作的性能问题？

2. 如何处理动态生成的 Li 元素的事件绑定？

七、结论：掌握 Li 对象，解锁列表交互的无限可能

最新发布

SQLite Like 子句（超详细）

SQLite Glob 子句（千字长文）

SQLite Limit 子句（长文解析）

SQLite Order By（千字长文）

SQLite Group By（手把手讲解）

SQLite Distinct 关键字（建议收藏）

JSP 指令（手把手讲解）

JSP 动作元素（保姆级教程）

JSP 隐式对象（一文讲透）

JSP 客户端请求（千字长文）

HTML DOM Li 对象（手把手讲解）

一、前言：为什么需要学习 HTML DOM Li 对象？

二、基础概念：Li 对象的定义与特性

1. Li 对象的定义

2. Li 对象的层级关系

3. Li 对象的默认样式

三、核心方法：如何操作 Li 对象？

1. 访问 Li 对象的三种方式

（1）通过 getElementById()

（2）通过 getElementsByClassName()

（3）通过 querySelectorAll()

2. 动态修改 Li 对象内容

（1）修改文本内容

（2）修改 HTML 内容（注意 XSS 风险）

3. 操作 Li 对象的样式与属性

（1）直接修改内联样式

（2）添加/移除 CSS 类

四、进阶技巧：Li 对象的遍历与动态增删

1. 遍历列表项

2. 动态添加 Li 元素

3. 动态删除 Li 元素

五、实战案例：可交互的待办事项列表

1. HTML 结构

2. JavaScript 实现

六、常见问题与最佳实践

1. 如何避免 DOM 操作的性能问题？

2. 如何处理动态生成的 Li 元素的事件绑定？

七、结论：掌握 Li 对象，解锁列表交互的无限可能

最新发布

SQLite Like 子句（超详细）

SQLite Glob 子句（千字长文）

SQLite Limit 子句（长文解析）

SQLite Order By（千字长文）

SQLite Group By（手把手讲解）

SQLite Distinct 关键字（建议收藏）

JSP 指令（手把手讲解）

JSP 动作元素（保姆级教程）

JSP 隐式对象（一文讲透）

JSP 客户端请求（千字长文）

（1）通过 `getElementById()`

（2）通过 `getElementsByClassName()`

（3）通过 `querySelectorAll()`