html js 树形_代码示例

树形结构是一种常见的数据展示方式，它可以将数据按照层级关系进行组织和展示。在网页开发中，我们可以使用HTML和JavaScript来创建和操作树形结构。

我们需要使用HTML来定义树形结构的基本框架。我们可以使用无序列表（`<ul>`）和列表项（`<li>`）来表示树的节点。每个列表项可以包含一个文本内容和一个子节点列表。下面是一个简单的HTML代码示例，用于创建一个包含两个节点的树形结构：

<ul>
  <li>节点1</li>
  <li>节点2</li>
</ul>

接下来，我们可以使用JavaScript来操作树形结构。通过JavaScript，我们可以动态地添加、删除和修改树的节点。我们需要获取到树的根节点元素。可以使用`document.querySelector`方法来获取根节点元素。然后，我们可以使用`appendChild`方法来添加子节点。下面是一个示例代码，用于向上述的树形结构中添加一个子节点：

var rootNode = document.querySelector('ul');
var newNode = document.createElement('li');
newNode.textContent = '节点3';
rootNode.appendChild(newNode);

在上面的代码中，我们首先使用`document.querySelector`方法获取到根节点元素（即`<ul>`元素），然后使用`createElement`方法创建一个新的列表项元素（即`<li>`元素），并设置其文本内容为“节点3”。我们使用`appendChild`方法将新节点添加到根节点的子节点列表中。

除了添加节点，我们还可以使用JavaScript来删除和修改节点。例如，我们可以使用`removeChild`方法来删除指定的节点，使用`textContent`属性来修改节点的文本内容。下面是一个示例代码，用于删除上述树形结构中的第一个节点：

var firstNode = document.querySelector('ul li:first-child');
rootNode.removeChild(firstNode);

在上面的代码中，我们首先使用`document.querySelector`方法获取到第一个节点元素（即`<li>`元素），然后使用`removeChild`方法将其从根节点的子节点列表中删除。

使用HTML和JavaScript可以方便地创建和操作树形结构。通过HTML，我们可以定义树的基本结构；通过JavaScript，我们可以动态地添加、删除和修改树的节点。这样，我们就可以根据实际需求来展示和处理数据。