DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
两种：

• 核心DOM:可以操作一切结构文档的API（HTML 和 XML都可以操作）

• 优点：万能 缺点：繁琐
  HTML DOM ：对核心DOM中常用的API的简化 w3c
  优点：简单 缺点：不是万能，只有对部分API的简化
  实际开发中，不区分概念，优先使用简单的API，如果简单的API不能是现实效果，再来用核心的

学习重点：
1，API较多，需熟练掌握操作DOM树的常用API
2，理解DOM树原理

HTML DOM 树形结构:

三大属性：
nodeType 节点类型
专门区分节点的类型：
document 9
element 1
attribute 2
text 3

nodeName 节点名称
document #document
element 全大写的标签名
attribute 属性名
文本节点 #text

nodeValue 节点值
document null
element null
attribute 属性值
text 文本内容

一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

查找

1/直接获取的三个元素
html. document.documentElement
head. document.head
body. document.body
2.节点关系
不但包含有用的元素节点，还包含了看不见的换行/空格干扰
只要已经获得了一个节点，就可以找到周围节点

父子关系
node.parentNode 获得node的父节点
node.childNodes 获取node的所有直接子节点
node.firstChild 获得node下第一个子节点
node.lastChild 获得node下最后一个子节点

兄弟关系
node.nextSibling 获得当前节点的下一个兄弟节点
node.previousSibling 返回当前节点的前一个兄弟节点

获取节点的信息，用元素树
父子关系
elem.parentElement 返回一个父元素对象
elem.children 返回子元素对象的集合 IE8支持
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素对象
兄弟关系
elem.previousElementSibling 返回当前元素的前一个兄弟元素对象
elem.nextElementSibling 返回当前元素的下一个兄弟元素对象 IE9+

例子
1、按id查找
var elem = document.getElementById(“id”); 只能用document调用，且只返回一个元素！
2，按标签名查找
var elems = parent.getElementsByTagName(“标签名”)
注意：返回的是父元素中所有同名标签的元素集合
即使仅一个元素，也会返回一个集合 必须通过加[0]才能获取到
不仅查找直接子节点，而且查找所有子代节点
3、按name属性查找 （查找表单中的元素时）
var elems = document.getElementsByName(“name”); 返回的是一个动态数组 只能用document调用
4，按class属性查找
var elems =parent.getElementsByClassName(“class”)

添加

1、创建新元素
var elem = document.creatElement(“标签名”);
2、设置关键属性
例子：

a.href=“http://www.bailiban.com”; 添加属性
a.innerHTML =“去百里半学习”; 添加内容
3、将新元素添加到DOM树
一个元素对象，只有添加到DOM树才能显示在网页中
1、追加：在父元素的结尾添加新元素（常用）
document.body.appendChild(a);//直接在body中添加
2、插入：在现有子元素之前插入新元素
parent.insertBefore(elem, oldElem);
3、替换：替换现有有子元素
parent.replaceChild(elem, oldElem)
删除元素节点
parent.removeChild(child)删除父节点上的子节点，且返回该删除的节点
a.innerHTML =“”；删除内容

Image:代表页面上的一个img元素

	var img = new Image();
	console.dir(img);
	img.src="koala2.jpg";

Select
属性:
.options:获得select下所有option对象
.selectIndex:获得当前选中元素的下标
.length：可以直接获得option的个数
.value:select中选中的值：2种情况
1、如果选中的option有value属性，则返回value属性
2、如果选中的option没有value属性，则返回内容

.add(option):向select中添加一个option
.remove(i) 删除select下 i 位置的option

Option对象 var opt = new Option(text,value);创建option对象。

修改

修改属性
核心DOM访问属性：
获得属性值： var value = elem.getAttribute(“属性名”);
修改属性值： elem.setAttribute(“属性名”,“value”);
判断是否包含属性：var bool != elem.hasAttribute(“属性名”);
移除属性： elem.removeAttribute(“属性名”);

HTML DOM访问属性：
获得属性值： elem.属性名;
修改属性值： elem.属性名=“value”;
判断是否包含属性：elem.属性名!="";
移除属性： elem.属性名="";
elem.属性 和普通对象的属性一样使用
注意：html中的class属性和ES中class属性冲突，因此HTML中的class要改名为className
内联：elem.style.css属性名
注意： 所有css属性都要去掉横线变驼峰
缺点：获取时，style仅能获得内联样式，无法获得最终应用到元素上的完整样式
attribute vs property 有一些区别
attribute 指穿线在开始标签中的属性
property 保存在内存对象中的属性
核心DOM只能操作出现在页面上的attribute属性，无法操作为出现在页面上的内存中的property属性
HTML DOM可以访问内存中的property属性