节点的获取

⭐️ Node.nodeName

返回值是大写
只读属性，不可修改

<div class="container">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <!-- 我是注释 -->
  <p>123</p>
</div>
<script>
  const oContainer = document.getElementsByClassName('container')[0];
  console.log(
    oContainer.nodeName, // DIV
    oContainer.firstChild.nodeName, // #text (第一个是文本节点)
    oContainer.childNodes[3].nodeName, // #comment（第四个是注释节点）
    oContainer.lastElementChild.nodeName // P（最后一个元素节点是p标签）
  );
</script>

Node.nodeValue

有 nodeValue 的节点
- 属性节点（2）
- 文本节点（3）
- 注释节点（8）
没有 nodeValue 的节点
- 元素节点（1）
nodeValue 可以被修改

<div class="container" id="app">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </div>
  <!-- 我是注释 -->
  <p>123</p>
</ul>
<script>
  const oContainer = document.getElementsByClassName('container')[0]; // 元素节点

  const oBlankText = oContainer.firstChild; // 文本节点
  const oComment = oContainer.childNodes[3]; // 注释节点
  const oContainerIdAttr =
        oContainer.getAttributeNode('id'); // container的id属性节点
  const oUlClassAttr =
        document.getElementsByTagName('ul')[0].getAttributeNode('class');
  			// ul标签的class属性节点

  console.log(
    oContainer.nodeValue, // null
    oBlankText.nodeValue, // '\\n  '
    oComment.nodeValue, // ' 我是注释 '
    oContainerIdAttr.nodeValue, // 'app'
    oUlClassAttr.nodeValue // 'list'
  )

  oComment.nodeValue = '我是被修改后的注释';
  console.log(oComment.nodeValue); // comment 被修改成 我是被修改后的注释
</script>

⭐️ Node.nodeType

类型
- 元素节点（1）
- 属性节点（2）
- 文本节点（3）
- 注释节点（8）
- document（9）
- DocumentFragment（11）
只读

Node.hasChildNodes

返回一个布尔值,表明当前节点是否包含有子节点.

<div class="container" id="app" style="background-color: aqua;font-size: 18px;">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <!-- 我是注释 -->
  <p>123</p>
</div>
<script>
  const oContainer = document.getElementsByClassName('container')[0]; // 元素节点
  console.log(oContainer.hasChildNodes()); // true
</script>

Element.attributes

返回该元素所有属性节点的一个实时集合

<div class="container" id="app" style="background-color: aqua;"></div>
<script>
  const oContainer = document.getElementsByClassName('container')[0]; // 元素节点
  console.log(oContainer.attributes);
</script>

Untitled