随笔- 1395 文章- 2 评论- 1664 阅读- 637万

JavaScript 学习-26.HTML DOM节点与节点属性

前言

DOM (Document Object Model) 文档对象模型，通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

简介

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

节点树中的节点彼此拥有层级关系。我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

<html>
  <head>
    <meta charset="utf-8">
    <title>hello</title>
  </head>
  <body>
    <h1>DOM 节点</h1>
    <p>Hello world!</p>
  </body>
</html>

上面这段html

<html>是根节点，它没有父节点
<head> 和 <body> 的父节点是<html> 节点
<p>的父节点是<body>,它的子节点是一个文本节点Hello world!

节点属性

在DOM中，每一个节点都是一个对象，DOM节点由三个重要的属性：

nodeName: 节点的名称
nodeValue: 节点的值
nodeType: 节点的类型

以这段html为例

<body>
    <h1>DOM 节点</h1>
    <p id="demo" class="text">Hello world!</p>

nodeName 属性获取节点的名称。

nodeName 属性获取节点的名称

nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

直接看下面JavaScript代码

      element =  document.getElementById('demo')
      // 元素节点的 nodeName 与标签名相同
      console.log(element.nodeName);  // P
      console.log(element.attributes[0]);  // 属性节点 id="demo"
      console.log(element.attributes[0].nodeName);  // id
      console.log(element.childNodes[0]);  // 文本节点 Hello world!
      console.log(element.childNodes[0].nodeName);  // #text
      // 文档节点
      console.log(document.nodeName);  // #document

nodeValue 获取节点的值

nodeName 属性获取节点的值

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值
文档节点的 nodeName 始终是null

      element =  document.getElementById('demo')
      // 元素节点的 nodeName 与标签名相同
      console.log(element.nodeValue);  // null
      console.log(element.attributes[0]);  // 属性节点 id="demo"
      console.log(element.attributes[0].nodeValue);  // demo
      console.log(element.childNodes[0]);  // 文本节点 Hello world!
      console.log(element.childNodes[0].nodeValue);  // Hello world!
      // 文档节点
      console.log(document.nodeValue);  // null

nodeType 节点类型

节点的类型，只读，对照这张表

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

示例

      element =  document.getElementById('demo')
      // 元素节点的 nodeName 与标签名相同
      console.log(element.nodeType);  // 1
      console.log(element.attributes[0]);  // 属性节点 id="demo"
      console.log(element.attributes[0].nodeType);  // 2
      console.log(element.childNodes[0]);  // 文本节点 Hello world!
      console.log(element.childNodes[0].nodeType);  // 3
      // 文档节点
      console.log(document.nodeType);  // 9