JavaScript学习笔记05

最新推荐文章于 2024-07-08 16:22:29 发布
最新推荐文章于 2024-07-08 16:22:29 发布
阅读量183 收藏
点赞数
分类专栏： JavaScript学习笔记合集 文章标签： javascript 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53983068/article/details/133255131
版权

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
  • 测试：

在这里插入图片描述

在这里插入图片描述

// 获取具体的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>
  • 查看插入节点后的网页效果：

在这里插入图片描述

Bald Monkey
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node.removeChild
wtianheihei的博客
11-15 684
Node.removeChild Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点。 语法 let oldChild = node.removeChild(child); //OR element.removeChild(child); child 是要移除的那个子节点. node 是child的父节点. oldChild保存对删除的子节点的引用. oldChild === child. 被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因
insertBefore,removeChild,repalceChild的语法和作用
weixin_40442639的博客
03-22 421
1.insertBefore inserBefore，顾名思义就知道是“在某个节点之前插入”。 MDN的定义： 而所谓的“拥有指定父节点”，就是指被参照的节点的父节点就是调用insertBefore方法的节点。 如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当前位置移动到新位置。 参数 newNode：将要插入的节点 referenceNode：被参照的节点（即要...
js中parentNode,parentElement,childNodes,children
weixin_34301132的博客
08-22 1798
首先了解parentNode,parentElement,childNodes,children四大属性之前，必须对Dom树有一定的了解，在Dom文档结构中，HTML页面每一部分都是由节点组成的，节点的类型一共有3种，元素节点，文本节点，属性节点，从图中可以看出属性节点属于元素节点的分支，一般不常考虑， 下来详细介绍，childNodes，childern， childNodes指的是返回当前元素...
JavaScript 实现removeElement函数
weixin_30500473的博客
04-11 618
Element.prototype.removeElement = function() { this.parentElement.removeChild(this); } NodeList.prototype.removeElement = HTMLCollection.prototype.removeElement = function() { for(v...
HTML DOM appendChild() 、insertBefore(node, child)、removeChild(child)、replaceChild(node, child)方法使用指南
長い冬が越さなければ春が来ない。
12-04 2010
1、首先创建一个节点； 2、然后创建一个文本节点； 3、然后将文本节点添加到LI节点上； 4、最后将节点添加到列表中。
Javascript入门学习笔记
weixin_61370021的博客
04-27 4588
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记
qq_53388077的博客
03-30 1523
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 5606
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
JavaScript新手入门学习笔记
qq_43389754的博客
12-04 4万+
JavaScript介绍 1.1 前端三要素 HTML 超文本标记语言 决定了网页中的视图内容 CSS 层叠样式表 决定了网页中的视图效果 JavaScript 赋予网页动态功能 1.2 JavaScript简介 JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言 基于对象：区别于Java中的面向对象，遵循对象.方法的规则，但是没有类的概念 事件驱动：脚本语言代码需要由网页中的事件来触发执行 脚本语言：JS作为寄生语言，写在HTML网页中 JavaScript在1995年
javascript学习笔记
11-24
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要...
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
HTML_表单 和 表单案例
secret010的博客
07-05 279
【代码】HTML_表单 和 表单案例。
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
最新发布
Vinca@的博客
07-08 522
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 363
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 134
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
JS混淆基本类型和原理
朴拙科技的博客
07-06 564
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值