JS中DOM重点基础知识实验（全）
文档：一个页面就是一个文档。
元素：页面中所有的标签都是元素，也可以叫对象。
节点：页面中所有的内容都是节点，标签，属性，文本。
在JS中操作dom，设置css样式时，样式的名称如background-color，在js中一律用驼峰写法，backgroundColor
通过JS设置元素行内样式，操作style属性即可
通过JS设置元素的类样式，不用class关键字，应使用className
a 标签点击事件有默认的跳转，想要阻止默认的跳转，在点击事件函数的最后return false；
若点击事件函数中有多条语句执行，封装成函数的形式，应将函数返回，才能阻止a的默认跳转。
JS中的事件：onclick，onmouseover，onmouseout，onfocus，onblur等等。
原生JS选择器：
document.getElementById(),
document.getElementsByClassName(),
document.getElementsByTagName().
document.getElementsByName()
H5选择器：
document.querySelector(),
document.querySelectorAll()
TextContent与innerText
IE8不支持：textContent
InnerText和innerHTML
InnerText设置：按纯文本的方式解析内容，innerHTML设置：按html的方式解析内容
InnerText获取：不仅能获得当前元素的内容，还能获取子元素中的文本内容。
InnerHTML获取：同样能获取到子元素，但包含了子元素的标签
结果：
获取/设置/删除自定义(自带属性)属性：getAttribute()/setAttribute()/removeAttibute()
Tab的实现，
节点分为：标签节点，属性节点，文本节点
节点的属性：
nodeType：取值（1，2，3）
1代表标签，2代表标签的属性，3代表文本内容
nodeName：标签节点的nodeName是大写的标签名字，属性节点的nodeName是小写的属性名字，文本节点的nodeName是#text
nodeValue：标签节点的的nodeValue是null，属性节点的nodeValue是属性值，文本节点的nodeValue是文本内容
获取标签的父节点/父元素？
parentNode/parentElement
-------------------------------------------------------
获取子节点/子元素
ChildNodes/children
Nodelist中有9个节点的原因在于文本是节点，空白文本也是节点，一般可以认为：
子节点的个数 = 子元素的个数 * 2 +1（9 = 4*2+1）
如何获取属性属性节点？
GetAttributeNode()
对应div中id这个属性节点来说，它的nodeType=2,nodeName=属性id，nodeValue属性值box4，基本上用不上。了解即可。
从这里开始的代码，在IE8中存在问题,以下代码是运行再chrome浏览器中的效果。
获取第一个子节点/第一个子元素
FirstChild/firstElementChild
在IE8中（FirstChild代表着第一个子元素，firstElementChild无法识别undefined）
--------------------------------------------------
同理，获取最后一个子节点/最后一个子元素
LastChild/lastElementChild
在IE8中（lastChild代表着最后一个子元素，lastElementChild无法识别undefined）
---------------------------------
获取某个元素的前一个兄弟节点/前一个兄弟元素
PreviousSibling/previousElementSibling
在IE8中（PreviousSibling代表前一个兄弟元素，previousElementSibling无法识别undefined）
--------------------------------------
同理，获取某个元素的后一个兄弟节点/后一个兄弟元素
NextSibling/nextElementSibling
在IE8中（NextSibling代表着后一个兄弟元素，nextElementSibling无法识别undefined）
封装节点操作的兼容代码
获取任意元素的第一个子元素
同理获取任意元素的最后一个子元素
创建元素的方式
- document.write(标签以及内容)
- 元素对象.innerHTML = ‘标签以及内容’
- Document.createElement(“标签的名称’);
Document.write(()在页面加载完成时，向body中写入内容，会将body，head中的所有内容清空后，插入当前内容。
当事件触发时执行document.write()，意味着页面加载完成，当点击按钮时，页面中其他内容都会被清空。
-------------------------------------
使用innerHTML向标签内添加内容，同样会覆盖当前标签的内容，如果反复点击按钮添加元素，会导致反复的赋值，也就是反复的覆盖之前插入的同样内容的标签
点击按钮前
点击按钮后
-------------------------------
Document.createElment()创建元素，通过点击按钮会，反复的创建元素对象，然后通过appendChild（）向后追加，插入到目标容器中。
点击按钮前：
点击按钮后：
反复点击：
应该避免反复点击，创建预期之外的元素。
另外循环中不要写匿名函数，这样效率会很低。
将标签追加到目标容器中的方法
AppendChild():向后追加
InsertBefore(a,b) 把a插入到b的前面
首先是要插入到$$(‘box’)标签对象的内的，但具体在位置，由后面两个参数确定，
Pobj是创建的p元素，p元素插入到$$(‘box4’)标签对象的第一个子元素前面。
点击按钮前：
点击按钮后：
移除当前元素中的子元素
A.RemoveChild（B），含义中：从A中删除子元素B
如何控制无论按钮点击多少次，都只创建一次呢？
有则删除，无则创建！
第一次点击按钮的时候，元素创建并且插入了，第二次的时候，通过id可以找到之前插入的元素，那么就删除，然后再创建，插入，以此类推。着从页面上看，无论按钮点击多少次，都只会有一个元素。
事件的绑定：当为同一个元素多次绑定同一事件，则最后一次事件绑定生效。
结果：
那么如何让绑定的onclick事件都生效呢？
其实，还有其他绑定事件的方式：addEventListener()
参数1：事件名称，没有on，点击事件就是click
参数2：回调函数
参数3：布尔类型，
结果：
通过这种方法，为同一事件绑定，每次绑定的事件都会触发，不会被覆盖，但是兼容性存在问题。（IE8不支持。）
为了解决IE8兼容性的问题，使用AttachEvent()
参数1：事件的类型，如点击事件，onclick
参数2：回调函数（可以是命名函数）
封装兼容性事件函数：为任意元素，绑定任意事件
-----------------------------------------------------------
在chrome下，addEventListener兼容，this的值是绑定事件的dom对象
-------------------------------------------------------------
在IE8下，attacheEvent兼容，this的值是window
为元素解除事件绑定
当使用onclick 绑定事件时，清除事件只要将onclick指向null。
--------------------------------------------------------------------------------
当使用addEventListener为元素添加多个相同事件，应该命名函数作为事件处理函数，便与在使用removeEventListener移除事件，方便移除具体的事件处理函数。
----------------------------------------------------------------------
同理，IE8下添加事件和解绑事件
封装对应的解绑事件的函数
事件冒泡
多个元素嵌套，由层级关系，绑定了相同的事件类型，当内部的元素出发事件，外面的元素也会出发事件。
当点击box1时：
当点击box2时：
当点击box3时：
如果都绑定了相同的事件，但是它们的事件处理函数可以完全不通，不能因为触发子元素事件的同时，由于事件冒泡，也触发到外层元素的事件。你可能只想干一件事，可是，由于事件冒泡却多做了几件事，这样反倒会画蛇添足。
如何阻止事件冒泡？
Window.event.cancelBubble = true,火狐浏览器不支持。Window.event是ie中标准事件对象
e.stopPropagation() IE8不支持这个函数，且IE8中没有事件处理的默认参数，在其他浏览器中是有e这个事件处理的默认参数的。E是火狐的标准事件对象
Box1点击时：
Box2点击时：
Box3点击时：
事件有三个阶段：事件捕获阶段，事件目标阶段，事件冒泡阶段
对于addEventListener()的第三个参数而言，在值是false情况下，事件处理函数的触发按照事件冒泡来触发，而在值等于true的情况下，事件处理函数的触发按照事件捕获阶段触发，事件捕获与事件冒泡过程相反。事件冒泡是从内向外触发事件函数，而事件捕获是从外向内触发事件函数。即addEventListener()的第三个参数是控制事件阶段（控制触发函数的过程）
一般绑定事件，默认都是设置成事件冒泡阶段，很少设置成捕获阶段。
---------------------------------------------------
Bom
浏览器中的顶级对象是window
页面中的顶级对象是document
在全局环境下，也就是js的文件中，用var定义的变量，默认是挂在window对象上的
----------------------------------------------------------------
页面加载事件
Window.onload :当页面上所有的标签，属性，文本，外部引用加载完成时，才会触发。
在IE8中：
Window.onunload 页面关闭后触发事件
Window.onbeforeunload 页面关闭前触发函数
Location对象
Location.href = ‘’ 跳转到指定的网页
Location.assign() 挑战到指定的网页
Location.reload() 重新加载页面，相当于刷新
Location.replace() 跳转到新的页面，不能回到初始页面
History 对象
History.back()
History.forward()
History.go()
Navigator对象
UserAgent 通过userAgent可以判断浏览器类型
Platform 通过platform可以判断浏览器所在的系统平台
------------------------------------------------------------------
定时器、
Id = Window.setInterval() :设置一个定时器。
Window.clearInterval(id) 清除定时器。
点击按钮前，每秒钟获取当前的时间
点击按钮后：停止。
----------------------------------------------------
SetTimeout() :设置一次性的定时器
clearTimeout()：清除定时器所占用的内存空间
1秒中之后，获取当前时间，输出。只执行一次。即使只执行一次，也需要清理所占用的内存空间。