预习六DOM和BOM

最新推荐文章于 2024-03-12 10:57:55 发布
最新推荐文章于 2024-03-12 10:57:55 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： 前端知识 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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
在这里插入图片描述

浅谈DOM和BOM
跟着信仰走
07-26 554
1.1，文档对象模型 文档对象模型（DOM，Document Object Model）是针对XML但是经过扩展用于HTML的应用程序编程接口（API）.DOM把整个页面映射为一个多层节点结构.HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据，开发人员获得了控制页面内容和结构的主动权，借助DOM提供的API，开发人员可以轻松自如地删除，添加，替换或修改任何节...
蓝旭24春季培训-第五周预习-DOM、BOM、常用API介绍
最新发布
2303_80228948的博客
04-19 923
介绍了DOM、BOM、API的内容
BOM和DOM的区别
weixin_30596165的博客
10-25 174
　　 BOM跟DOM的区别和关联 BOM 1. BOM是Browser Object Model的缩写，即浏览器对象模型。 2. BOM没有相关标准。 3.BOM的最根本对象是window。 从1可以看出来：BOM和浏览器关系密切。浏览器的很多东西可以通过JavaScript控制的，例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等…这些涉及到的对象...
DOM和BOM的区别
BeefAndPotatoes的专栏
07-25 2523
最近刚学完javascript，通过查阅资料与上课的内容结合将DOM和BOM作了一些比较如下： 首先，BOM的全称为Browser Object Mode，中文名是浏览器对象模型。它的一些功能和特性如下： 1. BOM提供了独立于内容而与浏览器窗口进行交互的对象 2. 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window 3. BOM由一系列相关的对象构成，并且
DOM与BOM详解
dd的博客
03-12 3416
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
DOM和BOM
m0_63170206的博客
05-26 391
1.DOM 1.1DOM概述 1.dom是处理可扩展标记语言的标准编程接口，可以改变网页的样式，内容和结构 2.文档：一个页面就是一个文档（document） 3.元素：页面中的所有标签都是元素（element） 4.节点：网页中的所有内容都是节点（标签，属性，文本，注释等）（node） 4.对象：文档，元素，节点都是对象 获取元素 1.id获取 getElementByid() 1.2获取元素 获取元素 <script> // 1.id获取---id是大小写敏感的字符串 // cons
day03_JavaScript预习笔记1
08-04
JavaScript是Web开发中不可或缺的一部分，它主要由三个组成部分构成：ECMAScript（核心语法）、DOM（文档对象模型）和BOM（浏览器对象模型）。在深入学习JavaScript之前，我们需要理解这些基本概念。 首先，...
JS+JQuery第一章预习总结.txt
04-20
- JavaScript遵循ECMAScript标准，并基于BOM（Browser Object Model）模型以及DOM（Document Object Model）模型进行设计。 2. **变量声明与赋值**： - 在JavaScript中，使用`var`关键字声明变量，并为变量赋值。...
JavaScript 前期准备教程：深入理解基础概念
JavaScript通过DOM可以动态地读取、修改、添加或删除文档中的节点和元素，实现网页的动态交互。理解DOM结构、DOM事件处理、以及DOM节点的增删改查等操作是实现前端交互的基础。 ### 6. 事件处理 事件是Web编程中一...
javascript资料（源码，教材，ppt)
04-27
教材通常会按照从易到难的顺序讲解，从基本语法、变量、数据类型、控制流到函数、对象、闭包，再到DOM操作和BOM（浏览器对象模型）等。此外，107个常用JavaScript语句可能是教材中的一个章节，这些语句涵盖了常见的...
什么是DOM和BOM？
热门推荐
似水流年QC的博客
06-01 2万+
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
DOM&BOM
aiua81263的博客
10-20 230
javascript组成： 1.ECMAScript基本语法。 2.BOM（浏览器对象模型） 3.DOM（文档对象模型） 关于dom&bom的概念的起源 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准...
BOM和DOM详解
weixin_42597880的博客
09-23 2868
一、DOM和BOM的联系和区别 DOM（文档对象模型） HTML 和 XML 的应用程序接口（API）。DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过js去读取这张地图。 BOM 主要处理浏览器窗口和框架， window对象对应着浏览器窗口本身，这个对象的属性和方法通常被称为BOM弹出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口大小...
前端05.js入门之BOM对象与DOM对象。
weixin_34406796的博客
05-30 139
一、关于BOM对象。BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。用于操控用户浏览器。1.window对象：所有浏览器都支持 window 对象。 概念上讲.一个html文档对应一个window对象. 功能上讲: 控制浏览器窗口的. 使用上讲: windo...
BOM和DOM
qq_43093129的博客
04-24 560
1. BOM和DOM的区别与联系 BOM： Browser Object Model （浏览器对象模型），通过BOM的对象和方法可以完成对浏览器窗口的操作，如：关闭浏览器，前进，后退，修改地址栏上的地址等。BOM的顶级内置对象是window DOM： Document Object Model（文档对象模型），通过DOM的对象和方法可以完成对网页中元素的增删改，让网页产生动态效果。DOM的顶级内置对象是document BOM是包括DOM的，即window包括document 2. innerHTML属
浏览器中的BOM和DOM
titan
03-16 193
BOM 浏览器对象模型         提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等） 文档结构图 BOM由以一系列相关的对象组成。下图展示了基本的BOM体系结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值