该怎么理解Javascript的DOM模型？新手要掌握DOM模型这三个要点！
怎么理解DOM模型？
DOM模型(Document Object Model)中文又称文档对象模型定义了用户操作文档对象的接口，对于这句话可能有点懵。你可以这样理解它，DOM模型把文档（html和xml）抽象成供开发者操作的接口，允许程序和脚本（JavaScript、python等））访问和更新文档（html和xml）的内容、结构和样式。DOM模型诞生和JavaScript有很大的关系，现在不仅仅JavaScript在使用其他语言也在使用。DOM使得用户对HTML的控制有了空前的访问和控制能力，并使开发者将HTML作为XML文档来处理。
网页中的DOM模型框架
为了大家更好理解DOM模型先说一下网页中的DOM模型框架，先看1张图片
<html>标记位于文档最顶端，他没有父元素，成为DOM的根节点。再往下<html>有<head>和<body>两个分支，他们同在一层互不包括，属于兄弟关系，有着共同的父元素<html>。再往下看<head>有两个子元素<head>和<title>，它们互为兄弟。而<body>有3个子元素，分别是<h2>、<p>和<ul>，<h2>和<ul>都有自己的子元素。有这个完整的关系划分，html文档结构也清晰可见，各个元素很容易表达出来，这就是DOM完成的。
DOM模型中的节点
节点（node）代表网络的连接点，网络就是节点构成的集合。DOM情况也很类似，文档可以说是节点构成的集合。在DOM中有3种节点，分别是元素节点、文本节点和属性节点。
1、元素节点
上图显示的<html>、<body>、<meta>、<h2>、<p>等都可以看做节点，各种标签就是这些元素节点的名称，例如文本段落元素的名称是"p",元素节点是包含其他的元素。
2、文本节点
在HTML中光有标记搭建框架是不够的，页面最终目的是向用户展示内容。上图中的<h2>标记中有文本“标题”，项目列表<li>中有A、B、C、D。这些具体的文本在DOM模型中称为文本节点（text node）。并不是所有的元素节点都包含文本节点。
3、属性节点
作为页面中的元素，大部分都包含属性，例如大部分元素都有一个title属性。我们可以利用这些属性来对包含在元素的对象作出精确的描述，例如a标签里有title=“D”,那么D就是a标签的属性，也是a的属性节点（attribute node）。属性包括在标签里，属性节点总是被包含在元素节点中。
使用DOM
对于每一个DOM节点node，都有一系列属性、方法可以使用，为大家介绍DOM经常使用节点操作方法，下图示常用的属性和方法：
1、访问节点
最常用的是getElementsByTagName()和getElementById()。getElementsByTagName()用来返回一个包含某个相同标签名的元素的nodelist。例如<p>标签标签的标签名为"p"，vor oP=getElementsByTagName("P"),返回文档中所有的p元素。
2、检测节点类型
通过节点的nodeType属性可检测节点的类型。该属性返回一个代表节点类型的整数值，总共有12个可取的值，如alert(document.nodetype);,可以对某种类型的节点做单独处理。
3、利用父子兄弟关系查找节点
为了获取某个节点后，可以通过父子关系，利用hasChildNodes()方法和childNodes属性获取该节点包含的所有的子节点。
4、设置节点属性
在找到需要的节点之后通常希望对其属性做相应的设置，DOM定义了两个便捷的方法来查询和节点的属性，即getAttribute()方法和setAttribute()方法。
5、创建、添加、替换、插入节点操作
除了查找节点属性以外，DOM同样提供了很多便捷的方法来管理节点，主要包括创建节点（createElement()）、删除节点（removechild()）、替换节点（replacechild()）和插入（insertBefore()）等操作
关于盒子DOM模型，上面总结都是最简单的，一定要多多练习孰能生巧。每天学习一个知识点，每日寄语-“是非天天有，不听自然无。”