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