Dom元素操作-增删改查

• html

    <ul class="list">
      <li class="item">首页</li>
      <li class="item">学习</li>
      <li class="item">相册</li>
      <li class="item">查看</li>
      <li class="item">社区</li>
      <li class="item">关于</li>
    </ul>

• css

  .list > .item {
        list-style-type: none;
        padding: 1rem;
      }
      .itemStart {
        background-color: #ddd;
      }
      .active {
        background-color: lightseagreen;
        color: lightyellow;
      }

• javascript

      // 获取body对象
      const body = document.body;
      //   设置body对象的fontSize
      body.style.fontSize = "12px";
      //   通过类名，获取列表对象
      const list = document.querySelector(".list");
      list.style.display = "flex";
      //   通过类名，获取列表内人项
      const items = document.querySelectorAll(".list>.item");
      //   为列表项添加类
      items.forEach((item) => item.classList.add("itemStart"));
      //   获取列表里的第一项
      const first = document.querySelector(".list>.item");
      first.classList.add("active");
      //   元素节点，children方式获取的对象集合，不是数组，
      // 通过"...",把获取的对象集合变成数组
      [...list.children].forEach((item) => {
        item.style.border = "1px solid #b3b3b3";
      });
      list.firstElementChild.nextElementSibling.style.color = "blue";
      list.lastElementChild.style.backgroundColor = "#aaa";
      list.lastElementChild.previousElementSibling.style.color = "seagreen";
      //   创建元素，并添加元素到列表
      let li = document.createElement("li");
      li.textContent = "联系我们";
      li.style.padding = "1rem";
      li.style.backgroundColor = "#ddd";
      li.style.listStyleType = "none";
      //   添加方法append
      list.append(li);
      //   查询到"学习"项
      const study = document.querySelector(".list>.item:nth-of-type(2)");
      //   删除“学习”项
      study.remove();