JavaScript入门BOM操作

已于 2024-04-28 17:18:06 修改
阅读量854 收藏 16
点赞数 23
分类专栏： 程序员 文章标签： javascript 前端 开发语言
于 2024-04-28 17:18:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84436058/article/details/138284912
版权
本文详细介绍了JavaScript中的location对象常用属性（如host、hostname和href）及方法（reload()和replace()），DOM操作（getElementById、getElementsByTagName和getElementsByClassName）以及Array对象的创建、赋值和常见方法。同时涵盖了Date对象的使用和Math对象的属性与函数，如Math.PI和Math.abs等。
摘要由CSDN通过智能技术生成

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
关注
专栏目录
JavaScript快速入门 函数&BOM编程
KYA_ZXY的博客
05-14 348
一、JavaScript函数 1.1 概述： 函数可以把代码封装起来，并且可以重复调用，完成特定功能的代码。 1.2 函数分类 1.2.1 系统函数 eval(<表达式>)：将其中的参数字符串作为一个javascript表示式进行执行并返回结果。 parseInt("字符串")：将字符串转换为整...
JavaScript入门学习资料包
04-18
此外，可能还会涉及事件处理、DOM操作、AJAX异步通信以及BOM（浏览器对象模型）等内容，这些都是JavaScript开发者必须掌握的基础技能。 接下来，"JavaScript使用手册"可能包含了JavaScript的语法细节和常见API的...
JavaScript入门BOM操作(2)
2401_84436058的博客
04-28 909
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】// 使用 setTimeout() 实现超时调用}, 2000);// 2秒后执行技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Web前端最全JavaScript入门BOM操作，你连原理都还没弄明白
2401_84437691的博客
05-08 805
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料window对象的常用属性如下。
JavaScript-Bom入门笔记
lemon_yu的博客
04-13 243
BOM 文章目录BOMwindowhistorylocationscreennavigator BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型 简单的讲dom用于操作文档，bom用于操作浏览器 bom对象 window -代表整个浏览器窗口是网页中的全局对象 navigator -代表当前浏览器信息，可以识别不同浏览器 lo...
JavaScript 入门指南（三）BOM 对象和 DOM 对象
墨鸦的博客
04-01 7483
JavaScript 入门指南（三）BOM 对象和 DOM 对象
JavaScript入门之BOM与DOM
shanjixin的博客
07-17 160
1、BOM：BOM提供了一系列与浏览器窗口进行交互的对象，每个对象都提供了很多方法与属性，Window对象是其顶层对象；使用这些对象可以访问和操控浏览器窗口，这些操作不与页面内容发生直接联系。 2、DOM： HTML DOM 定义了访问和操作 HTML 文档的标准方法，即如何获取、修改、添加或删除 HTML 元素。 3、Window对象：Window对象表示一个浏览器窗口或一个框架；如果文档包含框架（frame或iframe标签），浏览器除为HTML文档创建一个Window对象外还为每个框架创建一个额外的.
JavaScript 快速入门手册
热门推荐
Java.慈祥
08-17 1万+
JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);
JavaScript快速入门
m0_62036548的博客
06-12 1178
JavaScript快速入门
javascript学习（入门）
m0_61871870的博客
05-05 1318
/写法一 function 函数名(参数) {函数体 return 返回值;} //写法二 var 方法名 = function(参数) {函数体 return 返回值;一旦执行到return代表函数结束。如果没有return 函数执行完也会返回结果，结果就是undefined参数问题：js可以传任意个参数，也可以不传参数（返回NaN）传参问题：当传入的参数多于形参数量时，多余的参数会放在arguments中，要想操作多余的参数，可以使用…rest。
JavaScript入门：DOM操作与BOM示例
学习JavaScript入门课程的第一课通常会涉及以下几个关键知识点： 1. **JavaScript基础知识**： - 学习JavaScript的执行原理，包括脚本的基本结构，如使用`<script>`标签定义脚本，并了解`<script type="text/...
JavaScript入门：BOM与DOM示例讲解
本文档是一份针对初学者的JavaScript入门教程，主要讲解了浏览器对象模型（BOM）和文档对象模型（DOM）的基础概念，以及JavaScript在Web开发中的关键作用。以下是章节的主要知识点概览： 1. **JavaScript入门**：...
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 311
关于react hooks的一些知识与应用
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1135
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
最新发布
qq_30049249的博客
11-02 197
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 226
遍历echarst多个图表，并添加独立的缩放函数
JavaScript的第十一天
全栈学习ing
10-31 739
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
腾旭地图显示多个位置，点击弹出位置信息
m0_58047199的博客
10-31 242
center: new window.TMap.LatLng(longitude.value, latitude.value), //设置地图中心点坐标。rotation: 0 //设置地图旋转角度。zoom: 11, //设置地图缩放级别。pitch: 43.5, //设置俯仰角。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值