js DOM篇

 我们都知道javascript由**BOM**、**DOM**和**ECMAScript**三部分组成，DOM英文全称为Document Object Model即**文档对象模型**，也叫文档树模型，我们学习DOM就是学习一套操作html和xml的API（api叫做应用程序接口，通俗来说就是方法）。学习DOM能帮助我们做什么？可以帮助我们设置元素属性，改变元素样式，动态创建元素，总之就是实现对页面文档的增删改查。。。

首先我们要知道文档由什么组成，两个字——节点，节点又分为很多种，比如标签节点、属性节点、文本节点、注释节点等，整个文档是一个文档节点,每个 HTML 元素是标签节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点。。。

这些节点之间有着怎样的关系？

节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

首先我们来学习获取页面元素的方法：

-通过id获取 document.getElementById(id)
-通过标签名获取 document.getElementsByTagName(标签名)
-通过类名获取 document.getElementsByClassName(class)

这里最好使用前两种方法，因为第三种方法ie9以下不支持。
同时H5为我们新增了获取元素的两种api,他们分别是
document.querySelector()和document.querySelectorAll(),这两个类似于jquery的选择器，这两个的区别就是一个返回的是单个元素，另一个返回的伪数组，而且他们接收的参数必须是符合css选择器语法的字符串，目前已经得到ie8+的支持。

（设置）获取元素内容的属性

innerHTML 获取时会获得标签内的所有内容，不但有文本还有标签，设置时，标签会被渲染到界面上，无兼容性
innerText 获取时只能获得标签内的文本内容，（当有嵌套的标签时，也只是能获取标签内的文本），设置时对应的标签会相应的转义到页面上，此方法低版本的火狐不支持，低版本的火狐使用的是textContent属性

> 当获取时，写法：document.getElementById('box').innerHTML;
> 设置时，写法为：document.getElementById('box').innerHTML="<p>哈哈</p>";

除了 innerHTML 属性，也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

<p id="intro">Hello World!</p>

<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

创建节点

document.createElement(eName);　　//创建一个节点
document.createTextNode(text);　　　//创建文本节点

添加节点

document.insertBefore(newNode,referenceNode);　 //在某个节点前插入节点

parentNode.appendChild(newNode);　　　　　　　　//给某个节点添加子节点

复制节点

cloneNode(true | false);　　//复制某个节点 参数：是否复制原节点的所有属性

删除节点

parentNode.removeChild(node);　　//删除某个节点的子节点 node是要删除的节点

注意：为了保证兼容性，要判断元素节点的节点类型(nodeType)，若nodeType==1，再执行删除操作。通过这个方法，就可以在 IE和 Mozilla 完成正确的操作。

nodeType 属性可返回节点的类型.最重要的节点类型是：

元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

属性操作

getAttribute(name)　　　　//通过属性名称获取某个节点属性的值

setAttribute(name,value); //修改某个节点属性的值

removeAttribute(name);　 //删除某个属性

查找节点

parentObj.firstChild;　　//如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObj.firstChild.firstChild…..

parentObj.lastChild;　　//获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用 parentObj.lastChild.lastChild…..

parentObj.childNodes; //获得节点的所有子节点，然后通过循环和索引找到目标节点

获取相邻的节点

curtNode.previousSibling; //获取已知节点的相邻的上一个节点

curtNode.nextSlbling;　　 // 获取已知节点的下一个节点

获取父节点

childNode.parentNode;　　//得到已知节点的父节点

替换节点

replace(newNode,oldNode);

动态创建元素的三种方法

document.write
document.innerHTML
document.createElement