日考题
1.js包含哪几部分
ES
BOM
DOM
2.什么是BOM
BOM即浏览器对象模型，BOM是操作浏览器的接口(API)
3.BOM有几大对象？
- 窗口：(Window)
- 历史记录：( Histroy)
- 地址栏：(Location)
- 版本信息：(Navigator)
- 屏幕：(Screen)
4.DOM是什么
DOM即文档对象模型，DOM是操作文档的接口(API)
5.DOM有几大对象
- 文档对象：(document)
- 元素对象：(elment)
- 文本对象：(text)
- 属性对象(：Attribute)
- 节点对象：(node)
JS包含哪几部分
- ES： 一门语言，学习ES学习的是语法。(ECMA：欧洲计算机协会 ECMAScript)
- BOM：浏览器对象模型 用途：提供给ES一个接口来操作浏览器
- DOM： 文 档对象模型 用途：提供给ES一个接口来操作文档
BOM是什么
- BOM: Browser object Model 浏览器对象模型
- BOM：把浏览器的一切定义成了一个对象模型
- Window：整个浏览器被定义成了window对象
- document：把文档定义成一个对象
- Histroy：把历史记录定义成一个对象
- Screen：把显示浏览器窗口的屏幕定义成一个对象
- Location：把地址栏定义成一个对象
- Navigator：把浏览器的介绍信息定义成一个对象
- Window：整个浏览器被定义成了window对象
- BOM用途：允许ES操作浏览器的一切
- BOM目前没有标准。
DOM是什么
- DOM：Dcoumnet object Model 文档对象模型
- 用途：DOM就是为了操作文档用的。
- DOM把文档的一切内容都定义成了对象
- 文档是对象
- 元素是对象
- 文本是对象
- 属性是对象
- 样式是对象 - DOM是W3C制定的一套标准。
示意图
1.png
DOM树
示意图
2.png
- document对象
- element对象
- attribute对象
- text对象
- node对象
Document对象
定义
- 表示：Document对象表示网页文档
- 地位：Document对象是DOM的核心对象
- 用途：Document对象是访问文档的入口
用途
Document对象主要用途，具体内容如下：
- 查：获取元素
- 增：创建元素
- 删：删除元素
- 改：替换元素
获取元素的方法
传统方法
- 通过id获取元素: getElementById()
wiondow.document.getElementById('id')
//等同于
document.getElementById('id')
- 通过标签名获取元素: getElementsTagName('标签')
wiondow.document.getElementsTagName('标签')
//等同于
document.getElementsTagName('标签')
const ul1 = document.getElementById('ul1')
const arr1 = ul1.getElementsByTagName('li') //通过element获取
console.log(arr1)
H5新增方法
- 通过class获取元素： document.getElementsByClassName('class')
element.ElementsByClassName('class') - 通过css选择器获取元素：document.querySelector('Selector')
- 通过css选择器获取元素： document.querySelectorAll('SelectorAll')
特殊方法
- document.documentElement：获取文档中的
<html>元素 - document.body：获取文档在中的
<body>元素 - document.head：获取文档在中的
<head>元素 - document.title：获取文档在中的
<title>元素 - document.links：获取文档中的
<a>元素 - document.images：获取文档中的
<img>元素 - document.forms: 获取文档中的
<forms>元素 //表单
操作文档内容
在获取玩元素之后，接下来我们要学习元素对象之间的关系。DOM定义了两套API：
- Node API(节点API)：把DOM树中的对象看成节点(node)
- Element API(元素API)：把DOM树中的对象看成元素树。
Node API
定义
Node API把文档中的一切对象看成是节点(node)。Node对象是
用途
- 查找节点的基本信息：节点名称、节点类型、节点的值
- 查找节点之间的关系：父子、兄弟
- 操作节点：增、删、改、查
三大基本属性
Node.nodeType
定义：nodeType表示节点类型。节点类型使用一个数字表示。Node API把节点类型分为了9种：
| 节点名称 | 数字表示 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
| 注释节点 | 8 |
| 文档节点 | 9 |
Node.nodeName：节点名称
Node.nodeValue：节点值
NodeType：节点对应数字
节点关系
父节点：一个节点之上的直接节点
子节点：一个节点之下的直接节点
兄弟节点：具有相同父节点的节点
后代节点：一个节点之下的所有层级的节点
查找节点关系
- Node.parentNode：返回当前节点的父节点对象
- Node.childNodes：返回当前节点的子节点列表
- Node.nextSibling：返回当前节点的下一个兄弟节点
- Node.previousSibling：返回当前节点的上一个兄弟节点
- Node.firstChild：返回当前节点的第一个子节点
- Node.lastChild：返回当前节点的最后一个子节点
