JavaScript学习笔记05

JavaScript笔记05

操作 BOM 对象（重点）

什么是 BOM

  • BOM（Browser Object Model）是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型。
  • 浏览器对象模型（BOM）提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

浏览器

  • 主流的浏览器分为 IE、Microsoft Edge、Chrome、Firefox、Safari、Opera 等几大类
  • 浏览器的种类很多，但是主流的内核只有四种，各种不同的浏览器，就是在主流内核的基础上，添加不同的功能构成。
      1. Trident 内核：代表产品为 Internet Explorer，又称其为IE内核。
      1. Gecko 内核：代表作品为 Mozilla Firefox。
      1. WebKit 内核：代表作品有Safari、Chrome。
      1. Presto内核：代表作品 Opera。

window

  • window对象代表浏览器窗口。
  • 常用的实例方法/属性：
window.alert(1) // 弹窗
window.innerHeight // 获取浏览器窗口的内容区域的高度
window.innerWidth // 获取浏览器窗口的内容区域的宽度
window.outerHeight // 获取浏览器窗口外侧的高度
window.outerWidth // 获取浏览器窗口外侧的宽度
  • 测试：

在这里插入图片描述

navigator（不建议使用）

  • navigator封装了一些浏览器信息。
  • 常用的属性：
navigator.appName // 返回浏览器官方名称。不能保证此属性返回的值是正确的。
navigator.appVersion // 返回浏览器版本。不能保证此属性返回的值是正确的。
navigator.userAgent // 返回当前浏览器的用户代理。
navigator.platform // 返回浏览器平台名，不确定此值是否有效。
  • 测试：

在这里插入图片描述

  • 大多数时候，我们不会使用navigator对象，因为会被人为修改。
  • 不建议使用这些属性来判断和编写代码。

screen

  • screen代表当前渲染窗口中和屏幕有关的属性。
  • 常用的属性：
screen.width // 以像素为单位返回屏幕的宽度
screen.height // 以像素为单位返回屏幕的高度
  • 测试：

在这里插入图片描述

location

  • location代表当前页面的 URL 信息。
  • 常用的属性：
location.host // 域名字符串
location.href // URL字符串
location.protocol // URL对应协议的字符串
  • 测试：

在这里插入图片描述

  • 补充 - 常用的方法：
location.reload() // 重新加载来自当前URL的资源(刷新网页)
location.assign('URL') // 加载给定URL的内容资源到这个location对象所关联的对象上

document

  • document代表当前载入的页面，并作为网页内容的入口，也就是 DOM 树。
  • 常用的属性：
document.title // 获取或设置当前文档的标题
document.cookie // 返回一个使用分号分隔的cookie列表，或设置(写入)一个cookie
  • 测试：

在这里插入图片描述

在这里插入图片描述

  • 拓展 - 劫持 cookie 的原理：参考 - 说说劫持 Cookie 的原理 - 掘金 (juejin.cn)
    • 服务器端可以通过设置cookie:httpOnly来保障 cookie 的安全（后面再详细学习）
  • 常用的方法：
// 获取具体的DOM文档树节点
document.getElementById() // 返回具有给定id标识元素的引用对象。
document.getElementsByClassName() // 返回具有给定类名的元素列表。
document.getElementsByTagName() // 返回具有给定标签名的元素列表。
  • 测试：先准备一个网页，它包含一个自定义列表：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!-- 自定义一个列表 --><dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd></dl>
</body>
</html>
  • 在浏览器控制台中输入document.getElementById("app")来获取指定的文档树节点：

在这里插入图片描述

history（不建议使用）

  • history允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
  • 常用的方法：
history.back() // 转到浏览器会话历史的上一页，等同于点击浏览器的回退按钮
history.forward() // 转到浏览器会话历史的下一页，等同于点击浏览器的前进按钮
  • 测试：

在这里插入图片描述

操作 DOM 节点（重点）

什么是 DOM

  • DOM（Document Object Model）是指文档对象模型，是用来呈现与任意 HTML 或 XML 文档交互的 API。
  • DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或注释等等）。

核心

  • 浏览器网页就是一个 DOM 数型结构。
    • 更新：更新 DOM 节点
    • 遍历：得到 DOM 节点
    • 删除：删除一个 DOM 节点
    • 添加：添加一个新的 DOM 节点
  • 要操作一个 DOM 节点，就必须先获得这个 DOM 节点

在这里插入图片描述

获得 DOM 节点

  • 属性：
document.getElementById() // 返回具有给定id标识元素的引用对象。
document.getElementsByClassName() // 返回具有给定类名的元素列表。
document.getElementsByTagName() // 返回具有给定标签名的元素列表。
  • 例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p>
</div><script>// 获取 DOM 节点，对应 CSS 选择器let h1 = document.getElementsByTagName("h1"); // 标签let p1 = document.getElementById("p1"); // idlet p2 = document.getElementsByClassName("p2"); // classlet father = document.getElementsByTagName("father");let children = father.children; // 获取父节点下的所有子节点// father.firstChild// father.lastChild
</script></body>
</html>
  • 测试：

在这里插入图片描述

  • 以上是使用原生代码获得 DOM 节点的方式，之后我们主要是使用jQuery();来获得 DOM 节点；

更新 DOM 节点

  • 属性：
// 操作文本
element.innerText // 修改文本的值
element.innerHTML // 可以解析 HTML 标签// 操作 CSS
// element.style - 设置 CSS 样式
element.style.color // 字体颜色
element.style.fontSize // 字体大小(注意是驼峰命名)
element.style.padding // 内边距...
  • 例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="id1"></div>
<div id="id2"></div>
<div id="id3">abc</div><script>// 获取 DOM 节点let id1 = document.getElementById("id1");let id2 = document.getElementById("id2");let id3 = document.getElementById("id3");// 操作文本// innerText - 修改文本的值id1.innerText = "hello";// innerHTML - 可以解析 HTML 标签id2.innerHTML = "<strong>world</strong>";// 操作 CSS// style - 设置 CSS 样式id3.style.color = "red";id3.style.fontSize = "50px";id3.style.padding = "2em";
</script></body>
</html>
  • 查看网页效果：

在这里插入图片描述

删除 DOM 节点

  • 删除 DOM 节点的步骤：先获取父节点，再通过父节点来删除自身。
  • 属性/方法：
element.parentElement // 获取当前节点的父元素节点。如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。
element.removeChild(child) // 从 DOM 中删除一个子节点。返回删除的节点。
  • 例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p>
</div><script>// 获取 DOM 节点let self = document.getElementById("p1");// 获取父节点let father = self.parentElement;// 删除 DOM 节点father.removeChild(self); // 方式一father.removeChild(father.children[0]); // 方式二
</script></body>
</html>
  • 查看删除元素后的网页效果：

在这里插入图片描述

  • 需要注意的是：删除节点是一个动态的过程，每进行一次删除操作，父元素的children都会发生变化，因此我们在使用father.children[index]删除多个节点时一定要注意！

插入 DOM 节点

  • 我们在获得了某个 DOM 节点后，假设这个 DOM 节点是空的，我们通过使用innerHTML属性就可以增加一个元素了。但是当这个 DOM 节点已经存在元素了时，我们就不能通过此方法添加元素了，因为这样会产生覆盖。

将已存在的标签追加到末尾，实现插入节点

  • 方法：
element.appendChild(aChild) // 将一个节点追加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。
  • 例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>let js = document.getElementById("js");let list = document.getElementById("list");list.appendChild(js); // 追加到末尾
</script></body>
</html>
  • 查看插入节点后的网页效果：

在这里插入图片描述

创建一个新的标签，实现插入节点

  • 方法：
element.setAttribute(name, value) // 设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
  • 例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>let body = document.getElementsByTagName("body");let list = document.getElementById("list");// 创建一个新的节点，实现插入// 方式一let newP = document.createElement("p"); // 创建一个 p 标签newP.id = "newP"; // 设置 idnewP.innerText = "hello,world"; // 添加文本list.appendChild(newP); // 追加到 list 的子节点的末尾// 方式二let myScript = document.createElement("script"); // 创建一个 script 标签myScript.setAttribute("type", "text/javascript"); // 设置 type 属性为 text/javascriptlist.appendChild(myScript); // 追加到 list 的子节点的末尾// 应用案例: 修改 body 的 CSS 样式// 方式一let bd = document.getElementsByTagName("body")[0]; // 注意: getElementsByTagName()获得的是一个列表，所以要加索引bd.style.backgroundColor = "skyblue"; // 设置 body 的背景颜色为天蓝色// 方式二let myStyle = document.createElement("style");  // 创建一个空的 style 标签myStyle.setAttribute("type", "text/css"); // 设置 type 属性myStyle.innerHTML = "body{color: red}"; // 设置 body 的字体颜色为红色document.getElementsByTagName("head")[0].appendChild(myStyle); // 追加到 head 的子节点的末尾
</script></body>
</html>
  • 查看插入节点后的网页效果：

在这里插入图片描述

补充：根据参考节点的位置插入新节点

  • 方法：
parentNode.insertBefore(newNode, referenceNode) // 在参考节点之前插入一个拥有指定父节点的子节点。如果给定的子节点是对文档中现有节点的引用，insertBefore() 会将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点删除该节点）。
  • 例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div><script>let ee = document.getElementById("ee");let js = document.getElementById("js");let list = document.getElementById("list");list.insertBefore(js, ee); // 将新节点 js 插入到参考节点 ee 之前</script></body>
</html>
  • 查看插入节点后的网页效果：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/141059.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

设计模式再探——原型模式

设计模式再探——原型模式

目录 一、背景介绍二、思路&方案三、过程1.原型模式简介2.原型模式的类图3.原型模式代码4.原型模式深度剖析5.原型模式与spring 四、总结五、升华 一、背景介绍 最近在做业务实现的时候&#xff0c;为了通过提升机器来降低开发人员的难度和要求&#xff0c;于是在架构设计…
阅读更多...
用Redis做数据排名

用Redis做数据排名

1.背景 用Redis做数据缓存用的比较多&#xff0c;大家都能熟练使用String和Hash结构去存储数据&#xff0c;今天讲下如何使用ZSet来做数据排名。 假设场景是需要按天存储全国城市的得分数据&#xff0c;可以查询前十名的城市排名。 这个case可以使用传统关系型数据库做…
阅读更多...
【lesson7】git的介绍及使用

【lesson7】git的介绍及使用

文章目录 什么是gitgit的历史git使用在gitee上创建仓库git clone HTTPS地址git add .git add 文件名git commit “日志”git pushgit loggit rm 文件名git statusgit pull 什么是git git是版本控制器&#xff0c;那么什么是版本控制器呢&#xff1f; 下面讲个故事为大家讲解一…
阅读更多...
AI AIgents时代 - (三.) AutoGPT和AgentGPT

AI AIgents时代 - (三.) AutoGPT和AgentGPT

前两篇讲解了Agent的原理和组件&#xff0c;这节我将给大家介绍两个agent项目&#xff0c;给出它们的工作原理和区别&#xff0c;并教大家亲手尝试使用 Agents&#x1f389; &#x1f7e2; AutoGPT&#x1f916;️ 我们的老朋友&#xff0c;之前文章也专门写过。AutoGPT 是一…
阅读更多...
iphone的safari浏览器实现全屏的pwa模式，并修改顶部状态栏背景颜色

iphone的safari浏览器实现全屏的pwa模式，并修改顶部状态栏背景颜色

要想修改顶部背景颜色&#xff0c;需要用到这个属性&#xff1a;content就是你要设置的颜色 <!-- 状态栏的背景色 --><meta name"theme-color" content"#f8f8f8" /> 然后再加上下面的设置&#xff1a; <!-- 网站开启对 web app 程序的支持…
阅读更多...
【数据结构】C++实现哈希表

【数据结构】C++实现哈希表

闭散列哈希表 哈希表的结构 在闭散列的哈希表中&#xff0c;哈希表每个位置除了存储所给数据之外&#xff0c;还应该存储该位置当前的状态&#xff0c;哈希表中每个位置的可能状态如下&#xff1a; EMPTY&#xff08;无数据的空位置&#xff09;。EXIST&#xff08;已存储数…
阅读更多...
Qt创建线程(线程池)

Qt创建线程(线程池)

1.线程池可以创建线程统一的管理线程&#xff08;统一创建、释放线程&#xff09; 2.使用线程池方法实现点击开始按钮生成10000个随机数&#xff0c;然后分别使用冒泡排序和快速排序排序这10000个随机数&#xff0c;最后在窗口显示排序后的数字&#xff1a; mainwindow.h文件…
阅读更多...
FPGA的DQPSK调制解调Verilog

FPGA的DQPSK调制解调Verilog

名称&#xff1a;DQPSK调制解调 软件&#xff1a;Quartus 语言&#xff1a;Verilog 要求&#xff1a; 使用Verilog语言进行DQPSK调制和解调&#xff0c;并进行仿真 代码下载&#xff1a;DQPSK调制解调verilog&#xff0c;quartus_Verilog/VHDL资源下载 代码网&#xff1a;h…
阅读更多...
Vector Art - 矢量艺术

Vector Art - 矢量艺术

什么是矢量艺术&#xff1f; 矢量图形允许创意人员构建高质量的艺术作品&#xff0c;具有干净的线条和形状&#xff0c;可以缩放到任何大小。探索这种文件格式如何为各种规模的项目提供创造性的机会。 什么是矢量艺术作品? 矢量艺术是由矢量图形组成的艺术。这些图形是基于…
阅读更多...
【音视频】ffplay源码解析-PacketQueue队列

【音视频】ffplay源码解析-PacketQueue队列

包队列架构位置 对应结构体源码 MyAVPacketList typedef struct MyAVPacketList {AVPacket pkt; //解封装后的数据struct MyAVPacketList *next; //下一个节点int serial; //播放序列 } MyAVPacketList;PacketQueue typedef struct PacketQueue {MyAVPacketList …
阅读更多...
快递发货小程序商城的效果是什么

快递发货小程序商城的效果是什么

商家搭建小程序商城后&#xff0c;客户交易可以通过到店自提、同城配送、快递发货的方式满足不同场景不同客户购物。 本地客户难以拓展&#xff0c;三公里范围内流量有限&#xff0c;外地无疑是商家拓展市场、客户的绝佳选择&#xff0c;传统电话、微信联系难以信任及选择&…
阅读更多...
问题：conda删除虚拟环境，报错no package names supplied

问题：conda删除虚拟环境，报错no package names supplied

用conda 用 conda remove -n ScratchDet_20200114 删除虚拟 环境ScratchDet_20200114时报错 conda remove -n ScratchDet_20200114CondaValueError: no package names supplied,try "conda remove -h" for more details 解决方法&#xff0c;用下面的命令 conda env…
阅读更多...
FPGA的BPSK调制verilog

FPGA的BPSK调制verilog

名称&#xff1a;BPSK调制verilog 软件&#xff1a;Quartus 语言&#xff1a;Verilog 要求&#xff1a; 一、设计说明 BPSK调制广泛应用于卫星通信、移动通信等领域。本题目要求设计一个基于直接数字频率合成技术的BPSK调制器&#xff0c;实现对输入周期数字比特流的BPSK调…
阅读更多...
LeetCode 周赛上分之旅 #47 前后缀分解结合单调栈的贡献问题

LeetCode 周赛上分之旅 #47 前后缀分解结合单调栈的贡献问题

⭐️ 本文已收录到 AndroidFamily&#xff0c;技术和职场问题&#xff0c;请关注公众号 [彭旭锐] 和 BaguTree Pro 知识星球提问。 学习数据结构与算法的关键在于掌握问题背后的算法思维框架&#xff0c;你的思考越抽象&#xff0c;它能覆盖的问题域就越广&#xff0c;理解难度…
阅读更多...
【深度学习实验】前馈神经网络（一）：使用PyTorch构建神经网络的基本步骤

【深度学习实验】前馈神经网络（一）：使用PyTorch构建神经网络的基本步骤

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入库 1. 定义x,w,b 2. 计算净活性值z 3. 实例化线性层并进行前向传播 4. 打印结果 5. 代码整合 一、实验介绍 本实验使用了PyTorch库来构建和操作神经网络模型&#xff0c;主要是关…
阅读更多...
ExcelServer EXCEL服务器使用- 用户、角色权限配置

ExcelServer EXCEL服务器使用- 用户、角色权限配置

Excel文件服务器搭建 搭建Excel服务器 1、登录 默认 用户名 Admin 密码 3 2、角色管理 添加修改角色 角色配置在 系统管理->角色.fexm文件夹下 可以像修改excel文件一样 修改角色 3、用户管理 添加修改用户 用户的修改在 系统管理->用户.fexm 可以像excel一样编辑用户…
阅读更多...
人工智能轨道交通行业周刊-第61期（2023.9.18-9.24）

人工智能轨道交通行业周刊-第61期（2023.9.18-9.24）

本期关键词&#xff1a;焊线机器人、智能综合运维管理系统、信号平面图、铁路部门架构、书生浦语大模型 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通…
阅读更多...
【SpringBoot】-SpringBoot配置文件

【SpringBoot】-SpringBoot配置文件

作者&#xff1a;学Java的冬瓜 博客主页&#xff1a;☀冬瓜的主页&#x1f319; 专栏&#xff1a;【Framework】 主要内容&#xff1a;.properties 配置文件和 .yml 配置文件中 配置信息的设置和获取。关于IDEA乱码的解决。.yml 配置文件的 方式语法分析和演示。 .yml配置文件 …
阅读更多...
中秋国庆内卷之我爱学习C++

中秋国庆内卷之我爱学习C++

文章目录 前言Ⅰ. 内联函数0x00 内联函数和宏的比较0x01 内联函数的概念0x02 内联函数的特性 Ⅱ. auto&#xff08;C 11)0x00 auto的概念0x01 auto的用途 Ⅲ. 范围for循环(C11)0x00 基本用法0x01 范围for循环(C11)的使用条件 Ⅳ. 指针空值nullptr(C11)0x00 概念 前言 亲爱的夏…
阅读更多...
Linux指令（ls、pwd、cd、touch、mkdir、rm）

Linux指令（ls、pwd、cd、touch、mkdir、rm）

whoami who pwd ls ls -l clearls指令 ls ls -l ls -a :显示当前目录下的隐藏文件&#xff08;隐藏文件以.开头&#xff09;ls -a -l 和 ls -l -a 和 ls -la 和 ls -al &#xff08;等价于ll&#xff09; pwd命令 显示用户当前所在的目录 cd指令 mkdir code &#xff08;创建…
阅读更多...
最新文章

Copyright @ 2022~2023