第三章浏览器【2. DOM节点】-CSDN博客

1. 文档对象模型（DOM）

1.8 tab选项卡

通过点击不同的题头显示不同的内容。

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tab-box {
      width: 600px;
      margin: auto;
      border: 2px solid #FBBF14;

      .tab-title {
        display: flex;

        .item {
          flex: 1;
          background-color: #FBBF14;
          color: #fff;
          border-right: 1px solid #fff;
          text-align: center;
        }

        .on {
          background-color: #fff;
          color: #FBBF14;
        }
      }

      .tab-content {
        .item {
          height: 300px;
          display: none;
        }

        .active {
          display: block;
        }
      }
    }
  </style>

<body>

  <!-- tab选项卡切换 -->
  <div class="tab-box">
    <!-- 标题 -->
    <div class="tab-title">
      <div class="item on">标题1</div>
      <div class="item">标题2</div>
      <div class="item">标题3</div>
      <div class="item">标题4</div>
      <div class="item">标题5</div>
    </div>
    <!--内容-->
    <div class="tab-content">
      <div class="item active">展示内容1</div>
      <div class="item">展示内容2</div>
      <div class="item">展示内容3</div>
      <div class="item">展示内容4</div>
      <div class="item">展示内容5</div>
    </div>
  </div>

  <script>
    //第一步，准备好数据(标题，内容，默认索引)
    let titles = document.querySelectorAll('.tab-title .item')
    let conts = document.querySelectorAll('.tab-content .item')
    let num = 0//默认第一项索引0

    //第2步 遍历标题集合
    titles.forEach(function (el, index) {
      // console.log(el);//每一个
      el.onclick = function () {
        // alert('触发');
        // console.log(index);//索引
        titles[num].classList.remove('on')//移除上一个标题样式
        el.classList.add('on')//添加当前的样式
        conts[num].classList.remove('active')//移除上一个展示内容
        conts[index].classList.add('active')//添加当前内容
        // 更新记录结构
        num = index
      }
    })

  </script>

2. DOM节点

2.1 什么是DOM节点

DOM（文档对象模型）会将 HTML 文档的每一部分都表示为一个节点（Node）。
节点不仅包括元素节点（如 <div>、<p>），还包括文本节点、注释节点、文档节点等类型。
通过操作这些节点，JavaScript 可以动态地修改网页的内容和结构。

2.2 常见节点类型

节点类型	nodeType 值	说明
元素节点	1	HTML 元素
属性节点	2	已废弃
文本节点	3	元素或属性中的文本
注释节点	8	注释
文档节点	9	整个文档

可以通过 nodeType 属性来判断节点的类型。

2.3 DOM 节点的类与继承

每个 DOM 节点都属于特定的类（如 HTMLElement、HTMLInputElement 等）。
这些类之间存在继承关系，属性和方法会通过继承链传递。
了解节点所属的类有助于掌握其可用的属性和方法。

下图展示了常见 DOM 节点类的继承结构：

2.4 DOM 节点的查找与层级关系

1. 适用于所有节点的查找属性

属性名	说明
parentNode	父节点
childNodes	所有子节点（包括文本、注释等）
firstChild	第一个子节点
lastChild	最后一个子节点
previousSibling	前一个兄弟节点
nextSibling	后一个兄弟节点

这些属性适用于所有类型的节点（包括元素、文本、注释等）。

2. 仅适用于元素节点的查找属性

属性名	说明
parentElement	父元素节点（仅元素）
children	所有子元素节点（仅元素）
firstElementChild	第一个子元素节点
lastElementChild	最后一个子元素节点
previousElementSibling	前一个兄弟元素节点
nextElementSibling	后一个兄弟元素节点

这些属性只考虑元素节点，忽略文本和注释节点。

3. 特殊元素的内容访问

某些类型的 DOM 元素（如 <table>）还提供了专有属性和集合，用于访问其内容，例如：rows、tBodies、caption 等。
这些专有属性可以帮助我们更方便地操作表格结构。

<div class="box">
    <ul>
      <li>内容1</li>
      <li>内容2</li>
      <li>内容3</li>
      <li>内容4</li>
      <li>内容5</li>
      <li class="list_6">
        <p>内容6</p>
        <!--注释内容 -->
        <h1>哈哈</h1>

      </li>
      <li>内容7</li>
      <li>内容8</li>
      <li>内容9</li>
      <li>内容10</li>
    </ul>

    <table>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
  </div>

  <script>
    let tLi = document.querySelector('.list_6')
    console.log(tLi);
    //查找节点集合
    console.log(tLi.previousSibling);
    console.log(tLi.nextSibling);
    console.log(tLi.nextSibling.nextSibling);
    console.log(tLi.parentNode);
    console.log(tLi.childNodes);
    console.log(tLi.firstChild);
    console.log(tLi.lastChild);
    // 只查找元素
    console.log(tLi.parentElement);
    console.log(tLi.previousElementSibling);
    console.log(tLi.nextElementSibling);
    console.log(tLi.children);
    console.log(tLi.firstElementChild);
    console.log(tLi.lastElementChild);

    // 关于表格
    let $table = document.querySelector('table')
    console.log($table.rows);

  </script>

2.5 常用 DOM 节点属性

属性名	说明	只读/可写
`nodeType`	节点类型。1 表示元素节点，3 表示文本节点，其他值代表其他类型。	只读
`nodeName`/`tagName`	元素名/标签名（通常为大写）。非元素节点时，`nodeName` 描述节点类型。	只读
`innerHTML`	元素的 HTML 内容。可读写。	可读写
`innerText`	元素的文本内容。可读写。	可读写
`outerHTML`	元素的完整 HTML。写入会替换整个元素。	可读写
`nodeValue`/`data`	非元素节点（如文本、注释）的内容。通常用 `data`。	可写
`textContent`	元素内的纯文本（去除所有标签）。写入时会将内容作为纯文本插入。	可读写
`hidden`	设置为 `true` 时，等同于 CSS 的 `display: none`。	可写

2.6 DOM 节点的专有属性与 HTML 特性

1. 常见元素的专有属性与分类

每种 HTML 元素在 DOM 中都拥有一些独特的属性，这些属性反映了元素的特性和用途。我们称之为“专有属性”。这些属性可以直接通过 JavaScript 的点语法访问和操作，非常方便。

常见专有属性举例：

表单元素（如 <input>、<select>、<option>、<button>）有 value（输入值）、checked（是否选中）、selected（是否被选中）、disabled（是否禁用）等属性，用于获取或设置用户输入和控件状态。
图片和链接元素（如 <img>、<a>）有 src（图片地址）、alt（替代文本）、href（链接地址）、target（打开方式）等属性，用于描述资源路径和跳转行为。
大多数标签还支持通用属性，如 id、title、hidden、className、style 等。

这些属性都可以直接通过 JS 访问和修改，例如：input.value、img.src、a.href、button.disabled。

此外，大多数标准 HTML 特性（attribute）在 DOM 中都有对应的属性（property），如 img.src、input.checked，布尔类型的属性（如 checked、disabled）也可直接用 true/false 操作。

案例：hidden

<div>盒子</div>
  <div hidden>盒子2</div>
  <div style="display: none;">盒子3</div>
  <p>段落</p>

  <div class="main-box">
    <!--标题-->
    <h1>你好</h1>
    <style>
      h1 {
        color: red;
      }
    </style>
    <p>段落</p>
  </div>

  <script>
    let p = document.querySelector('p')
    console.dir(p)
    //设置隐藏
    p.hidden = true

    // innerHTML、innerText、outerHTML、textContent
    let mainBox = document.querySelector('.main-box')
    console.log(mainBox.innerHTML);//内部的html
    console.log(mainBox.innerText);//内部的有效文本(不包含标签)
    console.log(mainBox.textContent);//内部的所有文本(不包含标签)
    console.log(mainBox.outerHTML);//带当前标签的html内容

  </script>

2. 操作非标准特性（自定义属性）

elem.hasAttribute(name) —— 检查是否存在某个特性
elem.getAttribute(name) —— 获取特性值
elem.setAttribute(name, value) —— 设置特性值
elem.removeAttribute(name) —— 移除特性
elem.attributes —— 获取所有特性的集合

<!-- abc 完全自定义属性(不符合w3C组织关于html的编码规范) -->
  <!-- 以data-开头的自定义属性 符合htm15的标准规范 -->
  <div class="box" abc="xyz" data-a="你好" data-b="hello" data-name-nick-hi="oooo">
    一个盒子
  </div>

  <script>
    let box = document.querySelector('.box')
    // box.title
    // box.abc='123'//自定义的attribute不能当作property使用

    //-`elem.hasAttribute(name)`--检查是否存在某个特性
    //-`elem.getAttribute(name)`--获取特性值
    //-`elem.setAttribute(name, value)`--设置特性值
    //-`elem.removeAttribute(name)`--移除特性
    //-`elem.attributes`-- 获取所有特性的集合
    box.setAttribute("abc", "123")//设置修改
    box.setAttribute("yyk", "张三")//设置新增

    console.log(box.attributes);//所有属性

    box.setAttribute("data-b", "999")
    // dataset专门控制data-*开头的属性
    console.log(box.dataset.a);
    console.log(box.dataset.b);
    box.dataset.b = '东江浪'
    delete box.dataset.a //删除
  </script>

3. 推荐使用 data- 和 dataset 访问自定义数据属性