DOM

一、JavaScript的组成
ECMAScript:核心基础，语法规则（提供一些方法）
DOM：document object model：文档对象类型，定义各种操作页面元素的属性的方法
BOM: borwser object model:浏览器对象类型，定义各种操作浏览器的属性的方法

二、Dom文档对象模型（提供api操作一些节点）
1.所有和HTML页面相关的操作都是DOM提供的（记住）
2.修改文字：一个元素的子节点（在dom中不仅仅标签是节点。还包括：文本，注释，元素节点。掌握：元素节点，文本节点（例如：回车，缩进），注释节点）。节点包括12种
1）使用childNodes操作子节点，注意：每个节点都是一个对象，使用点操作对象



修改节点的内容

2）.注释/文本节点：修改nodeValue

修改文本节点


3）了解：nodeType:看出当前的节点的nodeType的值是多少？
注释8，元素节点：1，属性节点：2，文本节点：3
nodeName,所有文本的节点nodeName如下

所有注释节点的nodeName如下

nodeValue针对元素来说无意义的

3.平常操作最多的就是元素节点（掌握）
（1）如何只获取元素子节点？
使用children，但是不可以使用forEach，如果要使用，需要先拆分（使用点点点拆）为纯数组，再加上forEach需要使用箭头函数传参



forEach

（2）获取父元素的节点：
parentNode（是指结构上的父级）相当于html结构上的父级
offsetParent定位父级（元素自身没有加定位属性的话，也是有定位父级的）
爷爷：parentNode.parentNode

获取父节点



定位父级


爷爷节点



（3）了解：获取所有的子元素
getElementsByTagName("")通配符：
（4）了解：其他获取元素子节点方法（需要考虑兼容问题）
firstChild
firstElementChild（ie8中没有）
下一个兄弟元素：nextElementSibling

三、总结：关于节点的概念
nodeName nodeValue nodeType

children
parentNode
offsetParent

createElement()
appendChild()

insertBefore()
removeChild()

四、以后尽量不使用那个innerHTML+=，因为会覆盖之前的节点，在点击操作中，会使得点击操作失效;但是只要元素不适用事件也可使用innerHTML

以下属于一个表达式得到一个字符串，并且赋值给了innerHTML，会覆盖oWrap的innerHTML


1.创建新节点（对子节点新增的操作）
document.createElement（“标签”）
放入owrap，表示在节点之后放入一个标签
owrap.appendChild（“变量名”）

let oA = document. createElement("a") ;
oA=innerText="我是一个a标签";
oA.href = "https://www.xxx.com/";
//放入owrap
oWrap. appendChild( oA ) ;

2.把标签放在其他标签的前面或后面insertBefore(newChild，refChild) 在refChild子节点之前，插入新子节点newChild
ele.appendChild()(ele元素节点)
给ele添加一个子节点

把一个元素插入到另一个元素之前


3.删除removeChild（节点是不能自杀的，必须通过父级移除）
删除某个节点
方法一

方法二、常用，直接获取父节点

无论删除还是其他的操作，只要变量被存储了，就一定存在，只不过不在页面显示相应的样式了而已
例一:


例二.