JavaScript学习笔记05

news2025/1/9 14:44:57

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"); // id
    let p2 = document.getElementsByClassName("p2"); // class
    let 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"; // 设置 id
    newP.innerText = "hello,world"; // 添加文本
    list.appendChild(newP); // 追加到 list 的子节点的末尾
    // 方式二
    let myScript = document.createElement("script"); // 创建一个 script 标签
    myScript.setAttribute("type", "text/javascript"); // 设置 type 属性为 text/javascript
    list.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.coloradmin.cn/o/1037808.html

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

相关文章

etc-day30

etc-day30

阅读更多...
分享一个java+springboot+vue校园电动车租赁系统（源码、调试、开题、lw）

分享一个java+springboot+vue校园电动车租赁系统（源码、调试、开题、lw）

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人七年开发经验&#xff0c;擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等&#xff0c;大家有这一块的问题可以一起交流&#xff01; &#x1f495;&…
阅读更多...
UE5学习笔记（2）——打包第一个安卓demo（附碰到的问题）

UE5学习笔记（2）——打包第一个安卓demo（附碰到的问题）

这里是目录 0. 安装Android Studio我的解决方案 1. 调试安卓设备2. 创建游戏项目问题记录 3. 配置APK4. UE&#xff0c;启动&#xff01;很不辛&#xff0c;闪退了编译完&#xff0c;部署到设备&#xff1a;部署失败&#xff01;原因再试一次&#xff01; 5. 打包安卓包UE&…
阅读更多...
【企业级SpringBoot单体项目模板 】—— 一些开发规范

【企业级SpringBoot单体项目模板 】—— 一些开发规范

&#x1f61c;作 者&#xff1a;是江迪呀✒️本文关键词&#xff1a;SpringBoot项目模版、企业级☀️每日 一言&#xff1a;种一棵树最好的时间是十年前&#xff0c;其次是现在&#xff01; 上一回我们已经搭建了一个单体SpringBoot项目并且做了一些全局的配置、比…
阅读更多...
C语言自定义类型（上）

C语言自定义类型（上）

大家好&#xff0c;我们又见面了&#xff0c;这一次我们来学习一些C语言有关于自定义类型的结构。 目录 1.结构体 2位段 1.结构体 前面我们已经学习了一些有关于结构体的知识&#xff0c;现在我们进行深入的学习有关于它的知识。 结构是一些值的集合&#xff0c;这些值称为…
阅读更多...
.Net6与Framework不同方式获取文件哈希值的性能对比

.Net6与Framework不同方式获取文件哈希值的性能对比

算法&#xff1a;MD5、SHA1、SHA256、SHA384、SHA512文件数&#xff1a;200平台对比&#xff1a;.NET 6 vs .NET Framework 4.7.2 关键代码 // 读取文件夹&#xff0c;获取MD5值 var hashs new HashAlgorithm[] { MD5.Create(), SHA1.Create(), SHA256.Create(), SHA384.Cre…
阅读更多...
【C++】C++ 类中的 this 指针用法 ( C++ 类中的 this 指针引入 | this 指针用法 | 代码示例 )

【C++】C++ 类中的 this 指针用法 ( C++ 类中的 this 指针引入 | this 指针用法 | 代码示例 )

文章目录 一、C 类中的 this 指针1、C 类中的 this 指针引入2、C 类中的 this 指针用法3、完整代码示例 一、C 类中的 this 指针 1、C 类中的 this 指针引入 在 C 类中 , this 指针 是一个特殊的指针 , 由系统自动生成 , 不需要手动声明定义 , 在类中的每个 非静态成员函数 中 …
阅读更多...
【机器学习】期望最大算法（EM算法）解析：Expectation Maximization Algorithm

【机器学习】期望最大算法（EM算法）解析：Expectation Maximization Algorithm

【机器学习】期望最大算法&#xff08;EM算法&#xff09;&#xff1a;Expectation Maximization Algorithm 文章目录 【机器学习】期望最大算法&#xff08;EM算法&#xff09;&#xff1a;Expectation Maximization Algorithm1. 介绍2. EM算法数学描述3. EM算法流程4. 两个问…
阅读更多...
C++核心编程——P25-拷贝构造函数调用时机

C++核心编程——P25-拷贝构造函数调用时机

拷贝构造函数调用时机 C中拷贝构造函数调用时机通常有三种情况 使用一个已经创建完毕的对象来初始化一个新对象值传递的方式给函数参数传值以值方式返回局部对象 #include<iostream> using namespace std; class Person { public:Person(){cout << "Person…
阅读更多...
深入理解Linux中信号处理过程

深入理解Linux中信号处理过程

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ Linux       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1f6f0…
阅读更多...
联想笔记本怎么关闭/开启自带键盘

联想笔记本怎么关闭/开启自带键盘

搜索&#xff0c;命令提示符&#xff0c;以管理员身份运行在弹出的窗口中将下面这段代码输入进去&#xff0c;并且回车。 sc config i8042prt startdisabled&#xff0c;提示成功即可然后重启&#xff0c; 笔记本自带键盘就会关闭。如果想恢复&#xff0c; 只要以同样方法输入下…
阅读更多...
开发板TFTP调试

开发板TFTP调试

问题描述 开发板和host(此处指虚拟机linux)可以平通&#xff0c;但是通过uboot tftp下载请求时一直显示T T T, 即超时 使用wireshark抓包也显示超时 措施 关闭windows和linux的防火墙 重新进行下载成功
阅读更多...
智慧公厕，公共厕所数字化促进智慧城市管理的成效

智慧公厕，公共厕所数字化促进智慧城市管理的成效

随着科技的不断进步和城市化的快速发展&#xff0c;城市管理也面临着新的挑战和机遇。而智慧公厕作为基层配套设施&#xff0c;通过数字化提升城市管理的效能&#xff0c;成为了现代智慧城市建设的重要一环。本文以智慧公厕领先厂家广州中期科技有限公司&#xff0c;大量项目案…
阅读更多...
MySQL学习笔记11

MySQL学习笔记11

MySQL日期类型&#xff1a; ###㈠ DATE类型&#xff08;年-月-日&#xff09; The DATE type is used for values with a date part but no time part. MySQL retrieves and displays DATE values inYYYY-MM-DD format. The supported range is 1000-01-01 to 9999-12-31. ##…
阅读更多...
RASP hook插桩原理解析

RASP hook插桩原理解析

javaagent技术&#xff0c;实现提前加载类字节码实现hook&#xff0c;插桩技术 javassist技术ASM字节码技术 像加载jar&#xff0c;有两种方式 premain启动前加载&#xff1a;每次变动jar包内容&#xff0c;都需要进行重启服务器利用java的动态attch加载原理&#xff0c;采用pr…
阅读更多...
查询统计当前日期往前推近七天每天的记录数

查询统计当前日期往前推近七天每天的记录数

1、查询统计当前日期往前推近七天每天的记录数。 并且如果某一天没有数据&#xff0c;则该天不会显示在结果集中&#xff0c;也不会用零值补充 SELECT date_format(create_time, %Y-%m-%d), count(*) FROM your_table WHERE create_time > date_sub(curdate(), interval 6…
阅读更多...
恒合仓库 - 采购单管理模块

恒合仓库 - 采购单管理模块

采购单管理模块 文章目录 采购单管理模块一、添加采购单(核心)1.1 采购流程1.2 采购单实体类1.3 添加采购单1.3.1 Mapper1.3.2 Service1.3.3 Controller1.3.4 效果图 二、采购单管理模块2.1 仓库数据回显2.1.1 Mapper2.1.2 Service2.1.3 Controller2.1.4 效果图 2.2 采购单列表…
阅读更多...
Docker - Docker启动的MySql修改密码

Docker - Docker启动的MySql修改密码

基于上篇文章《Docker - Docker安装MySql并启动》&#xff0c;在Docker中启动了mysql服务&#xff0c;但是密码设置成了123456&#xff0c;想起来学生时代数据库被盗走&#xff0c;然后邮箱收到被勒索BTC的场景还历历在目&#x1f62d;&#xff0c;密码不能再设置这么简单了啊&…
阅读更多...
【prometheus+grafana】快速入门搭建-服务监控各插件及企业微信告警

【prometheus+grafana】快速入门搭建-服务监控各插件及企业微信告警

目录 1. 安装qywechat_webhook插件通知企业微信 1.1. 新建目录/opt/prometheus/qywechathook/conf 1.2. 新建编辑wx.js文件 1.3. 运行启动容器 1.4. 查看容器启动情况 1.5 企业微信通知地址为&#xff1a; 2. 安装altermanager 2.1. 下载altermanager 2.2. 解压alterm…
阅读更多...
Linux 远程登录（Xshell7）

Linux 远程登录（Xshell7）

为什么需要远程登录Linux&#xff1f;因为通常在公司做开发的时候&#xff0c;Linux 一般作为服务器使用&#xff0c;而服务器一般放在机房&#xff0c;linux服务器是开发小组共享&#xff0c;且正式上线的项目是运行在公网&#xff0c;因此需要远程登录到Liux进行项日管理或者…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023