DOM编程

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

在一些大型公司中，因为JQuery设计的内容大而广，占用的服务器存储比较大，大型公司一般会使用DOM自行开发类似于JQuery的类库，所以在学习完JQuery后最好也要掌握DOM编程，如果是一个中小型企业的话，一般会直接选择JQuery来编写JS代码。

DOM编程遵循先查找后操作：先查找到标签，然后对查找到的标签进行操作。

查找元素：

1、直接查找：

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

2、间接查找：

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
============上面的节点查找效果不是很好，推荐使用下面元素查找的方式来操作===============

parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

操作：

1、对内容的操作：

innerText   文本(用于成对标签的文本设置)
textContent   文本（同样用于成对标签的文本设置，但ie8不支持）
innerHTML   可以设置或获取html标签及文本内容，推荐使用 
value       值（主要对input、select、textarea的value值得操作，可获取或修改）

当标签对象.属性如果浏览器不兼容的话，那么其返回值为undefined。比如ie8对textContent不支持，假如对div标签对象使用textContent设置中间的文本内容(如 typeof  div标签对象.textContent),那么返回的值类型为undefined。

总结：对于任何浏览器兼容性问题，当对标签对象.属性的话，返回值类型都为undefined

2、对自定义属性的操作：

某些情况下，标签现有的属性不能满足的话，就需要对标签增加额外的自定义标签属性。比如<Input />标签有name  value  style等属性，现需要score属性，那么这时候只能对Input标签增加额外的score属性。

attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签自定义属性
getAttribute(key)         // 获取指定标签自定义属性　
removeAttribute(key)      // 移除标签自定义或自带的属性

3、class的操作：

className                // 获取所有类名
classList.remove(cls)    // 删除指定类
classList.add(cls)       // 添加类

4、标签操作：

　　(1)创建标签　　　　

// 方式一   例如创建一个a标签
var tag = document.createElement('a')
tag.innerText = "标签的文本内容"
tag.className = "创建一个a标签的class样式"
tag.href = "http://www.cnblogs.com/goser"
 
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/goser'>文本内容</a>"

　　（2）操作标签

//例如在div标签里添加a标签
var tag = document.createElement('a')
div_obj.appendChild(tag)
div_obj.insertBefore(tag,div_obj[1])

　　(3) 删除标签

获取要删除的元素       #这里也可以通过局部查找来查找需要删除的子元素
获取要删除元素的父元素
使用父元素.removeChild(删除的子元素)方法删除

　（4）更改标签

第一种方式：
    使用上面的增和删来完成修改
第二种方式：
    首先获取父元素的标签，然后使用 父元素.replaceChild(更改成的元素,被替换的元素)

第三种方式：
    使用setAttribute()方法修改属性
    使用innerHTML属性修改元素的内容

5、样式操作

var obj = document.getElementById('div')
 
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";

6、位置操作

总文档高度
document.documentElement.offsetHeight
  
当前文档占屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距离上级定位高度
tag.offsetTop
  
父定位标签
tag.offsetParent
  
滚动高度
tag.scrollTop

7、提交表单

一般的表单提交要用到input的submit类型的标签，其实在dom中可以对任何一种类型的标签都可以进行submit操作。

document.geElementById('form').submit()

8、其他操作

console.log                 输出框
alert                       弹出框
confirm                     确认框
  
// URL和刷新
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载
  
// 定时器
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

事件：

对于javascript中的事件有很多种，其实常用的也就是

onclick()  onfocus()  onblur() onmouseover()  onmouseout()等。。。

对于事件中的this标签表示当前正在操作的标签。