问题
⼀、JS包含哪⼏部分：
ES BOM DOM
⼆、什么是BOM：
BOM即浏览器对象模型，BOM是操作浏览器的接⼝(API)。
三、BOM有⼏⼤对象？
1.窗⼝(window)
2.历史记录(history)
3.地址栏(location)
4.版本信息(navigator)
5.屏幕(screen)
四、什么是DOM：
DOM即⽂档对象模型，DOM是操作⽂档的接⼝(API)。
五、DOM有⼏⼤对象 ? 盗墓
1.⽂档对象: document
2.元素对象: elment
3.⽂本对象: text
4.属性对象：Attribute
5.节点对象：node
js包含那几部分
- ES： 一门语言，学习ES学习的是语法（ECMA：欧洲计算机协会 ECMAcript)
- BOM：浏览器对象模型 用途：提供给ES一个接口来操作浏览器
-
DOM：文档对象模型 用途：提供给ES一个接口来操作文档
BOM是什么
- BOM:Browser Object Model 浏览器对象模型
- BOM：把浏览器的一切定义成了一个对象模型
- Window：整个浏览器被定义成了window对象
- document:把文档定义成一个对象
- Histroy：把历史记录定义成一个对象
- Screen:把显示浏览器窗口的屏幕定义成一个对象
- Location:把地址栏定义成一个对象
- Navigator:把浏览器的介绍信息定义成一个对象
- Window：整个浏览器被定义成了window对象
- BOM用途：充许ES操作浏览器的一切
- BOM目前没有标准
DOM是什么
- DOM:Dcoument Object Model 文档对象模型
- 用途：DOM就是为了操作文档
- 在DOM眼里，整个浏览器文档内容都是对象
- DOM把⽂档的⼀切内容都定义成了对象。
* ⽂档是对象
* 元素是对象
* ⽂本是对象
* 属性是对象
* 注释是对象 - DOM是W3C制定的⼀套标准。
DOM树
- DOM树是文档对象模型的树状表示。
- 在DOM眼里，全部文档内容都是对象。一共有五大对象
- ⽂档是对象：文档对象是DOM的核心对象
- 元素是对象
- ⽂本是对象
- 属性是对象
- 注释是对象
- DOM定义了大量的属性和方法来操作这些对象
- document对象
- element对象
- attribute对象
- text对象
- node对象
Document对象
定义：
- 表示：Document对象表示网页文档
- 地位：Document对象是DOM核心对象
- 用途：Document对象是访问文档的入口
用途：.
0
-
Document对象主要用途查找元素,也可以修改文档，创建元素
- 查：获取元素
- 增：创建元素
- 删：删除元素
- 改：替换元素
获取元素的方法
传统方法
通过id获取元素getElementById()
window.document.getElementById('id‘)
//等同
document.getElementById('id’)
通过标签获取元素document.getElementsByTagName()
window.document.getElementsByTagName('gh')
//等同
document.getElementsByTagName('gh')
通过标签获取元素element.getElementsByTagName()
const ul = document.getElementById('ul1')
const arr1 =ul.getElementsByName('li')
console.log(arr1)
H5新增ff
- 通过class获取元素document.getElementsByClassName('class')
- document.getElementsByTagName()
- element.getElementsByTagName()
- 通过css选择器获取元素document.querySelector（‘df’）
- 通过css选择器获取元素querySelectorAll（‘fg’）
- document.getElementById('ul1')
- element.getElementsByName('li')
特殊方法
* document.documentElement获取文档中的<html>元素
* document.body获取文档中的<body>元素
* document.title获取文档中的<head>元素
* document.head获取文档中的<title>元素
* document.links:获取文档中的<a>元素
* document.images获取文档中的<img>元素
* document.forms获取文档中的表单元素
操作文档内容
元素对象的关系，DOM定义了两套APl
- Node APl (节点AP了）：把DOM树中的对象看成节点（node）树
- Element APl (节点AP了）:把DOM树中的对象看成元素树
Node APl
定义
- Node APl 把DOM树中的全部对象看成节点（node）并为这些节点对象定义了大量的属性和方法
用途：
- 查找节点的基本信息：节点名称，节点类型，节点的值
- 查找节点之间的关系：父子，兄弟
- Node APl主要用来创建节点，删除节点，修改节点，查找节点
Node APl 和document APl的区别
- document APl的查找元素的方式是：直接查找
- Node APl查找元素的方式是：间接查找，也就是按照元素之间的关系查找
Node APl如何查找节点的基本信息
- 利用三大基本属性
- Node.nodeIype：返回节点类型，使用数字表示
- Node.nodeName：返回节点的名称
- Node.nodeValue：返回文本节点，属性节点和注释节点的值。
- 文档节点，元素节点返回null
Node APl操作节点的方法有几种
- Node.appendChild(子节点）
- Node.insertBefore（子节点，子节点位置）
- Node.remove()删除父节点
- Node.removeChild（子节点）：在父级节点上执行删除子节点
- Node.replaceChild(子节点）：在父级节点上执行替换子节点
- Node.Child Nodes（）：在父节点上执行查顺子节点
三大基本属性
Node.nodeIype
含义
返回节点内容
定义：
nodeIype表示节点的类型.Node APl 节点类型使用一个数字表示。Node APl把节点类型分为了9种
| 节点名称 | 数字表示 |
|---|---|
| 元素节点 | 1 |
| 文本节点 | 3 |
| 注释节点 | 8 |
| 文档节点 | 9 |
| 属性节点 | 2 |
Node.nodeName
Node.nodeValue
定义
返回节点的值
注意
节点定义
- 父节点：一个节点之上的直接节点
- 子节点：一个节点之下的直接节点
- 兄弟节点：具有相同父节点的节点
- 后代节点：一个节点之下的所有层级的节点
查找节点关系
- Node.parenNode：返回当前节点的父节点对象
- Node.childNodes：返回当前节点的子节点列表
- Node.nextSibling：返回当前节点的下一个兄弟节点
- Node.previousSibling：返回当前节点的上一个兄弟节点
- Node.firstChild：返回当前节点的第一个子节点
- Node.lastChild：返回当前节点的最后一个子节点
Node.appendChild
append :绑定，添加
定义
从父节点的末尾添加子节点
语法
父节点对象.appendChild(子节点对象)
父节点对象:就是你获取元素
子节点对象：1.已有节点2.新建节点
Node.insertBefore
定义
从父节点的开头添加子节点
语法
Node.removeChild
定义
从父节点身上删除子节点
语法
父节点对象.removeChild(子节点对象)
返回删除字节点的
document.createElement
定义
在内存中创建一个新元素
语法
document.createElement('元素名')
对照表
| Element APl | Node APl | |
|---|---|---|
| 获取元素列表 | children | Node.childNodes |
| 获取第⼀个⼦对象 | firstElementChild | Node.firstChild |
| 获取最后⼀个⼦对象 | lastElementChild | Node.lastChild |
| 获取下⼀个兄弟对象 | nextElementSibling | Node.nextSibling |
| 获取上⼀个兄弟对象 | previousElementSibling | Node.previousSibling |
| 获取⽗对象 | parentElement | Node.parentNode |
Node API操作节点的⽅法表
| ⽗.appendChild(⼦) | ||
| ⽗.insertBefore(新,旧) |
Node.remove
定义
- 将元素从DOM中删除
语法
Node.remove()//无参数
返回值
- 无返回值
Node.replaceChild()
定义
从父元素上替换子元素
语法
父节点对象.replaceChild(替换元素，被替换元素)
返回值
返回被替换的元素
Document.createTextNode
定义
createTextNode用于创建文本节点
语法
Document.createTextNode('这是新文本‘）
返回值
示例
Node.hasChildNodes
定义
Node.hasChildNodes用于查顺一个节点是否有子节点
语法
父节点.hasChildNodes//无参数
返回值
如果有返回yrue
如果没有返回false
