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