预习六DOM和BOM_bom与dom预习-CSDN博客

本文链接：https://blog.csdn.net/weixin_65548623/article/details/124997723

文章目录

一、DOM(Document Object Model)

文档对象模型，是W3C组织推荐的处理**可扩展标记语言（HTML或XML）**的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页内容，结构和样式

（一）DOM树

在这里插入图片描述

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示
DOM把以上内容都看做是对象

（二）获取页面中的元素

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

1.根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

1.因为文档页面从上到下加载，所以先有标签，script写在标签下面
2.get获取 element元素 by通过 驼峰命名法
3.参数 id是大小敏感的字符串
4.返回的是一个元素对象

console.dir();打印我们返回的元素对象，更好的查看里面的属性和方法

在这里插入图片描述

2.根据标签名获取

（1）getElementByTagName()

使用getElementByTagName()方法可以返回带有指定标签名的对象集合

document.getElementsByTagName('标签名');

返回的是获取过来元素对象的集合，以伪数组的形式存储
我们想要一次打印里面的元素对象可以采用遍历的方式
得到元素对象是动态的
如果页面中只有一个li，返回的还是伪数组形式
如果页面中没有li，返回的是空的伪数组形式

（2）element.getElementsByTagName()

使用element.getElementsByTagName()获取某个元素（父元素必须是单个对象，获取时不包括父元素自己）内部所有指定标签的子元素

element.getElementsByTagName('标签名');

在这里插入图片描述

3.通过HTML5新增的方法获取

（1）document.getElementsByClassName(‘类名’)

document.getElementsByClassName('类名');根据类名获取某些元素集合，返回元素对象集合

在这里插入图片描述

（2）document.querySelector(‘选择器’)；

document.querySelector('选择器');根据指定选择器返回第一个元素对象

（3）document.querySelectorAll(‘选择器’);

document.querySelectorAll('选择器');根据指定选择器返回所有元素对象集合

在这里插入图片描述

3.获取特殊元素（body,html）

（1）获取body元素

document.body返回body元素对象

在这里插入图片描述

（2）获取html元素

document.documentElement返回html元素

在这里插入图片描述

（三）事件

JS使我们有能力创建动态页面，而事件可以被JS侦测到的行为

1.事件三要素

事件源
事件类型
事件处理程序

2.执行事件的步骤

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值方式）

（四）改变元素内容

1.element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时去掉空格和换行

在这里插入图片描述

2.element.innerHTML

从起始位置到终止位置的全部内容，包括html标签，保留空格和换行

在这里插入图片描述

3.innerText和innerHTML的区别

在这里插入图片描述

（五）改变元素属性

1.元素属性操作

在这里插入图片描述

2.表单元素属性操作

在这里插入图片描述

3.样式属性操作

（1）element.style行内样式操作

样式采取驼峰命名法（backgroundColor）
JS修改style样式操作，产生的是行内样式，CSS权重比较高

在这里插入图片描述

（2）element.className类名样式操作

若样式修改较多，采取操作类名方式更改元素样式
class是个保留字，因此用className来操作元素类名属性
className会直接更改元素的类名会覆盖原先的类名

（六）排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法

所有元素全部清除样式
给当前元素设计样式

（七）自定义属性操作

1.获取属性值

（1）element.属性

获取内置属性值（元素本身自带属性）

（2）element.getAttribute(‘属性’);

主要获得自定义的属性（标准），程序员自定义的属性

在这里插入图片描述

2.设置属性值

（1）element.属性=‘值’

设置内置属性

（2）element.setAttribute(‘属性’,‘值’);

主要针对于自定义属性（标准）

3.移除属性

element.removeAttribute('属性');

在这里插入图片描述

（八）H5自定义属性

自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
H5规定自定义属性data-开头作为属性名并赋值（<div data-index="1"></div>）或用JS设置（element.setAttribute('data-index',2)）
获取H5自定义属性
（1）兼容性获取

 element.getAttribute('data-index');

（2）H5新增

 element.dataset.index 或 element.dataset['index']

（九）节点

1.获取元素

利用DOM提供的方法获取元素（逻辑性不强，繁琐）
利用节点层级关系获取元素（利用父子兄节点关系获取元素，逻辑性强，但兼容性稍差）

2.节点概述

节点至少有nodeType(节点类型），nodeName(节点名称），nodeValue(节点值）
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3（换行，空格，文字等）

3.节点层级

父节点node.parentNode
子节点
兄弟节点

4.添加新元素

（1）创建节点

document.createElement('tagName');

（2）添加节点

node.appendChild(child)
node.insertBefore(chid,指定元素)

在这里插入图片描述

5.删除节点

node.removeChild(child)

在这里插入图片描述

6.复制节点

node.cloneNode()

在这里插入图片描述

二、BOM（Browser Object Model）

浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
BOM由一系列相关对象构成，并且对象都提供了很多方法属性
BOM缺乏标准，JS语法标准化组织ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

1.window对象

window对象是浏览器的顶级对象，具有双重角色
它是JS访问浏览器窗口的一个接口
它是全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法

2.窗口加载事件（window.onload）

window.load 等页面内容全部加载完毕包含页面dom元素，图片，flash，css等，只能写一次，若有多个，以最后一个为准
document.addEventListener('DOMContentLoaded', function () { })是DOM加载完毕，不包含图片，flash,css等就可以执行加载速度快

在这里插入图片描述

3.调整窗口大小事件（window.onresize）

window.οnresize=function(){}
window.addEventListener('resize',function(){});

在这里插入图片描述

4.定时器（setTimeout() 和setInterval()）

（1）setTimeout()

window.setTimeout(调用函数,延迟毫秒数）;

window在调用时可以省略
延时时间单位是毫秒，可以省略，默认为0
这个调用函数可以直接写函数，还可以写函数名，还可以写’函数名()’
给定时器添加标识符
调用一次

（2）停止setTimeout()定时器

window.clearTimeout(timeoutID);

在这里插入图片描述

（3）setInterval()

 window.setInterval(调用函数，延时时间)；

反复调用

在这里插入图片描述

（4）停止setInterval()定时器

window.clearInterval();

在这里插入图片描述

5.this

this指向问题，一般情况下this最终指向的是那个调用它的对象
全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

6.JS执行队列

JS是单线程，同一时间只能做一件事
利用多核CPU计算能力，HTML5提出Web Worker标准，允许JS脚本创建多个线程，于是JS中出现了同步和异步
同步任务：在主线程上执行，形成一个执行栈
异步任务：JS的异步是通过回调函数实现的，回调函数添加到任务队列中
事件循环：主线任务不断重复获得任务，执行任务再获得任务

7.location对象

location属性用于获取或设置窗口的URL（统一资源定位符），并可以用于解析URL，因为这个属性返回的是一个对象，所以也称为location对象

URL的语法格式：protocol://host[:port]/path/[?query]#fragment

在这里插入图片描述

8.navigator对象

包含有关浏览器的信息，他有很多属性，最常用的是userAgent,该属性可以返回有客户机发送到服务器的user-agent头部的值

9.history对象

与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的URL