HTML DOM
一、节点概念
整个文档 是一个节点、元素 是节点、元素属性 是节点、元素内容 是节点注、释 也是节点
例如：
通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点
hello HTML DOM
二、获取节点
1、获取元素节点
一个元素id唯一
hello HTML DOM
2、通过标签名获取元素节点
hello javascript
hello BOM
hello DOM
3、通过类名获取元素节点
hello javascript
hello BOM
hello DOM
4、通过表单元素的name获取元素节点
用户名
密码
5、获取属性节点
通过元素节点的attributes获取其下所有的属性节点。
hello HTML DOM
6、获取内容节点
通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
hello HTML DOM
三、节点属性
1、节点名
nodeName表示一个节点的名字
document.nodeName 文档的节点名，是 固定的#document
div1.nodeName 元素的节点名，是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名，是固定的 #text
hello HTML DOM
2、节点值
document.nodeValue 文档的节点值，是 null
div1.nodeValue 元素的节点值，是null
div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值，是内容
hello HTML DOM
3、节点类型
document.nodeType 文档的节点类型，是 9
div1.nodeType 元素的节点类型，是 1
div1.attributes[0].nodeType 属性的节点类型，是 2
div1.childNodes[0].nodeType 内容的节点类型，是 3
hello HTML DOM
4、修改元素的文本内容
修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。 效果是一样的
hello HTML DOM
5、元素上的属性
a.元素上的属性，比如id,value 可以通过 . 直接访问（input1.id）
b.自定义属性，那么可以通过如下两种方式来获取
getAttribute("test")
attributes["test"].nodeValue
hello HTML DOM
四、练习
1、验证账号是否存在
hello HTML DOM
2、修改src属性切换图片
3、判断整数
五、DOM 样式
一个元素节点的style属性即对应的css
1、显示和隐藏
这是一个div
2、改变背景色
style.backgroundColor 这里的backgroundColor和css中的背景色background-color 是有所不同
Hello HTML DOM
六、事件
1、焦点
当组件获取焦点的时候，会触发onfocus事件
当组件失去焦点的时候，会触发onblur事件
2、鼠标事件
3、键盘事件
4、点击事件
5、变化事件
6、提交事件
7、当前组件
8、取消事件发生
1. 在调用函数的时候，增加一个return
2. 在函数中，如果发现用户名为空，则返回false
3. 当onSubmit得到的返回值是false的时候，表单的提交功能就被取消了
七、创建节点
1、创建元素节点
通过createElement 创建一个新的元素节点
接着把该元素节点，通过appendChild加入到另一个元素节点div1中
Hello HTML DOM
2、创建文本节点
首先创建一个元素节点p (p是p标签，不是随便命名的变量名)
接着通过createTextNode创建一个内容节点text
把text加入到p
再把p加入到div
Hello HTML DOM
3、创建属性节点
首先创建一个元素节点a
接着创建一个内容节点content
把content加入到a
然后通过createAttribute创建一个属性节点 href
设置href的值为http:12306.com
通过setAttributeNode把该属性设置到元素节点a上
最后把a加入到div
Hello HTML DOM
4、动态创建表格
八、删除节点
1、删除元素节点
第一：先获取该元素的父节点
第二：通过父节点，调用removeChild 删除该节点
安全的div
即将被删除的div
2、删除属性节点
第一：先获取该元素节点
第二：元素节点，调用removeAttribute删除指定属性节点
http://12306.com
3、删除文本节点
1. 通过childNodes[0] 获取文本节点
注:children[0] 只能获取第一个子元素节点，不能获取文本节点
2. 通过removeChild删除该文本节点
但是这种方式比较麻烦，一般都是直接通过innerHTML设置为空即可。
注: 通过innerHTML=""的方式，同样会导致文本子节点被删除。
这里是文本
九、替换节点
1. 获取父节点
2. 创建子节点
3. 获取被替换子节点
4. 通过replaceChild进行替换
第一个div
第二个div
第三个div
十、插入节点
1、追加节点
通过appendChild追加节点。 追加节点一定是把新的节点插在最后面
1. 创建新节点
2. 获取父节点
3. 通过appendChild追加
第一个div
第二个div
第三个div
2、插入节点
1. 创建新节点
2. 获取父节点
3. 获取需要加入的子节点
4. 通过insertBefore插入
注: insertBefore的第一个参数是新元素，第二个参数是插入位置
第一个div
第二个div
第三个div