JavaScript入门BOM操作

已于 2024-04-28 17:18:06 修改
阅读量837 收藏 16
点赞数 23
分类专栏： 程序员 文章标签： javascript 前端 开发语言
于 2024-04-28 17:18:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84436058/article/details/138284912
版权

location对象常用属性和方法如下

类别名称作用
属性host返回服务器名称和端口号
hostname返回不带端口号的服务器名称
href返回当前加载页面的完整URL
方法reload()重新加载当前文档
replace()用新的文档替换当前文档
<!-- 示例 -->
<p>属性示例：</p>
<ul>
  <li>host: <span id="hostExample"></span></li>
  <li>hostname: <span id="hostnameExample"></span></li>
  <li>href: <span id="hrefExample"></span></li>
</ul>

<button onclick="getAttributeExamples()">显示属性示例</button>

<p>方法示例：</p>
<button onclick="reloadPage()">点击重新加载当前文档</button>
<button onclick="replaceDocument()">点击用新的文档替换当前文档</button>

<script>
  // 属性示例
  document.getElementById("hostExample").innerText = window.location.host;
  document.getElementById("hostnameExample").innerText = window.location.hostname;
  document.getElementById("hrefExample").innerText = window.location.href;

  function getAttributeExamples() {
    alert(
      "host属性示例： " + window.location.host + "\n" +
      "hostname属性示例： " + window.location.hostname + "\n" +
      "href属性示例： " + window.location.href
    );
  }

  // 方法示例
  function reloadPage() {
    location.reload();
  }

  function replaceDocument() {
    location.replace("https://www.example.com");
  }
</script>

4.document对象

方法作用
getElementById()通过元素的 ID 属性获取元素节点
getElementsByTagName()通过标签名获取元素节点的集合
getElementsByClassName()通过类名获取元素节点的集合
write()向文档写入内容
<!DOCTYPE html>
<html>
<head>
  <title>DOM操作示例</title>
</head>
<body>

<h2>使用 getElementById 获取元素节点：</h2>
<p id="demo">这是一个示例段落。</p>

<h2>使用 getElementsByTagName 获取元素节点的集合：</h2>
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<h2>使用 getElementsByClassName 获取元素节点的集合：</h2>
<p class="fruit">这些都是水果。</p>
<p class="fruit">喜欢吃水果吗？</p>

<script>
  // 使用 getElementById 获取元素节点
  var demoElement = document.getElementById("demo");
  demoElement.style.color = "blue";

  // 使用 getElementsByTagName 获取元素节点的集合
  var listItems = document.getElementsByTagName("li");
  for (var i = 0; i < listItems.length; i++) {
    listItems[i].style.fontWeight = "bold";
  }

  // 使用 getElementsByClassName 获取元素节点的集合
  var fruitParagraphs = document.getElementsByClassName("fruit");
  for (var j = 0; j < fruitParagraphs.length; j++) {
    fruitParagraphs[j].style.backgroundColor = "#f9f9f9";
  }
  
  document.write("这是使用 document.write 写入的内容。");
</script>

</body>
</html>

5.Array对象

  • 创建数组
var fruits = ["apple", "banana", "orange"];
  • 为数组元素赋值
//方法一
var myArray = [];
// 使用 push() 方法向数组添加元素
myArray.push("apple");
myArray.push("banana");
myArray.push("orange");
//方法二
// 创建一个空数组
var myArray = [];
// 通过索引为数组元素赋值
myArray[0] = "apple";
myArray[1] = "banana";
myArray[2] = "orange";
  • 数组的常用属性和方法
类别名称作用
属性length表示数组的长度，即数组中元素的个数
方法
join()
把数组的元素放入字符串，用分隔符进行分隔
sort()
方法用于对数组元素进行排序
push()
将一个或多个元素添加到数组的末尾，并返回修改后数组的长度
forEach()
对数组中的每个元素执行一次提供的函数
// 属性示例
var myArray = [1, 2, 3, 4, 5];
console.log(myArray.length); // 输出：5

// 方法示例
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var joinedFruits = fruits.join(", ");
console.log(joinedFruits); // 输出：Banana, Orange, Apple, Mango

var numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort();
console.log(numbers); // 输出：[1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

var animals = ["cat", "dog"];
animals.push("elephant", "lion");
console.log(animals); // 输出：["cat", "dog", "elephant", "lion"]

var colors = ["red", "green", "blue"];
colors.forEach(function(color) {
    console.log(color);
});
// 输出：
// red
// green
// blue

JavaScript定时函数

在 JavaScript 中，你可以使用 setInterval() 函数来创建定时函数。这个函数会每隔一定的时间间隔重复执行指定的代码块。另外，你也可以使用 setTimeout() 函数来创建一个定时器，在指定的时间后执行一次特定的代码。

下面是一个简单的示例，演示如何使用 setInterval() 函数每隔一秒输出一次 “Hello, World!”：

// 使用 setInterval() 函数
setInterval(function() {
    console.log("Hello, World!");
}, 1000); // 时间间隔为 1000 毫秒，即 1 秒

如果你想要只执行一次特定的代码，你可以使用 setTimeout() 函数，示例如下：

// 使用 setTimeout() 函数
setTimeout(function() {
    console.log("This code will run once after 3 seconds.");
}, 3000); // 时间间隔为 3000 毫秒，即 3 秒

在 JavaScript 中，超时调用和间歇调用是使用定时器函数来实现的。这两种调用方式分别由 setTimeout() 和 setInterval() 函数来实现。

超时调用指的是在指定的时间之后执行一次特定的代码，而间歇调用则是每隔一段时间重复执行特定的代码。

1.调用（setTimeout）示例：

// 使用 setTimeout() 实现超时调用
setTimeout(function() {
    console.log("This code will run once after 2 seconds.");
}, 2000); // 2秒后执行

2.间歇调用（setInterval）示例：

// 使用 setInterval() 实现间歇调用
var count = 0;
var intervalId = setInterval(function() {
    count++;
    console.log("This code will run every 1 second. Count: " + count);
    if (count === 5) {
        clearInterval(intervalId); // 在执行5次后停止间歇调用
    }
}, 1000); // 每隔1秒执行一次

在这个示例中，setInterval() 函数会每隔1秒执行一次指定的代码块，直到执行了5次后通过 clearInterval() 停止间歇调用。

6.Date对象

在 JavaScript 中，Date 对象用于处理日期和时间。你可以使用 Date 对象来获取当前的日期和时间，或者创建特定的日期和时间。

下面是一些 Date 对象的常见用法示例：

1.获取当前日期和时间：

// 创建一个新的 Date 对象，不传递参数即可获取当前日期和时间
var currentDate = new Date();
console.log(currentDate);

2.创建特定日期和时间：

// 创建一个特定的日期和时间，参数依次为年、月（从 0 开始计数）、日、时、分、秒、毫秒
var specificDate = new Date(2024, 3, 15, 12, 30, 0, 0); // 2024年4月15日 12:30:00
console.log(specificDate);

3.获取特定日期和时间的各个部分：

// 获取特定日期和时间的年、月、日、时、分、秒等部分
var year = specificDate.getFullYear(); // 获取年份
var month = specificDate.getMonth(); // 获取月份（从 0 开始）
var day = specificDate.getDate(); // 获取日期
var hours = specificDate.getHours(); // 获取小时
var minutes = specificDate.getMinutes(); // 获取分钟
var seconds = specificDate.getSeconds(); // 获取秒钟
console.log(year, month, day, hours, minutes, seconds);

4.格式化日期输出：

// 格式化日期输出
var formattedDate = specificDate.toDateString(); // 将日期对象转换为字符串
console.log(formattedDate);

Date 对象还提供了许多其他方法和属性，用于处理日期、时间和时区。希望这些示例能帮助你更好地理解 Date 对象的用法。

7.Math对象

在 JavaScript 中，Math 对象提供了一组用于执行数学运算的属性和方法。

下面是一些 Math 对象常见的属性和方法：

  1. 常见属性：
    Math.PI：表示圆周率 π 的近似值（3.14159…）。
    Math.E：表示自然对数的底数 e（2.71828…）。
  2. 常见方法：
    Math.abs(x)：返回一个数的绝对值。
    Math.ceil(x)：对一个数进行上舍入操作，返回大于等于该数的最小整数。
    Math.floor(x)：对一个数进行下舍入操作，返回小于等于该数的最大整数。

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

常见的属性和方法：

  1. 常见属性：
    Math.PI：表示圆周率 π 的近似值（3.14159…）。
    Math.E：表示自然对数的底数 e（2.71828…）。
  2. 常见方法：
    Math.abs(x)：返回一个数的绝对值。
    Math.ceil(x)：对一个数进行上舍入操作，返回大于等于该数的最小整数。
    Math.floor(x)：对一个数进行下舍入操作，返回小于等于该数的最大整数。

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

2401_84436058
关注
  • 23
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript快速入门 函数&BOM编程
KYA_ZXY的博客
05-14 275
一、JavaScript函数 1.1 概述： 函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码。 1.2 函数分类 1.2.1 系统函数 eval(<表达式>)：将其中的参数字符串作为一个javascript表示式进行执行并返回结果。 parseInt("字符串")：将字符串转换为整...
js的bom操作
01-24
js的bom操作，了解js执行的全过程，快速入门js的技术，掌握前端开发
JavaScript入门BOM操作(2)
2401_84436058的博客
04-28 888
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】// 使用 setTimeout() 实现超时调用}, 2000);// 2秒后执行技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Web前端最全JavaScript入门BOM操作，你连原理都还没弄明白
2401_84437691的博客
05-08 770
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料window对象的常用属性如下。
JavaScript入门BOM操作，web前端工程师面试该怎么准备呢
m0_54926105的博客
04-17 580
三套“算法宝典”算法刷题LeetCode中文版（为例）人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！
JavaScript入门BOM操作(1)，2024年最新万字长文总结Web前端多进程
m0_54926105的博客
04-17 843
/timeoutId 是之前使用 setTimeout() 创建的定时任务的 ID。// 输出：[“cat”, “dog”, “elephant”, “lion”]// 输出：Banana, Orange, Apple, Mango。// 输出：[1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]// 使用 setTimeout() 实现超时调用。// 使用 push() 方法向数组添加元素。// 使用 setInterval() 函数。// 使用 setTimeout() 函数。
JavaScript-Bom入门笔记
lemon_yu的博客
04-13 201
BOM 文章目录BOMwindowhistorylocationscreennavigator BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型 简单的讲dom用于操作文档，bom用于操作浏览器 bom对象 window -代表整个浏览器窗口是网页中的全局对象 navigator -代表当前浏览器信息，可以识别不同浏览器 lo...
JavaScript入门之BOM与DOM
shanjixin的博客
07-17 127
1、BOM：BOM提供了一系列与浏览器窗口进行交互的对象，每个对象都提供了很多方法与属性，Window对象是其顶层对象；使用这些对象可以访问和操控浏览器窗口，这些操作不与页面内容发生直接联系。 2、DOM： HTML DOM 定义了访问和操作 HTML 文档的标准方法，即如何获取、修改、添加或删除 HTML 元素。 3、Window对象：Window对象表示一个浏览器窗口或一个框架；如果文档包含框架（frame或iframe标签），浏览器除为HTML文档创建一个Window对象外还为每个框架创建一个额外的.
javascript学习（入门）
m0_61871870的博客
05-05 1228
/写法一 function 函数名(参数) {函数体 return 返回值;} //写法二 var 方法名 = function(参数) {函数体 return 返回值;一旦执行到return代表函数结束。如果没有return 函数执行完也会返回结果，结果就是undefined参数问题：js可以传任意个参数，也可以不传参数（返回NaN）传参问题：当传入的参数多于形参数量时，多余的参数会放在arguments中，要想操作多余的参数，可以使用…rest。
JavaScript 快速入门手册
热门推荐
Java.慈祥
08-17 1万+
JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);
javascript入门手册
12-24
javascript入门手册，简单介绍，没什么废话，分四大部分，javascript基础语法，JavaScript对象，DOM,事件，BOM。
javascript入门笔记
05-15
3、浏览器对象模型(Browser Object Model) - BOM 允许让 JS 与 浏览器进行交互 JS是一款基于对象的编程语言 2、JS的基础语法 1、浏览器内核 内核负责页面内容的渲染，由以下两部分组成： 1、内容排版引擎 - ...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 350
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 514
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1269
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 537
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
最新发布
lx_nhs的博客
06-12 439
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1237
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
JavaScript的BOM
05-10
BOM（浏览器对象模型）是指浏览器提供的一组对象，它们可以访问和控制浏览器窗口，比如location、navigator、history、screen等对象，通过这些对象可以获取或修改浏览器窗口的URL、浏览器信息、浏览历史记录、屏幕...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值