Nov 15, 2019

HTML之DOM节点树

具体参见菜鸟教程

DOM概念

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

###树形结构

Document:

​ Root Document :

​ Element:

​ Element:

​ Text:“My title”

​ Element:

​ Attribute:“href”

​ Element:

​ Text:“My link”

​ Element:

​ Text:“My header”

DOM Nodes

<html>
  <head>
    <meta charset="utf-8">
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 课程1</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中：

  • 文本节点 “Hello world!” 的父节点是 节点

并且：

并且：

HTML DOM 方法

getElementById() 方法返回带有指定 ID 的元素：

var element=document.getElementById("intro");

一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点