20230210092438.png
js 包含哪几部分？
- Es：是一门语言，学习Es学习语法。（ECMA 欧洲计算机协会（ECMAScript）
- DOM：浏览器对象模型；
- 用途：提供给Es一个接口来操作浏览器。
-1. BOM：文档对象模型； - 用途；提供ES一个操作浏览器的接口（Api）来操作文档。
- 2.DOM：查询：位置、尺寸。HTML元素添加注册事件。
- 3.DOM定义两套API:ElementAPI（元素Apl）、NOdeAPL（节点APL）
BOM是什么？
- 1.BOM：Browser Object Model：浏览器对象模型。
- 2.BOM把浏览器的一切定义成了一个对象模型。
- 3.有五大对象
- window：整个浏览器被定义成立一个window对象。
- document：把文档定义成立一个对象。
- History：把历史记录定义成了一个对象。
- Screen：把显示浏览器窗口的屏幕定义成了一个对象。
- Location： 把地址栏定义成了一个对象
- Navigator：把浏览器的介绍信息定义成了一个对象。
- 4.BOM用途：允许ES操作浏览器的一切。
- 5.BOM目前没有标准。
DOM是什么？
- DOM：Dcoument Object Model 文档对象模型
- 1.用途：DOM就是为了操作文档用到。
- 2.在DOM眼里，整个文档内容都是对象。
-3. DOM把文档的一切内容都定义了对象。 - 文档对象
- 元素对象
- 文本对象
- 属性对象
- 节点对象
- 4.DOM 是W3C制定的一套有标准的。
DOM树
微信图片_20230210182642.png
- document对象
- element对象
- attribute对象
- text对象
- node对象
-注释 - DOM把整个文档定义成了一个树状模型；
Dcoument
- 定义：
- 表示： Dcoument对象表示网页文档
- 2.地位：Dcoument对象是DOM的核心对象
- 3.用途： Dcoument对象是进入文档的入口。
- 4.Dcoument:主要用途：主要用于查找元素.
主要用途：3种
- 增：创建元素
- 改：修改文档
- 查：查找元素
Dcoument获取元素的方法：(3大类型)
1.传统方法：
1.通过id获取元素：getElementById()
- 示例：
//语法：
window.dcoument.getElenentById（'id'）
//等同于
dcoument.getElenentById（'id'）
2.通过标签名获取元素：
- document.getElementsByTagName('标签')
定义：文档(dcoument)和元素(elment) - 语法：
getElenentByTagName（'标签'）
- 示例
const ul1 = document.getElementsById('ul1')
const arr2 =ul1.getElementsByTagName('ul2')//通过elment获取
// const arr3= document.getElementsByTagName('li')
console.log(arr)
H5新增方法
- 1.通过class获取元素：
document.getElementsByClassName('class')
document.getElementsByClassName('class')
2.选择器
- 1.通过css选择器获取元素:
document.querySelector('selector')
- 2.通过css选择器获取元素:
document.querySelectorAll('selector')//匹配第一个
element.querySelectorAll('selector')//选择所有的
特殊方法（选择元素的快捷键）
- 1.document.documentElement:获取文档的<html>重点
- 2.document.body 获取文档的<主体>标题元素
重点2 - 3.document.head:获取文档的<头部>元素
- 4.document.title获取文档的<title>标题元素
- 5.document.links:获取文档的<a>标签
- document.images:获取文档的<img>图片元素
- 示例：
console.log(document.images)//hello world
console.log(document.title)//hello world
console.log(document.body)//重点2！！<body>
console.log(document.head)//<head>
console.log(document.html)//undefined
console.log(document.documentElement)// 下、重点1！！<html lang="en"
NodeApl
- 定义：Node Apl把DOM树中的全部对象看成是节点，并为这些节点对象定义了大量的属性和方法。
用途： - 1.查找结点的基本信息：
节点名称、节点类型、节点值； - 2.查找节点之间的关系：父子、兄弟
- 3.主要用操作节点：增、删、改、查
- 增：创建节点
- 删：删除节点
- 改：修改节点
- 查：查找节点
5.请谈一谈Node Apl查找元素和document Api查找元素区别 - NOde Apl查找元素的方式：间接查找，也就是按照元素之间的关系查找。
- document API 查找元素的方式是：直接查找。
Node API的三⼤基本属性
1.Node.nodeType
- 定义：nodeType表示节点类型。
- 返回：当前节点的类型。
1.nodeType把节点类型分成了9种： - 元素节点：1
- 属性节点：2
- 文本节点：3
- 注释节点：8
- 文档节点：9：
-2.在DOM眼里，全部文档内容都是对象。 - 3.DOM把整个文档定义成了一个树状模型；
- 4.DOM：定义了大量的API(属性和方法)来操作这些对象。
- 5.DOM是doucement的核心对象。
- 示例
window.onload = function () {
//元素、文本、注释
const arr = document.body.childNodes//反出字节点 在当前之前的就是子节点
console.log(arr)
console.log(arr[0].nodeType);//3
console.log(arr[1].nodeType);//1
console.log(arr[3].nodeType);//8
//文档9
console.log(document.nodeType);//9
//属性2
const h2 = document.querySelector('h2')
console.log(h2.getAttributeNode('id').nodeType);//2
}
- 2.Node.nodeName
- 定义：返回节点的名称
- 示例：
<script>
window.onload = function(){
const nodeLists = document.body.childNodes
console.log(nodeLists);
console.log(nodeLists[0].nodeName);//#text
console.log(nodeLists[1].nodeName);//H2
console.log(nodeLists[3].nodeName);//#comment
console.log(document.nodeName);//#document
}
</script>
</head>
<body>前⾯
<h2>⼆级标题</h2>后⾯
<!-- 注释 -->
</body>
3.Node.nodeValue
- 定义：返回节点的值
- 返回：节点的值
- 注意
返回1.:只有文本节点、属性节点、注释节点的值
返回2.:元素节点和⽂档节点的是 NULL.
- 示例：
<h2 id="">hello wolrd</h2>
<body>
<script>
const h2 = document.querySelector('h2')
console.log(h2.nodeName)
console.log(h2.nodeType)
console.log(h2.FnodeValue)//返回文本节点、属性节点、注释节点的值
console.log(h2.firstChild.nodeValue)//拿到第一个子节点 hello wolrd
//如何获取属性节点:Node.getAttribute
const v = h2.getAttribute('id')
console.log(v)
console.log(v.nodeValue)
</script>
</body>
注意：只有文本节点和注释节点有值；
元素节点和文档节点为空。
节点定义：
- 父节点:一节点之上的直接节点就它的父节点
- 子节点：一个节点之下的就它的子节点
- 兄弟节点:具有相同父节点下的节点
- 后代节点:一个节点之下的所有层级的节点
1.Node.childNodes:属性可返回指定节点的子节点的节点列表.
- 语法：
**元素.getAttributeNode("属性名")**:方法从当前元素中通过名称获取属性节点
2.Node.childNodes：返回当前节点的子节点
3.Node.nextSibling：返回当前节点的下一个兄弟节点
4.Node.previousSibling：返回当前节点的上一个子节点
5.Node.firstChild：返回当前节点的第一个子节点
6.Node.lastChild：返回当前节点的最后一个子节点。
Array.from(伪数组)
- 将伪数组转成真正的数组
Array.from(document.images)//把伪数组转成真正的数组
操作节点的方法
- 对文档种的节点：增、删、改、查。
增
NOde API操作节点的五大方法：
1.Node.appendChild（element）：Add anHtml element
- append:绑定、添加
- 定义：从父节点的*末尾添加子节点。
- 语法：
父节点对象.appendChild（**子节点对象**）
父节点对象：就是你获取的元素
子节点对象：1.已有节点、2.新建节点
返回值：
示例：
//向ul添加子元素li//appendChild
const li = document.createElement('li')
li.innerHTML = 'hello world'
const ul = document.querySelector('ul')
ul.appendChild(li)
2.Node.insertBefore（new，old）（元素、位置）：为父节点插入子节点
- 定义：从父节点的开始添加子节点**。
- 语法：
父节点对象.insertBefore（新的、旧的）
- 示例：
//inser
const li2 = document.createElement('li')
li2.innerHTML = '耳聋'
ul.insertBefore(li2.ul.firstElementChild)
3.Node.removeChild()
- 定义：从⽗节点身上删除⼦节点。
- 语法：
document.removeChild(**子节点**)
- 定义：创建一个新元素（在挂在DOm之前放在内存里）
- 语法：
⽗节点对象.removeChild(⼦节点对象)
- 返回值
删除的⼦节点对象或null
4.Node .replaceChild(子节点）：在父节点上执行替换子节点。
-
5.Node.hasChildNodes():在父节点上执行查询子节点。
|--属性对照表--|
Element API（元素节点） Node API（节点Apl）
|:-:|:-:|:-:|
获取⼦对象列表
children 、Node.childNodes
获取第⼀个⼦对象 firstElementChild Node.firstChild
获取最后⼀个⼦对象 lastElementChild Node.lastChild
获取下⼀个兄弟对象 nextElementSibling Node.nextSibling
获取上⼀个兄弟对象 previousElementSibling Node.previousSibling
获取⽗对象
parentElement Node.parentNode
)
示例
属性对照表
Node API操作节点的⽅法表
- ⽗.appendChild(⼦)
- ⽗.insertBefore(新,旧)
