学习JS的第10天
一、BOM
1)、什么是BOM?
1、BOM（ Browser Object Model）—> 浏览器对象模型。
2、BOM 作用：主要提供了访问和操作浏览器各组件的方式。
window浏览器窗口对象是js中最大的对象。其他所有的对象，都是window的子对象
document文档对象，代表一个网页
location地址栏对象，对地址栏的操作一些方法
navigatior浏览器软件对象，主要用来判断用户用的是什么浏览器，可以解决兼容性问题
screen屏幕对象，可以获取屏幕相关的信息
history历史记录对象，可以对浏览器的历史记录进行相关的操作(此历史记录为前进和后退)
注意点：
1、window是全局浏览器内置顶级对象 表示浏览器中打开的窗口（没有应用于window对象的公开标准，不过所有浏览器都支持该对象）Window 对象表示一个浏览器窗口或一个框架。
2、在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。
例如，可以只写 document，而不必写 window.document。
同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。
除了上面列出的属性和方法，Window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。
所有浏览器都支持 window 对象。它表示浏览器窗口。
//所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
//全局变量是 window 对象的属性。
//全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
2)、window对象常用的方法
1.prompt() 显示可提示用户输入的对话框
2.alert() 显示一个带有提示信息和一个“确定”按钮的警示对话框
3.confirm() 显示一个带有提示信息、“确定”和“取消”按钮的对话框
4.close() 关闭浏览器窗口 close()方法用于关闭浏览器窗口，语法：window.close（）;
5.定时器
a、间隔定时器setInterval（开启） clearInterval（关闭）
b、超时定时器setTimeout（开启） clearTimeout（关闭）
6. open()方法 功能：打开一个新的浏览器窗口
3）、location地址栏对象
1、hostname 设置或返回当前URL的主机名
2、href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
3、pathname：文件路径及文件名
4、protocol：协议，如：http://、ftp://
5、hash：锚点名称。如：#top
6、reload([true])：刷新网页。true参数表示强制刷新
a、是网页浏览后，一般会在本地留下缓存，普通刷新的话，浏览器会优先获取缓存里的资源代替从服务器上请求，以提高访问速度。
b、强制刷新就是告诉浏览器不要获取缓存，重新从服务器请求网页上的所有资源，适用于开发测试或者某些资源更新。
7、注意：所有的属性，重新赋值后，网页将自动刷新。
<meta http-equiv = 'refresh' content = '5;url=http://www.sina.com.cn' />
4）、navigator对象
1、appName：浏览器软件名称 appCodeName 浏览器软件名称现在没有多大参考意义了
2、appVersion：浏览器软件的核心版本号。
3、platform：平台
4、userAgent浏览器版本信息
5）、history对象
1、back（） 后退
2、forward（） 前进
3、go（）
4、history.back（）=== history.go（-1） 浏览器中的 后退
5、history.forward() === history.go ( 1 ) 浏览器中的 前进
6）、screen屏幕对象
1、Width：返回屏幕的宽度，只读属性。 window.screen.width
2、Height：返回屏幕的高度，只读属性。 window.screen.height
3、availWidth：屏幕的有效宽度，不含任务栏。只读属性。
4、availHeight：屏幕的有效高度，不含任务栏。只读属性。
7）、window对象事件
1、window.onload 当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件(条件)
/*****************************************/
2、为窗口添加滚动条事件
onscroll 滚动事件
scrolltop 垂直滚动条滚动的距离
scrollleft 水平滚动条滚动的距离
window.innerHeight - 浏览器窗口的可见高度
window.innerWidth - 浏览器窗口的可见宽度
兼容写法：
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
3、window.onresize 事件会在窗口或框架被调整大小时发生
二、DOM
Ⅰ、DOM对象介绍
1、DOM Document Object Model ，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。
2、DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。
3、DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。
Ⅱ、DOM的分类
1、核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。
2、HTML DOM：针对HTML文档提供的专用的属性方法。
3、XML DOM：针对XML文档提供的专用的属性和方法。(了解)
4、CSS DOM：提供了操作CSS的属性和方法。
5、Event DOM：事件对象模型。如：onclick、 onload等。
Ⅲ、核心DOM的操作
1、认识DOM中元素节点类型：
document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点
element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点
attribute属性节点。指HTML标记的属性
text节点。是节点树的最底节点
2、DOM中访问节点
firstChild：第1个子节点
lastChild：最后1个子节点
childNodes：子节点列表，是一个数组 childNodes[0]
parentNode：父节点
nodeName：节点名称 返回标签名
nodeValue 属性节点的的属性值
nodeType 节点类型，返回值是数字
如果节点是元素节点，则 nodeType 属性将返回 1。如果节点是属性节点，则 nodeType 属性将返回 2。返回3是文本节点。如果是注释节点，返回8
查找<html>标记的方法
document.documentElement
查找<body>标记的方法
document.body
3、对节点的属性操作*
setAttribute(name,value)：给某个节点添加一个属性
getAttributeNode(name)：获取某个节点属性的值
removeAttribute(name)：删除某个节点的属性
4、创建节点*
document.createElement(tagName)：创建一个指定的HTML标记，一个节点
tagName：是指不带尖括号的HTML标记名称
举例：var imgObj = document.createElement(“img”)
parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。
parentNode代表父节点，父节点必须存在。
childNode代表子节点。
举例：document.body.appendChild(imgObj)
box.insertBefore() 方法可在已有的子节点前插入一个新的子节点 先放要排在前面的元素， 再写其他元素
参数1表示新建的节点 参数2表示你要插入的那个节点之前
5、删除节点
parentNode.removeChild(childNode)：删除某个父节点下的子节点。
parentNode代表父节点。
childNode代表要删除的子节点。
举例：document.body.removeChild(imgObj)
remove()直接删除当前项
Ⅳ、HTML DOM的操作
核心DOM中，提供的属性和方法，已经可以操作网页了。为什么还要有HTMLDOM呢？
如果在核心DOM中，网页中节点层级很深时，访问这个节点时将十分麻烦。
那么，HTMLDOM中就提供了通过id直接找节点的方法，而不用再HTML根节点开始。
1、getElementById()
功能：查找网页中指定id的元素对象。
语法：var obj = document.getElementById(id)
2、getElementsByTagName(tagName)
功能：查找指定的HTML标记，返回一个数组
语法：var arrObj = parentNode.getElementsByTagName(tagName)
参数：tagName是要查找的标记名称，不带尖括号。
返回值：返回一个数组。如果只有一个节点，也返回一个数组。
3、 getElementsByName("Name")
功能：通过name值获取元素，返回值是数组，通常用来获取有name的input的值
4.getElementsByClassName()
功能：通过class名获取元素，返回值是数组
ES5新增选择器：
5.document.querySelectorAll(); //强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的
6.document.querySelector(); 返回单个元素
Ⅴ、元素属性的对象：
a、在HTML中叫“标记” b、 在DOM中叫“节点” c、在JS中叫“对象”
tagName：标签名称，与核心DOM中nodeName一样
className：CSS类的样式
id：同HTML标记id属性一样
title：同HTML标记的title属性一样
style：同HTML标记的style属性一样
innerHTML：包含HTML标记中的所有的内容，包括HTML标记等
Ⅵ、CSS DOM动态样式
使用JS操作CSS中的各种属性。JS只能操作或修改行内样式，对于类样式，通过className来赋值。
如：imgObj.className=”imgClass”;
1、style对象
每个HTML标记，都有一个style属性。但这个style属性又是一个style对象。
那么，这个style对象属性有哪些？style对象的属性，与CSS中的属性，一一对应。
因此，style对象用来代替CSS。
如：imgObj.style.border=”1px solid red”;
2、style对象属性与CSS属性的转换
(1)、如果是一个单词，style对象属性，与CSS属性一样。
(2)、如果是多个单词，第一个单词全小写，后面每个单词首字母大写，并去掉中划线。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
