HTML | DOM li 对象

HTML | DOM li 对象表示一个列表中的单个项目。li对象是HTML | DOM树中的节点，可以使用JavaScript对其进行操作和修改。

构造函数

li对象没有构造函数。它们是通过父元素(如ul、ol)的appendChild()方法动态添加到HTML文档中的。

属性

li对象具有一些属性，这些属性可以用来获取和设置元素的特征。

className

用于获取或设置li元素的类名，可以用空格分隔多个类名。

// 获取li元素的类名
const liClasses = li.className;

// 设置li元素的类名
li.className = 'list-item active';

id

用于获取或设置li元素的id。

// 获取li元素的id
const liId = li.id;

// 设置li元素的id
li.id = 'list-item-1';

innerHTML

用于获取或设置li元素的内部HTML内容。

// 获取li元素的内部HTML内容
const liContent = li.innerHTML;

// 设置li元素的内部HTML内容
li.innerHTML = '<span>Item 1</span>';

textContent

用于获取或设置li元素的文本内容，忽略HTML标签。

// 获取li元素的文本内容
const liText = li.textContent;

// 设置li元素的文本内容
li.textContent = 'Item 1';

方法

li对象还具有一些方法，这些方法可以用来修改和操作元素。

click()

用于模拟鼠标单击li元素。

// 模拟点击li元素
li.click();

remove()

用于从HTML文档中删除li元素。

// 从HTML文档中删除li元素
li.remove();

示例代码

// 创建一个新的li元素
const li = document.createElement('li');
li.className = 'list-item';
li.textContent = 'Item 1';

// 将li元素添加到ul列表中
const ul = document.querySelector('ul');
ul.appendChild(li);

// 获取ul列表中的所有li元素
const lis = ul.querySelectorAll('li');

// 遍历li元素并为每个元素添加事件监听器
for (let i = 0; i < lis.length; i++) {
  lis[i].addEventListener('click', function() {
    // 修改被单击的li元素的类名
    this.className += ' active';
  });
}