HTML | DOM dl 对象(1)

📌 相关文章

📜 HTML | DOM dl 对象(1)

📅 最后修改于: 2023-12-03 15:15:35.048000 🧑 作者: Mango

HTML | DOM dl 对象

HTML | DOM dl 对象表示一个定义列表。它由一组术语及其定义构成。该对象表示 HTML <dl> 元素。

属性

| 属性 | 描述 | | --------------- | -------------------------------------------------- | | innerHTML | 设置或返回元素内的 HTML。 | | length | 返回定义列表的项数。 | | <dt> | 返回定义列表的第一个 <dt> 元素。 | | <dd> | 返回定义列表的第一个 <dd> 元素。 |

方法

| 方法 | 描述 | | -------------- | ---------------------------------------------- | | item() | 返回定义列表指定索引处的项（起始索引为 0）。 | | namedItem() | 根据名称返回定义列表项目（在 HTML 中使用）的值。 | | add() | 向定义列表添加新项。 | | remove() | 从定义列表中删除指定项。 |

示例代码

<!DOCTYPE html>
<html>
  <head>
    <title>dl object demo</title>
  </head>
  <body>
    <dl id="myList">
      <dt>HTML</dt>
      <dd>用于创建Web页面的标准标记语言</dd>
      <dt>CSS</dt>
      <dd>用于描述Web页面上的样式</dd>
      <dt>JavaScript</dt>
      <dd>用于为Web页面添加交互性，动态效果</dd>
    </dl>
    <script>
      let myList = document.getElementById("myList");
      let length = myList.length;
      console.log("列表项数：" + length);
      let firstDT = myList.firstElementChild;
      console.log("第一个DT元素：" + firstDT.innerHTML);
      let firstDD = myList.firstElementChild.nextElementSibling;
      console.log("第一个DD元素：" + firstDD.innerHTML);
      let secondItem = myList.item(1);
      console.log("指定索引处的项：" + secondItem.innerHTML);
      let jsItem = myList.namedItem("JavaScript");
      console.log("名称为JavaScript的项：" + jsItem.innerHTML);
    </script>
  </body>
</html>

示例解释

该示例代码创建了一个包含3个 <dt> 和 <dd> 元素的定义列表，并使用 dl 对象获取了该列表的一些属性和方法。

其中，使用 innerHTML 属性获取了定义列表的 HTML，使用 length 属性获取了列表中项的个数，使用 firstElementChild 和 nextElementSibling 属性获取了列表的第一个 <dt> 元素和第一个 <dd> 元素，使用 item() 方法和 namedItem() 方法获取了列表中指定索引处和指定名称的项。