[TOC]

一、BOM浏览器对象模型

览器对象模型（BOM） Broswer object model（整合js和浏览器）

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

一些常用的Window方法：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
• window.open() - 打开新窗口
• window.close() - 关闭当前窗口 (只能关闭用 js 的window.open()打开的页面)

window的子对象

**navigator对象：**浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName;　　		// Web浏览器全称
navigator.appVersion;　　		// Web浏览器厂商和版本的详细字符串
navigator.userAgent;　　		// 客户端绝大部分信息
navigator.platform;　　　      // 浏览器运行所在的操作系统

**screen对象：**屏幕对象，不常用。

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度

**history对象：**浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forward();  	// 前进一页，其实也是window的属性，window.history.forward()
history.back();  	// 后退一页

**location对象：**window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href;   	  // 获取当前url
location.href="URL";  // 跳转到指定页面
location.reload(); 	  //重新加载页面,就是刷新一下页面

弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

**警告框：**警告框经常用于确保用户可以得到某些信息。

alert("警告！！？");

**确认框：**当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

点击确认，那么返回值为 true。点击取消，那么返回值为 false。

confirm("请确认？");

**提示框：**如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值那么返回null。

prompt("请在下方输入","你的答案");

计时相关*

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout( )：一段时间后做一些事情

setTimeout('confirm("你好");',3000);  			// 3秒之后执行前面的js代码
setTimeout(confirm('xxx'),3000);  				 // 如果写的不是字符串,会直接执行
setTimeout(function(){confirm('xxx')},3000);  	 // 最好写成函数

var a = setTimeout(function(){console.log('xxx')},3000); // a是浏览器来记录计时器的一个随机数字
clearTimeout(a);  	// 清除计时器,通过这个数字可以清除

setInterval：计时器,每隔一段时间做某些事情

var a = setInterval(function(){console.log('xxx')},3000);  // 每隔 3 秒打印一次xxx
clearInterval(a);	// 清除计时器

二、DOM文档对象模型

文档对象模型（DOM） Document object model (整合js，css，html)

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时，浏览器会创建页面的文档对象模型

HTML DOM 模型被构造为对象的树。

JavaScript 可以通过DOM创建动态的 HTML：

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应（鼠标点击事件，鼠标移动事件等）

选择器

和css一样，你想操作某个标签需要先找到它

直接查找

document.getElementById           // 根据ID获取一个标签
document.getElementsByClassName   // 根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName     // 根据标签名获取标签合集

// 示例：
var a = document.getElementById('d1');  		// 获取id属性值为d1的标签  拿到的直接是标签对象
var a = document.getElementsByClassName('c1');  // 获取class值为c1的所有标签  拿到的是数组
var a = document.getElementsByTagName('div');  	// 获取所有div标签  拿到的是数组

<div class="c1" id="d1">
Holle
</div>

<div class="c1" id="d2">
Word
</div>

间接查找

var a = document.getElementById('d1');
a.parentElement; 		// 获取a这个标签的父级标签

children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

创建节点（创建标签）

var a = document.createElement('标签名称');

// 示例,创建a标签
var a = document.createElement('a');

添加节点

// 添加节点,添加到了最后
var a = document.createElement('a');		// 创建a标签
var dd = document.getElementById('dd');		// 找到 id=dd 的标签
dd.appendChild(a); 		// 将创建的a标签添加到dd这个div标签里面的最后.

// 在某个节点前面添加节点
父级标签.insertBefore(新标签,某个儿子标签)

// 示例:
var dd = document.getElementById('dd');  	// 找到父级标签
var a = document.createElement('a');    	// 创建一个新的a标签
var d2 = dd.children[1];  	// 找到父级标签下的某个儿子标签
dd.insertBefore(a,d2);   	// 将a标签插入到上面这个儿子标签的前面.

删除节点

var dd = document.getElementById('dd');		// 父节点
dd.removeChild(d2);  	// 父级标签中删除子标签

替换节点

var dd = document.getElementById('dd');  	// 找到父级标签
var a = document.createElement('a');  		// 创建a标签
a.innerText = '百度';  		   // 给 a 标签添加文本内容
var d1 = dd.children[0];  		// 找到要被替换的子标签
dd.replaceChild(a,d1);  		// 替换

文本操作

var d1 = document.getElementById('d1');		// 找到标签
d1.innerText;		// 查看标签 d1 中的文本内容

// 设置文本内容
d1.innerText = "<a href=''>百度</a>";
d1.innerHTML = "<a href=''>百度</a>";  	// 能够识别标签

属性操作

var d1 = document.getElementById('d1');		// 找到d1标签
d1.setAttribute('class','cc');				// 修改class属性
divEle.removeAttribute("class")				// 删除属性

// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."

值操作

var inp = document.getElementById('username');
inp.value;  				// 查看值
inp.value = 'xiaoyang'; 	// 设置值

// 示例：选择框
<select name="city" id="city">
<option value="1">四川</option>
<option value="2">上海</option>
<option value="3">北京</option>
</select>

var inp = document.getElementById('city');
inp.value;  		// 查看值
inp.value = '1';  	// 设置值

class的操作

var d = document.getElementById('dd'); 		// 找到标签

d.classList;  					// 获得这个标签的class属性的所有的值
d.classList.add('xx2');  		// 添加class值
d.classList.remove('xx2'); 		// 删除class值
d.classList.contains('xx2');  	// 判断是否有某个class值,有返回true,没有返回false
d.classList.toggle('xx2');  	// 有就删除,没有就增加

css操作

var d = document.getElementById('dd');	// 找到标签

// 有横杠的css属性,写法要去掉横杠,并且横杠后面的单词首字母大写
d.style.backgroundColor = 'deeppink';
d.style.height = '1000px'

事件

当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。        // 练习：输入框
onblur         元素失去焦点。        应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。      应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。   应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

绑定事件的方式有两种：

方式1:

<div id="d1" class="c1" onclick="func();"></div>	/* 当点击div标签就调用func方法 */

<script>
function func() {
var d = document.getElementById('d1');		// 找到id=d1的标签
d.style.backgroundColor = 'yellow';			// 并修改css背景颜色为黄色
}

</script>

方式2：

<div id="d1" class="c1"></div>

<script>
var d = document.getElementById('d1');		// 找到id=d1的标签
d.onclick = function () {					// 当此标签触发点击调用匿名函数
d.style.backgroundColor = 'yellow';		// 函数修改css背景颜色为黄色
}
</script>

**事件里面的 this: **表示当前标签对象

方法一：

<div class="c1" id="d1" onclick="func(this);"></div>	/* 触发点击div标签就调用func方法 */

<script>
function func(t){
t.style.backgroundColor = 'yellow';			// 不用查找要修改的标签，t 指带当前标签
}
</script>

方法二：

<div class="c1" id="d1"></div>

<script>
var d = document.getElementById('d1');			// 找到标签
d.onclick =  function (){						// 触发点击调用匿名函数
this.style.backgroundColor = 'yellow';		// 表示当前标签修改css背景颜色
}
</script>

onblur 和 onfocus 事件

<div class="c1" id="d1"></div>
<input type="text" id="username">

<script>
// onfocus 获取光标时触发的事件
var inp = document.getElementById('username');	// 获取input标签
var d1 = document.getElementById('d1');			// 获取div标签
inp.onfocus =  function (){						// input标签触发onfocus事件，调用匿名函数
d1.style.backgroundColor = 'yellow';		// 对div标签的css背景颜色进行改变
}

// onblur 失去光标时触发的事件
inp.onblur = function (){
d1.style.backgroundColor = 'red';
}
</script>

onchange 事件，域内容发生变化时触发

<select name="city" id="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">四川</option>
</select>

<script>
var city = document.getElementById('city');
city.onchange = function (){
console.log(this.options[this.selectedIndex].innerText)		// 打印所选中的内容
// this.options ——>指select标签下的素有option标签
// this.selectedIndex——>指被选中的标签在所有标签中的索引值
}
</script>