DOM

查找HTML元素常用的三种方法：

1. 通过标签的id查找：document.getElementBuId(“标签的id”);

>   <h1 id="header">标题一</h1>
>-----------
>    `document.getElementById("header")`

2. 通过标签名查找：document.getElementsByTagName(“标签名”); 这种方法返回的是一个数组

   	 <input type="text" name="Name" id="UserName" value="" /><br />
         <input type="text" name="Name" value="" /><br />
     	  <input type="text" name="Name" value="" /><br />
        <input type="text" name="Name" value="" /><br />
         <input type="text" name="Name" value="" /><br />
         ----------------------------------------------------
         var arr1 = document.getElementsByTagName("input");
   

3. 通过类名查找：

 <p class="test">
      白日依山尽，黄河入海流。
   </p>            
    -----------------------------------------
 document.getElementsByClassName("test");

4. 还有一种查询带有name属性的元素

   > 	<input type="text" name="Name" value="" /><br /> 
    > 	document.getElementsByName("Name");

详解：

1.getElementByID方法 它是document对象特有的函数。该方法返回一个与那个有着定id属性值的元素节点对应的对象
2.getElementsByTagName方法 可返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。该方法也只有一个参数，该参数是标签的名字。
3.getElementsByClassName方法 HTML5 DOM中新增的一个方法。这个方法让我们能通过class属性中的类名来访问元素。
4.getElementsByName方法 getElementsByName() 方法可返回带有指定名称的对象的集合该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是id 属性。 另外，因为一个文档中的 name
属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName()
方法返回的是元素的数组，而不是一个元素。

innerText与innerHTML的区别
innerText不能解析HTML标签只支持纯文本，innerHTML可以解析标签和纯文本。

getAttribute与setAttribute
getAttribute方法只有一个参数，我们要查询的属性的名字。该方法不属于document对象，只能通过元素节点对象调用。

setAttribute方法允许我们用属性节点的值做修改。与getAttribute一样，setAttribute也只能用于元素节点。 setAttribute()方法需要我们向它传递两个参数：obiect.setAttribute(attribute,value)；

 <input type="button" name="name" value="改变HTML内容"  />
 --------------------------------------------------------
   var str = document.getElementsByName("name").getAttribute("value");
document.getElementByName("name").setAttribute("value","like");

常用属性
1.nodeName 属性 :节点名称
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

>   var ele = document.getElementById("container");
>      	alert(ele.nodeName);

2.nodeValue 属性：节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

>    var val = document.getElementById("container");
> 	     	//alert(val.childNodes[0].nodeValue);

3.nodeType属性，可以使用nodeType属性来获取节点类型。
nodeType属性共有12种取值，其中仅有三种较常用：
元素节点的nodeType属性值是1；
属性节点的nodeType属性值是2；
文本节点的nodeType属性值是3。

alert(val.nodeType)

4.childNodes属性
childNodes属性可以用来获取任何一个元素的所有子元素，是一个包含这个元素全部子元素的数组。
*属性节点不是元素的子节点

 var arr = val.childNodes;

5.firstChild、lastChild属性
firstChild 获得第一个子节点
lastChild 获得最后一个节点

>		 ele.firstChild;
>      	ele.lastChild;
>      	//alert(ele.firstElementChild.nodeType);