1、DOM
Document Object Model，即文档对象模型。一个html文件就是一个文档，里面的核心就是元素。CSS围绕元素有选择器为其添加样式，同样JS有DOM围绕元素来操作它本身。
2、DOM由来
在编写html文件时，元素并不是一行一行往下码的，为了可读性和其他重要意义。元素有嵌套缩进结构。其他重要意义就是指这些元素在html文件中的位置关系就好比家族关系图谱一样，方便后面多样化（这里主要指通过类似家族关系）访问每个元素。这样一个html中的元素的位置关系就引出了文档树，DOM概念。这些元素就好比是家族中的各个成员。只不过在DOM中，他们有另外一个名字——节点。
3、节点
节点有三种类型，“级别”逐次降低。分别是元素节点，属性节点，文本节点，就好比三代家庭的爷爷辈，父辈，本辈。节点又有三个属性，分别是nodeName,nodeType,nodeValue。就像是你有名字这个属性，你是属于本辈，nodeValue暂时还没想到好的解释。值得注意的地方是元素节点的nodeValue为null，文本节点的nodeName为#text，还有写html文件时，为了代码的可读美观，换行的空白也属于文本节点。
4、节点相关操作
4.1、访问节点
有了节点，自然会有对节点的操作，比如访问节点，常用的方法有getElementById();getElementsByTagName();getElementsByName();因为一个html文件id的唯一性，标签名和name属性可重复性，自然上面三种方法的element是否有复数形式就好理解了。另外有两种通过选择器的方法很方便，分别是querySelector();querySelectorAll();由于是新增方法，所以兼容性问题存在。
既然节点存在家族关系，自然可以通过反映这种关系的属性访问，这些属性有firstChild,lastChild,nextSibling,previousSibling,childNodes,parentNode等。获取根节点：document.documentElement。获取body：document.body
4.2、创建节点
创建节点，因有三种类型的节点，自然有三类方法。分别是createElment();createAttribute();createTextNode();
尾部追加节点的方法appendChild();既然是追加的节点作为子节点，所以该方法的调用者是父节点。
头部追加节点的方法insertBefore(追加的谁,追加位置);删除节点的方法removeChild();修改节点的方法replaceChild(新节点，旧节点);
上面创建节点的方法太过繁琐。操作简单且功能强大的innerHTML被挖掘出来了，用它创建节点非常快速，比如给div下添加个p，代码如下
<body> <div><div> <script> window.onload = function(){ div.innerHTML = "<p>这是段落</p>"; } </script> </body>
这就展示了它具有识别并解析html元素的强大功能。某个元素的innerHTML值是字符串类型的其所有子元素。与innerHTML相对的是innerText，它没有解析功能，因此可以用它来在网页上显示源代码拉。