BOM和DOM深入
方才简单说明了BOM与DOM，本篇进一步了解一下。
BOM
window 对象属性
- name：指浏览器窗口的名字或框架的名字；(这个名字是给 <a> 标记的 target 属性来用的)
- top：代表最顶层窗口；
- parent：代表父级窗口，主要用于框架；
- self：代表当前窗口，主要用于框架；
- innerWidth：指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)；
- innerHeight：指浏览器窗口的内高(不含菜单栏、工具栏、地址栏、状态栏)；
window 对象方法
- alert()：弹出一个警告对话框；
- prompt()：弹出一个输入对话框；
- confirm()：弹出一个确认对话框；
- close()：关闭窗口；
- print()：打印窗口；
- open()：打开一个 新的浏览器窗口；
- 语法：var win = window.open(url,name,options);
- 说明：参数可有可无。如果没有指定参数，则打开一个选项卡式的窗口(大小是最大化)。
- 参数：
- url：准备在新窗口中显示哪个文件；url 可以为空字符串，表示显示一个空的页面。
- name：新窗口的名字；该名字给 <a> 标记的 target 属性用。
- options：窗口的规格(属性)。
- 返回值：返回一个 window 对象的变量，可以通过该名称跟踪窗口。
screen(屏幕对象)
- width：屏幕的宽度；(只读属性)
- height：屏幕的高度；(只读属性)
- availWidth：屏幕的有效宽度，不包含任务栏;(只读属性)
- availHeight：屏幕的有效高度，不包含任务栏;(只读属性)
navigator 对象
- appName：浏览器软件名称，用来判断用户使用的是什么核心的浏览器；
- 如果是 IE 浏览器的话，返回值为：Microsoft Internet Explorer
- 如果是 Firefox 浏览器的话，返回值为：Netscape
- appVersion：浏览器软件的核心版本号；
- systemLanguage：系统语言；
- userLanguage：用户语言；
- platform：平台；
location 地址栏对象
- href：获取地址栏中完整的地址。可以实现 JS 的网页跳转；
- host：主机名(域名)；
- hostname：主机名；
- pathname：文件路径及文件名；
- search：查询字符串；
- protocol：协议；
- hash：锚点名称；如：#top
- reload(true)：刷新网页；true 参数表示强制刷新
注意：所有的属性，重新赋值后，网页将自动刷新。
history 浏览历史对象
- length：历史记录的个数；
- go(n)：同时可以实现“前进”和“后退”；(n：表示整数)
- history.go(0) 刷新网页；
- history.go(-1) 后退；
- history.go(1) 前进一步；
- history.go(3) 前进三步；
- forward()：相当于浏览器的“前进”按钮；
- back()：相当于浏览器的“后退”按钮；
延时器
- setTimeout()：设置一个延时器，换句话说：时间一到，就执行 JS 代码一次；
- 语法：var timer = window.setTimeout(code,millisec);
- 参数：code 是任何合法的 JS 代码，一般情况下是 JS 函数。该函数要放到引号("code")中；
- 返回值：返回一个延时器的 id 变量，这个 id 变量给 clearTimeout() 用来清除。
- clearTimeout()：清除延时器 id 变量；
- 语法：window.clearTimeout(timer);
- 参数：timer 就是由 setTimeout() 设置的延时器的 id 变量。
定时器
- setInterval()：设置一个定时器，重复不断的执行 JS 代码(周期性)；
- 语法：var timer = window.setInterval(code,millisec);
- 参数：code 是任何合法的 JS 代码，一般情况下是 JS 函数。该函数要放到引号("code")中；
- 返回值：返回一个延时器的 id 变量，这个 id 变量给 clearInterval() 用来清除。
- clearInterval()：清除定时器 id 变量；
- 语法：window.clearInterval(timer);
- 参数：timer 就是由 setInterval() 设置的定时器的 id 变量。
定时器总是调用其他函数，延时器总是调用自己所在的函数。
onload 事件：当网页加载完成(指<body>标记的所有内容全部加载完成)，才触发该事件(条件)。通过 onload 事件属性，去调用 JS 的函数。onload 属性只有<body>标记才有。
onclick 事件：当单击时，去调用 JS 代码。所有 HTML 标签都具有该事件属性。
DOM
DOM 的分类
- 核心 DOM：提供了同时操作 HTML 文档和 XML 文档的公共的属性和方法；
- HTML DOM：针对 HTML 文档提供的专用的属性和方法；
- XML DOM：针对 XML 文档提供的专用的属性和方法；
- CSS DOM：提供了操作 CSS 的属性和方法；
- Event DOM：时间对象模型；如：onclick、onload 等。
DOM 中节点类型
- document 文档节点：代表整个网页，不代表任何 HTML 标记。但它是 HTML 节点的父节点；
- element 元素节点：指任何 HTML 标记。每一个 HTML 标记就称一个“元素节点”，他可以有文本节点和属性节点；
- attribute 属性节点：指 HTML 标记的属性；
- text 文本节点：是节点书的最底层节点；
节点访问
- nodeName：节点名称；
- nodeValue：节点的值。只有文本节点才有值，元素节点没有值；nodeValue 的值只能是“纯文本”，不能含有任何的 HTML 标记或 CSS 属性；
- firstChild：第1个子节点；
- lastChild：最后1个子节点；
- childNodes：子节点列表，是一个数组；
- parentNode：父节点；
对节点的属性操作
- setAttribute(name,value)：给某个节点添加一个属性；
- getAttribute(name)：获取某个节点属性的值；
- removeAttribute(name)：删除某个节点的属性。
节点的创建
- document.createElement(tagName)：创建一个指定的 HTML 标记(一个节点)；
- tagName：是指不带尖括号的 HTML 标记名称
- parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下；
- parentNode：代表父节点，父节点必须存在
- childNode：代表创建的一个子节点
- parentNode.removeChild(childNode)：删除子节点；
- parentNode：代表父节点，父节点必须存在
- childNode：代表要删除的一个子节点
HTML DOM 访问 HTML 元素的方法
- getElementById()：查找网页中指定 id 的元素对象，返回一个元素对象；
- 语法：var obj = document.getElementById(id)\
- 参数：id 是指网页中标记的 id 属性的值
- getElementsByTagName(tagName)：查找指定的 HTML 标记，返回一个数组；
- 语法：var arrObj = parentNode.getElementsByTagName(tagName)
- 参数：tagName 是要查找的标记名称，不带尖括号的
元素对象的属性
tagName：标签名称，与核心 DOM 中 nodeName 一样；
className：CSS 类的样式；
id：同 HTML 标记 id 属性一样；
title：同 HTML 标记 title 属性一样；
style：同 HTML 标记 style 属性一样；
innerHTML：包含 HTML 标记中的所有的内容，包括 HTML 标记；
offsetWidth：元素对象的宽度(不带 px 单位)；
offsetHeight：元素对象的高度(不带 px 单位)；
scrollWidth：元素对象的总宽度，包括滚动条中的内容(不带 px 单位)；
scrollHeight：元素对象的总高度，包括滚动条中的内容(不带 px 单位)；
scrollTop：指内容向上滚动了多少距离(有滚动条时才有效)；
scrollLeft：指内容向左滚动了多少距离(有滚动条时才有效)；
Event DOM：事件 DOM
- 事件简介：主要实现“用户与网页的交互”；当事件发生时，去执行 JS 功能代码。
- 常用事件：
- onload：当网页加载完成时；(只能给 <body> 用)
- onclick：当点击时；
- onscroll：当拖动滚动条时；
- onmouseover：当鼠标放上时；
- onmouseout：当鼠标移开时；
- onsubmit：当提交表单时；
- onreset：当重置表单时；
- onfocus：当获得焦点时(把光标定位到文本框中)；
- onblur：当失去焦点时(把光标从文本框中移开)；
- onchange：当下拉列表内容改变时；(用在下拉列表、上传文件)
- onselect：当选中文本时；
- onresize：当改变窗口大小时；
- . . . . . .
DOM 中 Event 对象属性
- type：当前的事件类型；
- clientX 和 clientY：距离窗口左边和上边的距离；
- pageX 和 pageY：距离网页左边和上边的距离；
- screenX 和 screenY：距离屏幕左边和上边的距离；
style 对象属性与 CSS 属性的转换
- 如果是一个单词，style 对象属性与 CSS 属性一样；
- 如果是多个单词，第一个单词全小写，后面每个单词首字母大写，并去掉中划线。
【标记(HTML中的叫法) 】
【节点(DOM中的叫法)】
【对象(JS中的叫法)】
