BOM和DOM

简介

// BOM: 浏览器对象模型-是指js有能力与浏览器对话
// DOM: 文档对象模型-是指可以访问HTML文档的所有元素

window对象

# window对象是客户端js最高层对象之一,由于window对象是其他大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用. 例如: window.document.wirte() 可以简写成: document.write().

# 所有浏览器都支持window对象,他表示浏览器窗口.
# 所有js全局对象,函数以及对象变量均自动成为window对象的成员
# 全局变量是window对象的属性,全局函数是window对象的方法.

// window方法:
	1. window.innerHeight - 获取浏览器窗口的内部高度
	2. window.innerWidth - 浏览器窗口的内部高度
	3. window.open() - 打开一个空白页窗口
	4. window.close() - 关闭当前窗口

window子对象 - BOM(操作浏览器)

navigator对象

# navigator对象
// 浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器的相关信息.
1. navigator.appName - web浏览器的全称
2. navigator.appVersion - web浏览器厂商和版本的详细字符串
3. navigator.userAgent - 客户端绝大部分信息
4. navigator.platform - 浏览器所运行的操作系统

screen对象

# screen对象
// 屏幕对象,不常用
1. screen.availWidth - 可用的屏幕宽度
2. screen.availHeight - 可用的屏幕高度

history对象

# history对象
// window.history对象包含浏览器的历史
// 浏览器历史对象,包含了用户对当前也免得浏览历史,但我们无法查看具体的地址,可以简单的前进或者后退一个页面
1. history.forward() - 前进一页
2. history.back() - 后退一页

location对象

# location对象
// window.location对象用于或得当前页面的地址(URL),并把浏览器重定向到新的页面.
1. location.href - 获取URL
2. location.href="URL" - 跳转到指定页面
3. location.reload() - 重新加载页面

弹出框

# 弹出框
// 可以在js中创建是那种消息框: 警告框,确认框,提示框.
	# 警告框
	// 警告框经常用于确保用户可以得到某些信息.当警告框出现后,用户需要点击确定按钮才能继续进行操作
    1. alert("弹出的消息样式");
	# 确认框
    // 确认框用于使用户可以验证或者接受某些信息.
    // 当确认框出现后,用户需要点击确认或者取消按钮才能继续进行操作
    // 如果用户点击确认,那么返回值为true,如果用户点击取消,那么返回值为false
	1. confirm("弹出框消息样式");
	# 提示框
    // 提示框经常用于提示用户在进入页面前输入某个值
    // 当提示框出现后,用户需要输入某个值,然后点击确认或者取消按钮才能继续操作.
    // 如果用户点击确认,那么返回值就是输入的值.如果用户点击取消,那么返回值就是null
    1. prompt("弹出消息样式");

计时相关

# 计时相关
// 通过使用js,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后直接执行.我们称之为计时事件
1. setTimeout()
"语法":
	先定义一个函数赋值个一个变量,再去使用settimeout多少秒后执行.
  	setTimeout("Js语句",毫秒)
2. clearTimeout()
"语法":
	把 setTimeout 的执行语句赋值给一个变量,然后把这个变量作为参数放在clearTimeout()里面,就可以取消setTimeout
	clearTimeout(setTimeout的执行语句赋值的变量)
3. setInterval()
"语法":
	setInterval()是不同于setTimeout,他会一直调用函数,一直执行.
    setInterval("Js语句",间隔时间)
4. clearInterval()
"语法":
	和clearTimeout的用法一样.
    clearInterval(setInterval的语句执行赋值的变量)

DOM(操作标签)

概述

DOM 是一套对文档内容进行抽象和概念化的方法.
当网页本被加载时,浏览器会创建页面的文档对象模型
HTML DOM 模型被构造为对象的树

HTML DOM 树

DOM标准规定HTML文档中的每个成分都是一个节点(node):
	1. 文档节点(document对象): 代表整个文档
	2. 元素节点(element对象): 代表一个元素(标签)
	3. 文本节点(text对象): 代表元素(标签)中的文本
	4. 属性节点(attribute对象): 代表一个属性,元素(标签)才有属性
	5. 注释是注释节点(comment对象)
# js可以通过DOM创建动态的HTML:
	1. js能够改变页面中的所有HTML元素
	2. js能够改变页面中的多有HTML属性
	3. js能够改变页面中的所有CSS样式
	4. js能够对页面找那个的所有事件作出反应

查找标签

# 直接查找
1. document.getElementById - 根据ID获取一个标签
2. document.getElementsByClassName - 根据class属性获取标签合集
3. document.getElementsByTagname - 根据标签获取标签合集

//注意: 涉及到DOM操作的JS代码应该放在文档的那个位置

# 间接查找
1. parentElement - 父节点标签元素
2. children - 所有子标签
3. firstElementChild - 第一个子标签元素
4. lastElementChile - 最后一个子标签元素
5. nextElementSibling - 下一个兄弟标签元素
6. previousElementSibling - 上一个兄弟标签元素

节点操作

# 创建节点
语法:
document.createElement(标签名)

# 添加节点
语法:
1. 追加一个子节点(作为最后的子节点)
// 获取的标签.appendChild(创建的标签);
2. 把增加的节点放到某个节点的前边
// 获取的标签.insertBefore(创建的标签,获取标签下面的字标签);

# 删除节点
// 获得要删除的元素,通过父元素调用该方法删除
语法:
1. 父标签.removeChild(要删除的节点或者说是标签)

# 替换节点
语法:	
1. 父标签.replaceChild(新标签,父标签下旧标签)

# 属性节点
// 获取文本节点的值
语法:
1. '''
	var divEle = document.getElementById('标签id');
	divEle.innerText;  // 只可以拿到里面的文本,拿不到标签
	divEle.innerHTML; // 可以拿到文本加标签的排版
	# 获取的是当前标签下的子标签的值
'''
// 设置文本节点的值
语法:
1. '''
	var divEle = document.getElementById("标签id");
	divEle.innerText('妈妈我想吃考山药') # 这里替换的是把子标签全部换成文本,包括标签也不存在了
	divEle.innerHTML("<p style='color:red'>妈妈我也想吃红色的烤山药</p>") # 这里的替换是可以添加标签,并且		标签是可以生效的
'''
// attribute操作
1. 获取的标签名.setAttribute("属性名","值")
	- 就是给获取的标签里面添加任意的属性名和值
2. 获取的标签名.getAttribute("属性名")
	- 获取标签中属性名对应的值,没有就返回null
3. 获取的标签名.removeAttribute("属性名")
	- 删除标签中的属性名
	//也可以通过点方法点出了来属性进行查看,但是setattribute设置的属性是不可以通过点方法查看的

# 获取值操作
就是上面的通过点方法的方法获取值:
适用于以下标签:
	1. input
	2. select
	3. textarea
   
# class的操作
1. 获取的标签名.className - 获取标签的所有样式类名(字符串)
2. 获取的标签名.remove(cls) - 删除获取标签中的指定类
3. 获取的标签名.add(cls) - 向获取的标签里面添加指定类
4. 获取的标签名.classList.contains(cls) - 检索标签中是否存在指定的类,返回值是布尔类型
5. 获取的标签名.classList.toggle(cle) - 若标签里面存在就删除指定类,不存在就添加指定类

# 指定CSS操作
格式:
	获取的标签名.style.属性名=属性值 // 这里面的属性是可以改变样式的属性
	### 注意点的是如果属性名中带有"-",例如 font-size ,我们就可以写成 fontSize

事件

# HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作

# 常用事件
1. onclick        当用户点击某个对象时调用的事件句柄。
2. ondblclick     当用户双击某个对象时调用的事件句柄。
 
3. onfocus        元素获得焦点。               // 练习：输入框

4. onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

5. onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
 
6. onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

7. onkeypress     某个键盘按键被按下并松开。
8. onkeyup        某个键盘按键被松开。

9. onload         一张页面或一幅图像完成加载。

10. onmousedown    鼠标按钮被按下。
11. onmousemove    鼠标被移动。
12. onmouseout     鼠标从某元素移开。

13. onmouseover    鼠标移到某元素之上。
 
14. onselect      在文本框中的文本被选中时发生。

15. onsubmit      确认按钮被点击，使用的对象是form。

# 绑定方式
// 方式一
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
　　    ths.style.backgroundColor="green";
  }
</script>
// 方式二
<div id="d2">点我</div>
<script>
　　  var divEle2 = document.getElementById("d2");
　　  divEle2.onclick=function () {
　　　　    this.innerText="呵呵";
  　　　}
</script>

window.onload

// 其实就是映入js代码时,如果把代码放在head标签中,就不可以得到正确的执行结果,因为代码是自上而下运行的,所有使用window.onload就可以等待下面的页面加载完在执行,就可以得到我们想要的效果.