JS的三个组成部分：
ECMAscript(javascript核心标准，也是一个解析器)
DOM(通过document提供的一些方法或者属性来操作页面)
BOM(通过window提供的一些方法或者属性来操作页面
一、DOM理论知识：
1、dom级别问题？
dom一级：加载页面
dom二级：页面渲染
dom三级：页面预加载
2、dom的原理解析：
1.DOM(通过document提供的一些方法或者属性来操作页面)--Document Object Model(文档对象模型)
官方解释 : 是w3c组织推荐的处理可扩展标志语言的标准编程接口（API），在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM;
简单点来说就是：DOM通过document提供一些能够操作页面内容的属性或者方法，赋予开发者操作页面的能力。比如：document.getElementById()。。。
2.DOM结构关系图谱分析：
按层级划分：
兄弟节点 : 同级之间的关系
父子关系：上下两层节点之间的关系(分为父节点和子节点)
祖先关系：当前节点上面的所有节点的统称
子孙关系：当前节点下面的所有节点的统称
3.DOM中节点的类型划分：
首先明确什么是节点？Document的内容(标签、注释、文本...)统称为节点 区别在于节点的类型不同！
元素节点：数字1 --- 标签
Document节点：数字9 --- 整个文档
文本节点：数字3 --- 一个节点下所有相连的(文字、空格、换行...)内容总和为一个文本节点
注释节点：数字8 --- 注释
属性节点：数字2 --- attributes：[类似数组的集合]获取属性和属性值
二、DOM操作过程
1、获取节点的方式？目前常用的有以下五种：
document.getElementById(ID) //通过ID来获取节点
document.getElementBysTagName(标签名) //通过标签名来获取节点 document.getElementBysClassName(".类名") //通过CLASS来获取节点 document.getElementsByName() //通过标签里面的naem属性获取节点 主要跟后台打交道
document.querySelector() //将上三种结合起来使用 .tbody按class获取 #tody按ID获取 tbody标签名获取
.children[] //指当前选择器的孩子节点【标签名只会获取到第一个表签节点】
2、DOM节点的插入和删除
1>一般级以上的DOM操作--简易：innerHTML 和 innerTEXT---第一个可以插入标签，第二个只能插入文本---这种方式书写简单，但是影响性能，先做字符串拼接，再把字符串转换成节点，然后，再把节点添加在元属内
Element.innerHTML = "<li>2</li>"; Element.innerHTML += "<li>2</li>";
2>简单的DOM操作--性能优化:createElement---创建节点，直接对节点进行操作，省略了前两步，书写麻烦，但是提高了性能---(适用于单一插入(一张图片、内容、标签或者按钮))
var li=document.createElement("li"); //新建一个li的元素节点
li.appendChild(document.createTextNode("6")); //li节点内插入文本节点 var ul=document.querySelect(".list"); //获取想要的元素节点 ul.appendChild(li); //给获取的元素节点添加 子节点(创建的li节点)
操作样式属性：
getAttribute(属性) //获取它的属性
setAttribute(属性，值) //写入哪个属性 什么值
name = "pwd" setAttribute("name","pwd");
removeAttribute(属性名) //移除属性---class、id...
3、设计思想(模式)
如果我们需要标识位的时候 我们可以在循环中 使用 id+i 来进行命名，这样在获取id 的时候 通过document.getElementById(id+i)就可以找到对应元素
4、移除或替换节点
Node.remove() //移除当前节点 Node.removeChild( Node.chlidNode[num] ) //移除当前节点的孩子节点---现获取再移除;
//括号内必须接 当前节点元素 的子节点
Node.replaceChild( New,Old ) //替换节点--前面是新的节点,后面是旧节点(当前节点的子节点)
var li = document.createElement("li");
li.appendChild(document.createTextNode(""这是新增的节点"));
Node.replaceChild( li,Node.children[num] );
三、DOM涉及的相关方法和属性
1、dom 属性或方法第一部分---节点的类型和关系
Node.nodeType 判断节点的属性、返回的值是一个数字
Node.childNodes：[类数组]获取某个节点下的所有子节点 div.childNodes[i]; i从零开始计算
Node.children：[类数组]不是标准的属性，但是所有的浏览器都支持。找到某个元素下的所有元素子节点
Node.nodevalue：查看节点的属性值
Node.nodeName：查看节点的属性名
Node.parentNode：查找某个节点元素的父节点
Node.nextElementSibing:找到某个元素下个兄弟节点
Node.previousElementSibing：找到某个元素上个兄弟节点
Node.firstElementChild：找到第一个元素子节点
Node.lastElementChild：找到最后一个元素子节点
2、dom 属性或方法第二部分---获取节点的盒模型属性
Elem.tagName 查看标签类型
[以下属性操作：如果祖先节点都没有定位 默认为body]
Elem.offsetParent:
offsetParent就是最近的具有定位属性的祖先节点
Elem.offsetLeft/Elem.offsetTop---返回值为数字
offsetLeft/offsetTop 就是最近的具有定位属性的祖先节点的距离
offsetLeft：左边框到 具有定位的 父级内边框 的距离
offsetTop：上边框到 具有定位的 父级内边框 的距离
Elem.getBoundingClientRect()---返回值为对象ClientRect，内含元素的盒模型信息[相对于浏览器可视区域]
高版本：left top bottom right width height(可单独获取其中的某个属性)
Elem.getBoundingClientRect().left---返回值为一个数字
Elem类似属性[不常用]:getComputedStyle(elem).borderLeftWidth---获取样式表中左边框 的 边框值；
Elem.getAttribute(attr);
获取元素 行间指定属性的 属性值
Elem.setAttribute(attr,value);
设置元素 行间属性的 属性值
【注意：这里容易混淆的一点是elem.style.attr 只能写入 不能获取】
Elem.removeAttribute(attr)
删除元素指定的属性(等同于null)
【特点：可以操作行间自定义的属性 可以获取 src、href等的相对地址】
Elem.offsetWidth/Elem.offsetHeight ---获取元素的宽高(计算边框)
Elem.clientWidth/Elem.clientHeight ---获取元素的宽高(不计算边框)
3、dom属性或方法第三部分(难点)--节点的创建、插入、删除、替换、克隆
document.createElement(tagName)
通过标签名的形式创建一个元素节点
document.createTextNode(string)
通过标签名的形式创建一个文本节点
Node.appendChild(childNode)
往一个节点里边添加一个子节点，注意是添加在最后
Node.inserBefore(childNode1,childNode2)
往一个节点的指定子节点前边插入一个节点
如上：childNode1插入到childNode2前边；
Node.removeChild(childNodes)
从一个节点中删除指定的子节点
Node.replaceChild(Node,childNodes)
Node用来替换的节点，childNodes被替换的子节点
两个参数必须写，且子节点如果不存在会报错
Node.cloneNode(boolean)
克隆一个节点---事件(鼠标、键盘...)不会被克隆
true：克隆元素和元素包含的子孙节点
false：克隆元素但不包含元素的子孙节点[默认]
【注意：appendChild、inserBefore、replaceChild在操作一个已有的元素时，是将已有的元素移动，而不是复制一份进行操作】
4、dom属性或方法第四部分---节点的表格操作
表格分为三个部分：thead、tbody、tfoot
在dom规定中:获取表格赋值给table后可以直接对其内元素进行操作
table.tHead---获取表格头部
table.tFoot---获取表格底部
table.tBodies
获取表格主体---一个表格中表格的主体可以有多个，所以获取的也是一个集合
table.rows[n]
获取表格的行---rows获取的行是一个集合
tBodies[n].rows/tHead.rows/tFoot.rows
表格的行 就是tr
rows[n].cells
单元格 就是td---cells获取的单元格一个集合
【注意：最终样式的显示也是由权值来决定的】
