前端页面分为三个部分：结构HTML 表现CSS  行为JavaScript

JS三个组成部分：

• ECMAScript核心基础（JS语法、常量、变量、数据类型、运算符、函数、内置对象）

• BOM(Browser Object Model) 浏览器对象模型 封装操作浏览器相关的API（window.alert()   window.prompt()   window.setInterval()   window.close()）

• DOM(Document Object Model)文档对象模型 封装的是操作文档相关的API（document.getElementById() document.body   document.documentElement  document.title  document.cookie）

DOM知识回顾：

什么是DOM?

DOM(Document Object Model)文档对象模型 封装的是html或xml操作文档相关的API。

当网页被加载时，浏览器会创建页面的文档对象模型，这个模型被构造位对象的树，习惯称为 DOM Tree。

DOM包含了所有的html标签元素、文本字符串、html属性、注释等等。

利用DOM中提供的API，使程序有能力动态的访问和更新文档中的内容、结构和样式，使页面的交互性增强。

DOM应用？

操作html、html属性、css、事件等

获取css外部样式浏览器能力检测？

二、节点相关属性

DOM Tree中每一个对象都称之为节点。如何去判断这些节点呢？

所以DOM中提供相关的API，来获取节点类型、节点名称或节点值:

nodeType   返回节点类型，是一个数值

元素节点 -  1

属性节点 - 2

文本节点 - 3

注意：换行  空格  制表符都是文本节点

注释节点 - 8

文档节点 - 9

更多详细节点https://www.w3school.com.cn/jsref/prop_node_nodetype.asp

nodeName  返回节点名称，标签的大写形式（tagName）

nodeValue   返回节点值，不是所有的节点都会含有节点值

三、DOM层级访问

根据节点类型，我们可以分为两种情况进行访问：

一种情况是，包含所有的元素、属性、文本、注释等的节点树，节点树比较复杂，操作比较繁琐。

一种情况是，仅仅只有元素，称之为元素树。元素树更加的简洁，查找和操作也更加便捷。

访问层级关系介绍：

DOM层级关系类似于人类直系关系，有家谱的可以去看看。关系无非就是祖孙、父子、兄弟关系：

子节点：被嵌套进去的下一级节点叫做子节点，子节点只有一个父节点。

父节点：子节点的上一级节点叫做父节点，父节点可以拥有任意数量的子节点。

祖先节点：里面具有嵌套节点的节点叫做祖先节点，包括父节点

后代节点：被嵌套进去的所有层级节点都叫做后代节点，包括子节点

兄弟节点：拥有相同父节点的同级节点

根节点：一个html文档一般只有一个根节点，根节点没有父节点

节点树层级访问相关属性：

parentNode   获取当前元素的父节点

childNodes     获取当前元素所有的子节点

这是一个类数组，可以通过指定索引去获取对应的节点

firstChild  获取当前元素的第一个子节点

lastChild   获取当前元素的最后一个子节点

previousSibling  获取当前元素的上一个兄弟节点

nextSibling  获取当前元素的下一个兄弟节点

元素树层级访问相关属性：

parentElement     获取当前元素的父元素

children  获取当前元素的所有子元素（忽略了文本、注释、空白节点等）

firstElementChild  获取当前元素的第一个子元素

lastElementChild  获取当前元素的最后一个子元素

previousElementSibling  获取当前元素的上一个兄弟元素

nextElementSibling  获取当前元素的下一个兄弟元素

四、获取元素的方式

document.getElementById()

document.getElementsByClassName()

document.getElementsByTagName()

document.getElementsByName()

document.querySelector(selector)   通过指定的选择器匹配符合条件的第一个元素

document.querySelectorAlll(selector) 通过指定的选择器匹配符合条件的所有元素

五、DOM高级操作

DOM操作不但可以查找节点，还可以创建节点、复制节点、插入节点、删除节点和替换节点。

5.1 创建节点

createElement('tagName')  创建元素节点

createAttribute('attrName')  创建属性节点

createTextNode('string') 创建文本节点

5.2 追加节点

appendChild(childNode)   向指定节点结尾添加一个新的子节点

插入和替换节点

insertBefore(newnode,oldnode)    在已有的子节点的前面去插入一个新的节点

replaceChild(newnode,oldnode)   用新的节点去替换指定的子节点

5.4 克隆和删除节点

cloneNode(boolean)   克隆节点

参数 boolean 布尔值。默认false,仅克隆当前节点。如果设置为true,克隆当前以及后代所有的节点。

removeChild(childNode)  在指定节点中删除一个子节点

remove()  移除指定节点

第一种用法：不添加任何参数，删除当前元素

第二种用法：添加一个索引参数，删除下拉列表中指定索引的项