一、在 HTML DOM 中，所有事物都是节点，DOM 是被视为节点树的 HTML。根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

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

DOM节点树如下：

HTML DOM节点_HTML DOM节点

这里举例说明常用节点关系：

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

从以上html中：

(1)<html>是根节点元素

(2)<head>  <body>元素是<html>的子节点元素，<head>  <body>元素的父节点是<html>，<head>  <body>元素也是同胞节点

(3)<h1> <p>元素是同胞节点

   (4) <h1>和<p>元素子节点都为文本节点，可以通过节点的 innerHTML 属性来访问文本节点的值

二、DOM的常用方法与属性

Javascript或其他语言可以对dom进行访问与操作，所有HTML元素被定义为对象。操作DOM对象的方法和属性，需要先获取DOM对象(DOM元素)，如下获取dom元素对象

element=document.getElementById("divid");      //返回带有指定 ID 的元素

document.getElementsByTagName("p");         //返回带有指定标签名的所有元素

document.getElementsByClassName("divname");     //返回包含 class="divname" 的所有元素

1、方法是可以在节点元素上执行的动作

常用方法

getElementById()返回带有指定 ID 的元素。
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点。
insertBefore()在指定的子节点前面插入新的子节点。
createAttribute()创建属性节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。

2、属性是可以在节点元素设置和修改的特征值

常用属性：

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

三、创建新的元素节点

var  divparam=document.createElement("div");      //创建一个dom新节点
var node=document.createTextNode("创建了一个文本节点");    //创建了一个文本节点

divparam.appendChild(node);        //向div节点中追加了一个文本节点，也就是衍生了一个子节点


//向所在页面已后的节点中添加<div>这个被创建的节点，才可以显示于这个页面
document.body.appendChild(divparam);

四、DOM事件

 DOM 允许 JavaScript 对 HTML 事件作出反应，作用在元素上常用的事件有：

  • 当用户点击鼠标时 onclick/onmousedown/onmouseup
  • 当网页已加载时 onload
  • 当图片已加载时 
  • 当鼠标移动到元素上时 onmouseover/onmouseout
  • 当输入字段被改变时  onchange
  • 当 HTML 表单被提交时 
  • 当用户触发按键时

我们操作事件只需要对相应的元素中添加onclick属性从而影响对应的javascript方法：

<div onclick="this.innerHTML='hello，点击我已经做出了响应!'">点击文本必有回响</div>

 或者

<button onclick="displayDate()">点我</button>

<script>
  function displayDate(){
// .......
}
</script>

本文参考了https://www.runoob.com/htmldom/htmldom-tutorial.html教程