JavaScript学习笔记（3）
一.BOM对象
BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就
是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作
BOM对象的相关属性或者函数来完成。例如：我们想要将浏览器的地址改为 http://www.baidu.com ,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：
location.href='http://www.baidu.com'
BOM中提供了如下5个对象：
| 对象名称 | 描述 | 示例 |
|---|---|---|
| Window | 浏览器窗口对象，它是JavaScript中的全局对象，包含了许多属性和方法用于操作浏览器窗口等。 | window.alert('这是一个警告框'); |
| Navigator | 浏览器对象，包含有关浏览器的信息。 | console.log(navigator.userAgent); |
| Screen | 屏幕对象，包含屏幕相关的属性，如屏幕宽度、高度等。 | console.log(screen.width); |
| History | 历史记录对象，用于操作浏览器的历史记录。 | history.back(); // 返回上一页 |
| Location | 地址栏对象，包含有关当前页面的URL信息，并可用于操作页面跳转等。 | console.log(location.href); location.href = 'https://www.example.com'; |
1. Window对象
window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.例如：我们之前学习的alert()函数其实是属于window对象的,其完整的代码如下：
window.alert('hello world');其可以省略window. 所以可以简写成
alert('hello world');所以对于window对象的属性和方法，我们都是采用简写的方式。window提供了很多属性和方法，下表列出了常用属性和方法
window对象提供了获取其他BOM对象的属性：
| 属性 | 描述 |
|---|---|
| history | 用于获取history对象，可通过它来操作浏览器的历史记录相关功能，如前进、后退等。 |
| location | 用于获取location对象，能够获取当前页面的URL信息，也能进行页面跳转等操作。 |
| Navigator | 用于获取Navigator对象，从而获取浏览器相关的信息，如浏览器类型、版本等。 |
| Screen | 用于获取Screen对象，以获取屏幕相关的属性，像屏幕的宽度、高度等。 |
也就是说我们要使用location对象，只需要通过代码 window.location 或者简写 location 即可使
用window也提供了一些常用的函数，如下表格所示：
| 函数 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框，用户只能点击确认来关闭警告框，常用于向用户显示重要的提示信息。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框，根据用户点击的按钮会返回不同的值（点击确认返回true，点击取消返回false），可用于获取用户对某个操作的确认与否。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式，只要页面不关闭或者没有调用clearInterval停止，就会持续周期性地执行。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式，只会执行一次，常用于在一段时间后执行某个特定的操作。 |
1.1 alert()函数
弹出警告框，函数的内容就是警告框的内容
alert("hello world");
1.2 confirm()函数
弹出确认框，并且提供用户2个按钮，分别是确认和取消。
但是我们怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，
返回true，点击取消时，返回false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false
var flag=confirm("你确定?");
alert(flag);
1.3 setInterval(fn,毫秒值)
定时器，用于周期性的执行某个功能，并且是循环执行。该函数需
要传递2个参数：
fn:函数，需要周期性执行的功能代码
毫秒值：间隔时间
注释掉之前的代码，添加代码如下：
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);
1.4 setTimeout(fn,毫秒值)
定时器，只会在一段时间后执行一次功能。参数和上述
setInterval一致
setTimeout(function(){
alert("JS");
},3000);
2.Location对象
location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：
//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.baidu.com";
二、DOM对象
1. DOM介绍
DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成
部分封装为对象。
DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
如下图，左边是 HTML 文档内容，右边是 DOM 树
那么我们学习DOM技术有什么用呢？主要作用如下：
改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素
总而达到动态改变页面效果目的，具体我们可以查看代码中提供的06. JS-对象-DOM-演示.html来体会DOM的效果。
2. 获取DOM对象
我们知道DOM的作用是通过修改HTML元素的内容和样式等来实现页面的各种动态效果，但是我们要操作DOM对象的前提是先获取元素对象，然后才能操作。所以学习DOM,主要的核心就是学习如下2点：
如何获取DOM中的元素对象（Element对象 ，也就是标签）
如何操作Element对象的属性,也就是标签的属性。
接下来我们先来学习如何获取DOM中的元素对象。
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
document对象提供的用于获取Element元素对象的api如下表所示：
| 函数 | 描述 |
|---|---|
| document.getElementById() | 以元素的id属性值为依据进行获取操作，最终会返回与该id对应的单个Element对象，若未找到匹配元素则返回null。 |
| document.getElementsByTagName() | 根据标签名称来获取元素，会返回一个由所有匹配该标签名称的Element对象组成的数组，即便仅找到一个匹配元素，也会以包含该元素的数组形式返回（数组长度为1）。 |
| document.getElementsByName() | 按照元素的name属性值进行获取，返回的是一个由所有匹配该name属性值的Element对象所组成的数组。 |
| document.getElementsByClassName() | 基于元素的class属性值进行获取，将返回由所有匹配该class属性值的Element对象构成的数组 |
document.getElementById()： 根据标签的id属性获取标签对象，id是唯一的，所以获取到
是单个标签对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="h1" src="image1/McCartney/1.png"> <br><br>
<div class="cls">helloWorld</div> <br>
<div class="cls">javascript</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<script>
// Array对象的定义和使用
// var arr1 = new Array(1,2,3,4,5);
// var arr2 = [5,6,7,8,9];
// document.write(arr1[0]+"<br>");
// document.write(arr2[0]+"<br>");
/* var arr = [1,2,3,4,5,6,7,8,9,10];
arr[20] = 100;
arr[18] = 'A';
arr[19] =true; */
// document.write(arr[20]+"<br>");
// document.write(arr.length+"<br>");
// document.write(arr[18]+"<br>");
// document.write(arr[19]+"<br>");
// arr.forEach(function(e){
// document.write(e+"<br>");
// })
// document.write("<hr>");
// arr.forEach((e)=>{document.write(e+"<br>")})
// arr.push(11);
// document.write(arr);
// document.write(arr);
// arr.splice(2,17);
// document.write(arr);
// var strr1 = new String("hello world");
// var strr2 = 'Hello String';
// document.write(strr1+"<br>");
// document.write(strr2+"<br>");
// document.write(strr1.charAt(0)+"<br>");
// document.write(strr1.indexOf('o')+"<br>");
// document.write(strr1.trim()+"<br>");//去除空格
// document.write(strr1.substring(2,5)+"<br>");//截取字符串
/* var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
var jsonobj = JSON.parse(jsonstr);
document.write(jsonobj.name+"<br>");
document.write(JSON.stringify(jsonobj)+"<br>"); */
/* alert("hello world");
var flag=confirm("你确定?");
alert(flag);
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);
prompt("请输入你的名字","Tom"); */
/* setTimeout(function(){
alert("JS");
},3000); */
/* //获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.baidu.com"; */
var img = document.getElementById('h1');
document.write(img);
</script>
</body>
</html>
document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很
多，所以返回值是数组。
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
document.write(divs[i]+"<hr>");
}
document.getElementsByName() ：根据标签的name的属性值获取标签对象，name属性值可
以重复，所以返回值是一个数组。
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
document.write('<hr>'+ins[i]);
document.getElementsByClassName() : 根据标签的class属性值获取标签对象，class
属性值也可以重复，返回值是数组。
var divs = document.getElementsByClassName('cls');
for (let i = 0; i < divs.length; i++) {
document.write('<hr>'+divs[i]);
}