JavaScript 入门指南（三）BOM 对象和 DOM 对象

BOM 对象

BOM 简介

BOM（browser Object Model）即浏览器对象模型
BOM 由一系列对象组成，是访问、控制、修改浏览器的属性的方法
BOM 没有统一的标准（每种客户端都可以自定标准）。
BOM 的顶层是 window 对象

window 对象

window 对象表示浏览器中打开的窗口。

使用 window 对象中的属性和方法，可以省略对象名，直接写方法名和对象名

属性：
- location ：当前 URL 的信息
- history ：客户访问过的 URL 的信息
- screen ：客户端的屏幕信息
- navigator ：浏览器基本信息
- document ：文档对象

函数：

弹框

// 提示框（显示带有一段消息和一个确认按钮的警告框）
alert(提示信息);
// 确认框（显示带有一段消息以及确认按钮和取消按钮的对话框）。点击确定，返回true；点击取消，返回false
confirm(提示信息);
// 输入框（显示可提示用户输入的对话框）。点击确定，返回输入的内容；点击取消，返回null
prompt(提示信息);

浏览器窗口

// 打开一个新的浏览器窗口或查找一个已命名的窗口
open(网址)
// 关闭浏览器窗口
close()

定时器

// 执行一次的定时器
setTimeout(函数, 毫秒值); 
// 反复执行的定时器
setInterval(函数, 毫秒值); 
// 参数：
//    函数：定义一个有名函数，传递函数名字，或者使用匿名函数
//    毫秒值：设置定时器的时间，在指定的时间结束之后，会执行传递的函数
//    返回值：返回的是定时器的 id 值，可以用于取消定时器使用// 取消执行一次的定时器
clearTimeout(定时器的id值);
// 取消反复执行的定时器
clearInterval(定时器的id值);

示例：

var timeId = setTimeout(function () {alert("c4爆炸了!");
}, 5000);
//alert(timeId);	// 2function butOnclick() {// 取消执行一次的定时器cl
}

location 对象

Location 对象包含有关当前 URL（浏览器的地址）的信息。

属性:
- href ：获取当前浏览器的url地址
  
  href = “新的url地址” ：跳转页面，相当于在浏览器地址栏中输入了地址，并且敲击回车（打开页面）
- hostname ：主机名
- port ：端口名
- host ：主机名+端口名
方法：
- reload() ：重新加载当前文档。刷新页面

web 存储

HTML5 为 JS 增加了两个可以存储数据的对象
- localStorage ：本地存储，永久存储数据，作用域：所有页面永久访问
- sessionStorage ：会话存储，临时存储数据，作用域：一次会话（连续跳转的几个页面）
不管是 localStorage，还是 sessionStorage，可使用的 API 都相同

常用函数（以 localStorage 为例）：
- setItem(key, value) ：存储一个数据
- getItem(key) ：获取一个数据
- removeItem(key) ：删除一个数据
- clear() ：清除所有数据

history 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

函数：

back() ：后退到前一个页面（加载 history 列表中的前一个 URL）
forward() ：前进到后一个页面（加载 history 列表中的下一个 URL）
go(n) ：直接前进到第 n 个页面

go(-n) ：直接后退到第 n 个页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>history对象</title><script>//创建鼠标点击事件的响应函数function goBack() {window.history.back();}function goForward() {window.history.forward();}</script>
</head>
<body><input type="button" value="上一步" onclick="goBack()"/><input type="button" value="下一步" onclick="goForward()"/><a href="04_history对象.html">跳转到04_history对象.html</a>
</body>
</html>

screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

screen 对象中的属性，可以通过 screen.属性名 直接使用

属性：

height ：返回显示屏幕的高度（像素）
width ：返回显示器屏幕的宽度（像素）

navigator 对象

navigator 对象包含有关浏览器的信息。

navigator 对象中的属性，可以通过 navigator.属性名 直接使用

属性：

appName ：返回浏览器的名称
appVersion ：返回浏览器的平台和版本信息
userAgent ：浏览器类型

超链接与表单的跳转控制

超链接和表单都可以进行跳转。跳转属于它们的默认功能。

一般在它们触发的一个事件中，可以通过返回 false，来阻止他们的跳转！

<br />function fun5(){alert('超链接被点击了！');return false;
}function f() {alert("阻止表单提交");return false;
}<a href="https：//www.baidu.com" onclick="return fun5()">超链接</a>
//阻止提交
<a href="javascript：void(0)">我是超链接</a><form action="http://www.baidu.com" onsubmit="return f()"><input type="submit">
</form>

DOM 对象

DOM 是 document object model，也就是文档对象模型。

可以将 HTML 页面看做一个文档，在 js 眼中就是一个 document 对象。

这个 document 对象中就包含了页面中的所有元素。

DOM 中的节点分类：

元素节点（element node）
属性节点（attribute node）
文本节点（text node）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

dom 获取元素

方式1：es6 提供了强大的根据 CSS 选择器获取元素的接口（推荐）

// 根据css选择器获取一个元素
document.querySelector(CSS选择器)
// 根据css选择器获取元素对象数组集合
document.querySelectorAll(CSS选择器)

方式2：es5 提供的获取元素的接口

// 根据 id 获取一个元素：
document.getElementById(ID)  	// 等价于es6的 querySelector(#ID)
// 根据 class 获取多个元素：
document.getElementsByClassName(class)	   // 等价于es6的 querySelectorAll(.class)
// 根据标签名称获取多个元素：
document.getElementsByTagName(标签名称)		// 等价于es6的 querySelectorAll(标签)
// 根据 name 属性获取多个元素：
document.getElementsByName('name值') 	  // 等价于es6的 querySelectorAll(元素名称[name=name值])

小总结：
- es6 接口获取元素功能非常强大，而且接口非常易用
- es5 接口功能非常局限，而且接口使用复杂

间接根据层次关系获取节点：

父节点：parentNode：表示该元素的父节点
孩子节点：
- childNodes：表示该元素的所有子节点的集合，数组对象
- firstElementChild：第一个儿子节点
- lastElementChild：最后一个儿子节点
兄弟节点：
- nextElementSibling：该元素后一个兄弟元素节点
- previousElementSibling：该元素前一个兄弟元素节点

dom 操作内容

常用函数

// 向body中追加html内容
document.write(html内容) 
// 获取或者修改元素的纯文本内容（从元素内部起始位置到终止位置的文本内容, 不包含内部的Html标签）
element对象.innerText; 
// 获取或者修改元素的html内容（从元素内部的起始位置到终止位置的全部内容, 包括其内部的Html标签）
element对象.innerHTML; 
// 获取或者修改包含自身的html内容
element对象.outerHTML;

示例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>dom操作内容</title>
</head>
<body>
<div id="d1">我是d1<br/></div>
<div id="d2">我是d2</div>
<div id="d3">我是d3</div>
<script>// 向body中追加html内容document.write("<h1>我是h1标题标签</h1>");// 获取元素的纯文本,html内容对比var d1Ele = document.querySelector("#d1");	// 获取id是d1的元素 <div id="d1">我是d1<br/></div>console.log(d1Ele.innerText);	//我是d1  ==>标签中的文本console.log(d1Ele.innerHTML);	//我是d1<br>  ==>标签体console.log(d1Ele.outerHTML);	//<div id="d1">我是d1<br></div>  ==>整个标签// 修改元素的纯文本,html内容对比var d2Ele = document.querySelector("#d2");		 //获取id是d2的元素 <div id="d2">我是d2</div>//d2Ele.innerText = "<h2>我是h2标签体标签</h2>";	//显示纯文本d2Ele.innerHTML = "<h2>我是h2标签体标签</h2>";		//显示标签// 获取或修改包含元素自身的html内容(了解)var d3Ele = document.querySelector("#d3");		//获取id是d3的元素 <div id="d3">我是d3</div>console.log(d3Ele.outerHTML);					//<div id="d3">我是d3</div>d3Ele.outerHTML = "<h3>我是h3标签体标签</h3>";		//把d3的div整个替换为了h3标签
</script>
</body>
</html>

dom 操作属性

方法1：

// 获取元素的一个属性的值。注意：只能获取标签上属性的值，获取不用用户输入的内容
element对象.getAttribute(属性名)
// 给元素设置一个属性，可以设置原生和自定义
element对象.setAttribute(属性名, 属性值)
// 移除元素的一个属性
element对象.removeAttribute(属性名)

方法2：

// 获取或修改一个属性的值
element对象.属性名

注：
- 方法1 可以对自定义属性进行操作；但是方法2 只能对标准属性进行操作。
- 文本输入框标签：通过对象名.value 属性，可以获取到页面中用户输入的内容。
- 复选框|单选框标签：
  - 通过对象名.checked 属性可以获取到选中状态。选中：true；未选中：false
  - 通过对象名.getAttribute() 函数获取属性值：有 checked 属性，值就是 checked；没有 checked 属性，值就是 null

dom 操作元素

常用方法

// 获取或者设置标签的html内容
element对象.innerHTML
// 移除元素
element对象.outerHTML=""// 创造一个节点，返回一个element对象
document.createElement("标签名称)
// 给父标签添加一个子标签
parentElement对象.appendChild(newNode) 
// 在指定节点前插入新节点
parentElement对象.insertBefore(newNode,beforeNode)
// 替换节点的方法 
parentElement对象.replaceChild(newNode, oldNode)
// 删除节点的方法
parentElement对象.removeChild(childNode)

示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>dom操作元素</title>
</head>
<body>
<div id="container"><input id="smoke" type="checkbox" name="hobby" value="抽烟"><label for="smoke">抽烟&emsp;</label>
<!--    <input id="drink" type="checkbox" name="hobby" value="喝酒">-->
<!--    <label for="drink">喝酒&emsp;</label>-->
<!--    <input id="perm" type="checkbox" name="hobby" value="烫头">-->
<!--    <label for="perm">烫头&emsp;</label>-->
</div>
<script >//获取div标签对象var divEle = document.querySelector("#container");// 添加喝酒 innerHTMLconsole.log(divEle.innerHTML);divEle.innerHTML += "<input id='drink' type='checkbox' name='hobby' value='喝酒'>"+ "<label for='drink'>喝酒&emsp;</label>";// 添加烫头// 创建input标签,使用document对象中方法createElement("标签名称")var inputEle = document.createElement("input");console.log(inputEle);			//<input>// <input id="perm" type="checkbox" name="hobby" value="烫头">inputEle.setAttribute("id","perm");console.log(inputEle);			//<input id="perm">inputEle.setAttribute("type","checkbox");inputEle.setAttribute("name","hobby");inputEle.setAttribute("value","烫头");console.log(inputEle);			//<input type="checkbox" id="perm" name="hobby" value="烫头">// <label for="perm">烫头&emsp;</label>// 创建标签var lableEle = document.createElement("lable");// 添加属性lableEle.setAttribute("for","perm");console.log(lableEle);			//<lable for="perm">// 添加标签体lableEle.innerHTML="烫头&emsp;";console.log(lableEle);			//<label for="perm">烫头&emsp;</label>// 使用父标签div中的方法appendChild(子标签);添加子标签divEle.appendChild(inputEle);divEle.appendChild(lableEle);// 移除元素(了解) outerHTML//lableEle.outerHTML = "";			//删除label标签
</script>
</body>
</html>

dom 操作样式

通过 style 对象
```
// 获取或者修改一个样式
element对象.style.css样式
// 设置多个css样式
element对象.style.cssText = "样式键值对;样式键值对..."
```
注意：
- style 对象，只能获取行内样式（写在一行中），不能获取内嵌的样式（写在 head 的 style 中）和外链的样式（写在css文件中）
- style 是对象。typeof 的结果是 Object
- 值是字符串，没有设置值是空字符串""
- 命名规则：驼峰命名
- DOM 中的 style 对象并不等同 html 标签中 style 属性，在 JS 中，横杠 - 是不能作为标识符的
  
  比如：背景色样式在 DOM 中是 backgroundColor，而在 CSS 中是 background-color
style 对象的常用属性：backgroundColor（背景色）、backgroundImage（背景图片）、color（颜色）、width（宽像素）、height（高像素）、border（边框）、opacity（设置透明度，IE8 以前是 filter: alpha(opacity=xx)）

通过 className 属性

节点的 className 属性对应于 css 中的类选择器

// 获取或者修改class属性值（样式）
element对象.className 
// 获取class属性值集合，返回一个classList对象（es6特别提供的操作元素class的接口）
element对象.classList

element.classList 的常用方法：

add("class样式名称")  		// 添加一个class样式
remove("class样式名称") 	// 移除一个class样式
contains("class样式名称") 	// 判断是否包含某一个样式,包含返回true，不包含返回false
toggle("class样式名称") 	// 切换一个class样式。有则删除，无则添加

添加事件：通过对象名.事件属性名给元素添加事件

示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>dom操作样式</title>
</head>
<body>
<style>#p1{background-color: red}.mp{color:green}.mpp{background-color: lightgray;}
</style>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3" class="mpp">3. 通过class设置样式</p>
<p id="p4">4. 切换class样式</p>
<input type="button" value="切换样式" id="b1" /><script >let p1 = document.querySelector("#p1");		//获取段落标签let p2 = document.querySelector("#p2");		//获取段落标签let p3 = document.querySelector("#p3");		//获取段落标签let p4 = document.querySelector("#p4");		//获取段落标签// 内嵌式的样式，通过style对象获取不了console.log("p1 backgroundColor: " + p1.style.backgroundColor);	//""// 给p1设置css样式// 白色字体p1.style.color = "white";// 黑色背景p1.style.backgroundColor = "black";// 获取p1的样式名console.log(p1.style.backgroundColor);	//blackconsole.log(p1.style.color);			//white// 隐藏不显示//p1.style.display = "none";// 显示//p1.style.display = "block";// 给p2批量设置css样式p2.style.cssText = "color: red;font-family: '楷体';border: 1px solid green";// 给p3通过class设置样式// a.给元素添加class属性的方式添加样式//p3.setAttribute("class","mp mpp");// b.使用className属性添加(两种方式)//p3.className= "mp mpp";p3.className = p3.className + " mp";	// mpp + " mp"==>mpp mpconsole.log("p3 className: " + p3.className);//mp mpp// 切换class样式// 获取p4的class样式集合var p4List = p4.classList;// 添加一个class样式p4List.add("mpp");// 判断某一个样式是否存在console.log(p4List.contains("mpp"));	//trueconsole.log(p4List.contains("mp"));		//false// 添加一个class样式p4List.add("mp");console.log(p4List);// 移除一个class样式p4List.remove("mp");// 获取id是b1的按钮var b1Ele = document.querySelector("#b1");// 通过对象名.事件属性名,给元素添加事件b1Ele.onclick = function () {//切换,无则添加,有则删除p4List.toggle("mp");}
</script>
</body>
</html>