DOM BOM ES
日考：
1.js包含那几个部分：es bom dom
2.什么是BOM：BOM是浏览器的模型 BOM提供给ES一个操作浏览器的接口
3.BOM有几大对象
屏幕(screen)
窗口(window)
历史记录 (histroy)
地址栏
版本信息
4.什么是DOM：DOM是文档对象模型 ，DOM是文档一个接口操作文档
5.DOM有几大对象？
文档对象
元素对象
文本对象
属性对象
节点对象
js包含哪几部分
ES：一门语言，学习ES学习的是语法(ECMA：欧洲计算机协会ecmascript)
BOM:浏览器对象模型 用途：提供ES一个接口来操作浏览器
DOM:文档对象模型 用途：提供ES一个入口来操作文档
BOM
BOM： Browser Object Model 浏览器对象模型
-
BOM：吧浏览器的一切定义成了一个对象模型
window：把文档看出一个对象
Histroy：把历史记录定义成了一个对象
Screen：把显示浏览器窗口的屏幕定义成一个对象
Location:把地址定义成一个对象
Navigator：把浏览器的介绍信息定义成一个对象
BOM的用途：允许ES操作浏览器的一切
BOM目前没有标准
DOM
DOM:Dcoument Object model 文档对象模型
用途：DOM就是为了操作文档用的
在DOM眼里，整个文档的内容都是对象
-
DOM文档的一切内容都定义成了对象。
文档是对象
元素是对象
文本是对象
属性是对象
样式是对象
DOM是W3c制定的一套标准
[图片上传失败...(image-d1fb7a-1676033812914)]
Document对象
定义
表示：document对象表示网页文档
地位：document对象是DOM的核心对象
用途：document对象是访问文档的入口
用途
document对象主要用途：
查：获取元素
增：创建元素
删：删除元素
改：替换元素
获取元素的方法
传统方法
-
通过id获取元素
getElementByle()
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1211" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js">window.document.getElementByle('id')
//等同于
document.getElementByid('id')</pre>
-
通过标签名获取元素
getElementsByTagName('标签')
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1216" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js">window.document.getElementsByTagName('标签')</pre>
H5新增方法
特殊方法
document.docymentElement:获取文档中的<html>元素
document.body:获取文档中的
body元素document.head:获取文档中<head>元素
document.title:获取文档中的<title>元素
document.links：获取文档中的<a>元素
document.images：获取文档中的<img>元素
操作文档内容
在获取元素之后，我们要学习元素对象之间的关系。DOM定义了两套API：
Node API(节点)：把DOM树中的对象看成节点
Element API(元素API)：把DOM树中的对象看出元素树
Node API
定义
Node API把文档中的一切对象看出是节点(node)
用途
查找节点的基本信息：名称，类型，值
节点之间的关系：父子，兄弟
操作节点：增，删，改，查
Node.nodeType
定义了节点的类型。节点类型使用一个数字表示。Node API把节点类型分为9种
| 节点名字 | 数字表示 |
|---|---|
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
| 注释节点 | 8 |
| 文档节点 | 9 |
1:元素节点
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1274" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js">console.log(document.documentElement.nodeType) //1</pre>
2:属性节点元素.getAttributeNode("属性名"):方法从当前元素中通过名称获取属性节点
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1276" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js"> console.log(document.body.getAttributeNode("id").nodeType)//2</pre>
3：文本节点：childNodes，属性可返回指定节点的子节点的节点列表
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1278" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js"><body id="home">
<h2>二级标题</h2>
<script>
//获取文本节点的方法
const arr = document.body.childNodes
console.log(arr[0].nodeType)//3
</script></pre>
8：注释节点：childNodes，属性可返回指定节点的子节点的节点列表
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1280" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js"><body id="home">
<h2>二级标题</h2>
<script>
//获取注释节点的方法
const arr = document.body.childNodes
console.log(arr[3].nodeType)//8
</script></pre>
9：文档节点:
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1282" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js"> console.log(document.nodeType)//=9</pre>
节点定义
父节点：一个节点之上的直接节点
子节点：一个节点之下的直接节点
兄弟节点：具有相同父节点的节点
后代节点：一个节点之下所有成绩的节点
查找节点关系
Node.childNodes:属性可返回指定节点的子节点的节点列表
元素.getAttributeNode("属性名"):方法从当前元素中通过名称获取属性节点
Node.arentNode:返回当前节点的父节点对象
Node.childNodes：返回当前节点的子节点列表
Node.nextSibling：返回当前节点的下一个兄弟节点
Node.previousSibling：返回当前节点的上一个兄弟节点
Node.firstChid：返回当前节点的第一个节点
Node.lastChild：返回当前节点的最后一个节点
Array.from(伪数组)
- 将伪数组转成真数组
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1311" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js">Array.form(document.images//把伪数组转成真正的数组)</pre>
