前端学习第69天DOM和BOM
一.DOM
1,DOM概述
1.1 什么是DOM
* 文档对象模型 Document Object Model
* 文档对象模型 是表示和操作 HTML和XML文档内容的基础API
* 文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口
1.2 DOM分类
* 核心 DOM - 针对任何结构化文档的标准模型
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型
1.3 DOM树
2,节点
2.1 什么是节点
文档中的每一个部分都是节点,包括document 元素 属性 文本...
2.2 节点的分类
* doctype 文档类型
* cocument 文档
* Element 元素
* Attr 属性
* Text 文本
* Comment 注释
2.3 节点属性
* nodeName 节点名字
* nodeValue 节点值
* nodeType 节点类型
3,获取元素的对象
- getElement系列
- querySelector系列
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>节点</title> <style></style> </head> <!----> <body> <div class="sup" abc="123"> <div class="sub">sub</div> <div class="sub">sub</div> <div class="sub">sub</div> </div> <div class="sup"> <div class="sub">sub</div> <div class="sub">sub</div> <div class="sub">sub</div> </div> </body> <script> // DOM: 文档对象模型 => 提高给用户操作document obj的标准接口 // DOM树: 以document为根, 树状展开所有子节点 var body = document.querySelector('body'); console.log([body, document]); // 节点分类: 6个 // document | doctype | element | text | attr | comment // 节点名(纯大写) console.log(body.nodeName) // 节点类型(标识节点的分类) console.log(body.nodeType); // 属性操作 var sup1 = document.querySelector('.sup'); console.log(sup1.getAttribute('abc')); // 操作属性节点 var info_node = document.createAttribute("info"); console.log(info_node.nodeName); console.log(info_node.nodeType); info_node.value = '123'; console.log(info_node.nodeValue); sup1.setAttributeNode(info_node); </script> </html>
4文档结构和遍历文档
4.1 节点关系
* 父节点 父元素
* 子节点 子元素
* 同辈节点 同辈元素
* 祖先节点 祖先元素
* 后代节点 后代元素
### 4.2 作为节点树的文档
* parentNode 父节点
* childNodes 所有子节点的集合
* firstChild 第一个子节点
* lastChild 最后一个子节点
* nextSibling 下一个兄弟节点
* previousSibling 上一个兄弟节点
### 4.3 作为元素树的文档
* parentElement 父元素（大部分情况下 parentElement 等同于 parentNode）
* children 所有子元素的集合
* firstElementChild第一个子元素
* lastElementChild 最后一个子元素
* nextElementSibling 下一个兄弟元素
* previousElementSibling 上一个兄弟元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文档节点</title> <style> .show { width: 500px; height: 500px; border: 3px solid black; margin: 0 auto; } .sup { width: 100px; height: 100px; border-radius: 50%; background-color: orange; float: left; } .sub { width: 20px; height: 20px; border-radius: 50%; background-color: deeppink; position: relative; top: 40px; left: 40px; } .ele { width: 100px; height: 100px; border-radius: 20% / 50%; background-color: yellow; float: left; } </style> </head> <body> <div class="show"> <!--如何动态创建.sup>.sub结构--> <!--<div class="sup">--> <!--<div class="sub"></div>--> <!--</div>--> </div> </body> <script> // 产生随机数 function randomNum(m, n) { return parseInt(Math.random() * (n - m + 1)) + m; } // 随机颜色 function randomColor() { var color = ""; var r = randomNum(0, 255); var g = randomNum(0, 255); var b = randomNum(0, 255); color = "rgb(" + r + ", " + g + ", " + b + ")"; return color; } var show = document.querySelector('.show'); // 1. 创建div(元素节点) // 2. 设置div属性(单一css | css类名 | 文本 | 子标签 | 事件 | ...) // 3. 添加到(文档结构中)指定位置 /* // 注: 所有创建节点的操作只能由document来完成 var sup = document.createElement('div'); // 创建div一定要写div, 因为是节点名(元素节点名就是标签名) sup.className = 'sup'; show.appendChild(sup); sup = document.createElement('div'); sup.className = 'sup'; sup.style.backgroundColor = randomColor(); show.insertBefore(sup, show.firstElementChild); sup = document.createElement('div'); sup.className = 'sup'; sup.style.backgroundColor = randomColor(); show.insertBefore(sup, show.firstElementChild); */ </script> <script> // var body = document.querySelector('body'); // // true深拷贝,拷贝自身与内容, false浅拷贝,只拷贝自身标签 // var cl_body = body.cloneNode(true); // console.log(cl_body); setInterval(function () { let sup = document.createElement('div'); sup.className = 'sup'; sup.style.backgroundColor = randomColor(); let sub = document.createElement('div'); sub.className = 'sub'; sub.style.backgroundColor = randomColor(); // sub属于sup, 添加到sup中 // box.appendChild(ele); 将ele添加到box中最后位置 sup.appendChild(sub); // 第一次添加到最后, 除此以外都添加到最前 if (show.children.length == 0) { // 将sup添加到show最后 show.appendChild(sup); } else { // 将sup添加到show第一个子级的前名(最前) show.insertBefore(sup, show.firstElementChild); } // 删除操作: 子级个数>25,将最后一个删除 if (show.children.length > 25) { // 通过父级删除最后一个子级 show.removeChild(show.lastElementChild); } // 将最中间的元素替换掉 25个满了, 替换第13个 if (show.children.length == 25) { let div = document.createElement('div'); div.className = 'ele'; // 用div替换掉show中的索引为12的子元素 let re_box = show.replaceChild(div, show.children[12]); // console.log(re_box.style.backgroundColor); show.replaceChild(re_box, show.children[13]); } }, 1000) </script> </html>
5,属性
5.1 HTML标签的属性和元素对象的属性
HTMLElement对象映射了元素的HTML属性
### 5.2 获取和设置非标准的HTML属性
* getAttribute(attrname) 获取自定义或内置属性的值
* setAttribute(attrnane, value) 设置自定义或内置属性
* hasAttribute(attrname) 判断是否存在该属性
* removeAttribute() 移出自定义或内置的属性
### 5.3 作为Attr节点的
* setAttributeNode()
* getAttributeNode()
* document.createAttribute() 创建属性节点
```js
var attr = document.createAttribute('class');
attr.value = 'active';
box.setAttributeNode(attr);
6 元素的内容 6.1 作为HTML的元素内容
* innerHTML * outerHTML 6.2 作为纯文本的元素内容 * innerText 会忽略多余空白
6.3 作为Text节点的元素内容 文本节点的方法 appendData() 向文本节点追加内容 deleteData() 删除文本节点的一部分内容 insertData() 向文本节点中插入内容 replaceData() 替换内容
创建文本节点 ``` document.createTextNode() ```
7 创建、插入、删除 元素节点
7.1 创建节点
```
document.createElement()
```
7.2 插入节点
```
appendChild() 在元素的最后追加一个子元素
insertBefore() 在元素指定的位置插入一个子元素
```
7.3 删除节点
```
removeChild()
```
7.4 替换节点
```
replaceChild(new_node, old_node)
```
7.5 克隆节点
```
cloneNode()
参数
true 克隆元素以及所有的厚点节点
false 仅仅克隆节点本身
```
8,事件target
```js
// ev.target通过父级的事件对象,获取具体相应区域位置的子级元素
// 应用场景
// 1. 父级的子元素类型不同一,采用循环绑定不方便
// 2. 父级子元素较多或不确定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件target</title> <style> ul { background: #333; list-style: none; padding: 0; margin: 0; } .active { color: orange; /*background: yellow;*/ } </style> </head> <body> <ul> <li>001</li> <li>002</li> <li>003</li> <li>004</li> </ul> <a href="./05_BOM操作.html">05_BOM操作.html</a> </body> <script> let lis = document.querySelectorAll('li'); let r_num = parseInt(Math.random() * 4); lis[r_num].className = 'active'; // 需求: 单击到ul上, 一定点击到了某个li, 如何确定点击的是否为active /* for (let i = 0; i < lis.length; i++) { lis[i].onclick = function () { if (this.className == 'active') { console.log("点击到了") } else { console.log("没有点击到了") } } } */ let ul = document.querySelector('ul'); ul.onclick = function (ev) { // ev.target通过父级的事件对象,获取具体相应区域位置的子级元素 console.log(ev.target); if (ev.target.className == 'active') { console.log("点击到了") } else { console.log("没有点击到了") } } // 应用场景 // 1. 父级的子元素类型不同一,采用循环绑定不方便 // 2. 父级子元素较多或不确定 </script> </html>
9,Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
9.1 属性
```
URL 获取当前页面的url 只读
domain 获取域名
referrer 获取上一个页面的地址 只读
title 标签标题
location 网站地址信息
lastModified 最后一次修改事件
cookie
```
9.2 方法
```
write()
writeln()
```
二,BOM(浏览器对象模型)
1. 浏览器对象模型介绍
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、
可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
**BOM的左右**
* 弹出新浏览器窗口的能力；
* 移动、关闭和更改浏览器窗口大小的能力；
* 可提供WEB浏览器详细信息的导航对象；
* 可提供浏览器载入页面详细信息的本地对象；
* 可提供用户屏幕分辨率详细信息的屏幕对象；
* 支持Cookies；
2,.1window
window对象是客户端JavaScript的全局对象
是所有客户端JavaScript特性和API的主要接入点
它表示Web浏览器的一个窗口或窗体,并且用标识符window来引用它
#### window 对象属性
| 属性 | 描述 |
| --------------- | ------------------------------------------------------------ |
| **document** | 对 Document 对象的只读引用。 |
| **history** | 对 History 对象的只读引用。 |
| **location** | 用于窗口或框架的 Location 对象。 |
| **navigator** | 对 Navigator 对象的只读引用。 |
| **screen** | 对 Screen 对象的只读引用。 |
| frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。 |
| length | 设置或返回窗口中的框架数量。 |
| parent | 返回父窗口。 |
| top | 返回最顶层的父窗口。 |
| name | 设置或返回窗口的名称。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| status | 设置窗口状态栏的文本。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| **innerHeight** | 返回窗口的文档显示区的高度。 |
| **innerWidth** | 返回窗口的文档显示区的宽度。 |
| **outerHeight** | 返回窗口的外部高度，包含工具条与滚动条。 |
| **outerWidth** | 返回窗口的外部宽度，包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| screenLeft | 返回相对于屏幕窗口的x坐标 |
| screenTop | 返回相对于屏幕窗口的y坐标 |
| screenX | 返回相对于屏幕窗口的x坐标 |
| screenY | 返回相对于屏幕窗口的y坐标 |
| **scrollX** | 返回窗口水平滑动的距离 |
| **scrollY** | 返回窗口垂直滑动的距离 |
#### window对象方法
| 方法 | 描述 |
| --------------- | -------------------------------------------------- |
| **alert()** | 显示带有一段消息和一个确认按钮的警告框。 |
| **confirm()** | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| **prompt()** | 显示可提示用户输入的对话框。 |
| focus() | 把键盘焦点给予一个窗口。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| **open()** | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| close() | 关闭浏览器窗口。 |
| print() | 打印当前窗口的内容。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| **setInterval()** | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| **setTimeout()** | 在指定的毫秒数后调用函数或计算表达式。 |
| **clearInterval()** | 取消由 setInterval() 设置的 timeout。 |
| **clearTimeout()** | 取消由 setTimeout() 方法设置的 timeout。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。(仅IE) |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。（仅IE） |
| resizeBy() | 按照指定的像素调整窗口的大小。(仅IE) |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。(仅IE) |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
2.2Localtion
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
#### Location 对象属性
| 属性 | 描述 |
| -------- | ----------------------------- |
| href | 返回完整的URL |
| protocol | 返回一个URL协议 |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| port | 返回一个URL服务器使用的端口号 |
| pathname | 返回的URL路径名。 |
| search | 返回一个URL的查询部分 |
| hash | 返回一个URL的锚部分 |
#### Location 对象方法
| 方法 | 说明 |
| --------- | ---------------------- |
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前文档 |
| replace() | 用新的文档替换当前文档 |
要求掌握:
```js
// location => url信息
console.log(location);
// 域名:端口号
console.log(location.host);
// 域名
console.log(location.hostname);
// 端口号
console.log(location.port);
// 查询信息
console.log(location.search);
```
2.3History
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问
### History 对象属性
| 属性 | 说明 |
| ------ | ---------------------- |
| length | 返回历史列表中的网址数 |
#### History 对象方法
| 方法 | 说明 |
| --------- | --------------------------------- |
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
2.4Navigator
#### Navigator 对象属性
| 属性 | 说明 |
| ------------- | ---------------------------------------- |
| appCodeName | 返回浏览器的代码名 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| **userAgent** | 返回浏览器用于 HTTP 请求的用户代理头的值 |
#### Navigator 对象方法
| 方法 | 描述 |
| -------------- | ----------------------------------------- |
| javaEnabled() | 指定是否在浏览器中启用Java |
| taintEnabled() | 规定浏览器是否启用数据污点(
2.5 Screen
Screen 对象包含有关客户端显示屏幕的信息。
#### Screen 对象属性
| 属性 | 说明 |
| ----------- | ---------------------------------------- |
| availHeight | 返回屏幕的高度（不包括Windows任务栏） |
| availWidth | 返回屏幕的宽度（不包括Windows任务栏） |
| colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
| height | 返回屏幕的总高度 |
| pixelDepth | 返回屏幕的颜色分辨率（每象素的位数） |
| width | 返回屏幕的总宽度 |
