JavaScript BOM操作

最新推荐文章于 2024-07-26 11:41:15 发布

小杨不想写代码

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量506

点赞数 6

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_74270395/article/details/136505788

版权

1.window对象

window对象的常用属性如下

history ：用户访问过的统一资源定位符（Uniform Resource Locator，URL）信息。
location：当前的URL信息。
screen：只读属性，包含客户端显示屏幕的信息。

window对象的常用方法如下

alert(): 显示一个带确定的警示对话框。

alert("这是一个警示对话框！");

confirm():显示一个带确定和取消按钮的对话框

if (confirm("确定要执行这个操作吗？")) {
  console.log("用户点击了确定按钮");
} else {
  console.log("用户点击了取消按钮");
}

promot():显示可提示用户输入的对话框

var name = prompt("请输入您的名字：");
console.log("您输入的名字是：" + name);

open():打开一个新的浏览器窗口，加载给定URL所指定的文档

window.open("https://www.example.com", "_blank");

close():关闭浏览器窗口

window.close();//请注意，这个方法只能关闭由 JavaScript 打开的新窗口，而无法关闭当前的窗口

setInterval()：间隔指定的毫秒数不停地执行指定的代码

var intervalId = setInterval(function() {
  console.log("每隔一秒执行一次");
}, 1000);

clearInrerval():用于停止setInterval()方法的执行的函数代码

clearInterval(intervalId);

setTimeout():在指定的毫秒数后执行指定的代码

setTimeout(function() {
  console.log("两秒后执行");
}, 2000);

clearTimeout(): 用于停止setTimeout()方法的执行的函数代码

var timeoutId = setTimeout(function() {
  console.log("这段代码不会被执行");
}, 2000);
clearTimeout(timeoutId);
//timeoutId 是之前使用 setTimeout() 创建的定时任务的 ID。通过调用 clearTimeout() 方法，定时任务将被取消，代码不会在延迟后执行

2.history对象

history常用的属性和方法如下

类别	名称	作用
属性	length	返回历史记录列表中的网址数
方法	go()	加载history列表中的某个具体页面
	forward()	加载history中的下一个URL
	back()	加载history中的前一个URL

代码示例

// 后退一页
history.back();

// 前进一页
history.forward();

// 跳转到历史记录中的特定页面
history.go(-2); // 后退两页

3.location对象

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

小杨不想写代码

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
JavaScript BOM操作

history ：用户访问过的统一资源定位符（Uniform Resource Locator，URL）信息。screen：只读属性，包含客户端显示屏幕的信息。location对象常用属性和方法如下。location：当前的URL信息。history常用的属性和方法如下。window对象的常用属性如下。window对象的常用方法如下。
复制链接

扫一扫