全栈JavaScript之路（五）学习 HTML 元素

( 一 )HTML 元素的类型

所有的HTML 元素都是 HTMLElement 类型。（HTMLElement 类型 继承 自Element类型）

HTMLElement 类型 有很多子类型，如 HTMLHtmlElement, HTMLDivElement,等等。

每一个HTML 元素 都是通过 `子类型` 实例化的。

来个测试

<div id='"myDiv"></div>
<script>
var div = document.getElmentById("mydiv");
alert(div.constructor) // function HTMLDivElement () { [native code] } 
</script>

每一个元素都有 id, class,title,lang,dir 属性.

简单得查看查一元素的类型，以及属性的函数:

  function lookTagArr(tagname){
        var tag = document.getElementsByTagName(tagname)[0];
        document.write(tag.nodeName);//打印元素的名称(返回大写的元素名称！)
        document.write(tag.constructor);//打印 元素的 类型（构造器函数）
        document.write(Object.keys(tag));//打印出元素的所有可迭代属性
          
    }

( 二 )  获取，与操作 HTML 元素的特性 

       主要有三个方法; getAttribute(),setAttribute,removeAttribute(), HTML元素的特性名称不区别大小写。

var div = document.getElementById("myDiv");
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd"
alert(div.getAttribute("title")); //"Body text"
alert(div.getAttribute("lang")); //"en"
alert(div.getAttribute("dir")); //"ltr"

注意，传递给getAttribute()的特性名与实际的特性名相同。因此要想得到class 特性值，应
该传入"class"而不是"className"，后者只有在通过对象属性访问特性时才用。如果给定名称的特性

不存在，getAttribute()返回null。 

    ( 附：这里顺便说一下，当属性名与javascript 关键字相冲突的疑惑：如果属性名与javascript 关键字相冲突，除于 class 特性名，对应 className 属性之外，其它有冲突的 对象特性名，对应的属性名为; html+属性名例如 <lable for="" ><lable> 

<label for='a' label>
<script>
  var f = document.getElementsByTagName('label')[0].htmlFor; //与javascript 关键字有冲突的 for 特性名，对应 htmlFor 属性 
    alert(f);
</script>

)

通过getAttribute()方法也可以取得自定义特性（即标准HTML 语言中没有的特性）的值，以
下面的元素为例：
<div id="myDiv" my_special_attribute="hello!"></div>
这个元素包含一个名为my_special_attribute 的自定义特性，它的值是"hello!"。可以像取
得其他特性一样取得这个值，如下所示：
var value = div.getAttribute("my_special_attribute");
不过，特性的名称是不区分大小写的，即"ID"和"id"代表的都是同一个特性。另外也要注意，根
据HTML5 规范，自定义特性应该加上data-前缀以便验证。

所有公认的标准的元素特性，都可以通过"元素.(点)特性" 的形式访问，操作;

对于自定义特性，有些浏览器并不包括在元素属性中， “元素.（点）特性” ，返回值为 undefined.

举例说明:

<div id="myDiv" align="left" my_special_attribute="hello!"></div>
alert(div.id); //"myDiv"
alert(div.my_special_attribute); //自定义特性，undefined。（IE 除外）
alert(div.align); //"left"

 设置元素的特性，使用 setAttribute() 方法，此方法接受两个参数，特性名，特性值。如果特性值已存在，则以指定的值替换现有的值，

如果特性不存在，则创建新特性并设置指定的值。

div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");

通过setAttribute()方法既可以操作HTML 特性也可以操作自定义特性。通过这个方法设置的
特性名会被统一转换为小写形式，即"ID"最终会变成"id"。

除自定义特性之外的所有特性都是属性，所以直接给属性赋值可以设置特性的值，如下所示。

div.id = "someOtherId";
div.align = "left";

不过，像下面这样为DOM元素添加一个自定义的属性，该属性不会自动成为元素的特性。

div.mycolor = "red";
alert(div.getAttribute("mycolor")); //null（IE 除外）

这个例子添加了一个名为mycolor 的属性并将它的值设置为"red"。在大多数浏览器中，这个属
性都不会自动变成元素的特性，因此想通过getAttribute()取得同名特性的值，结果会返回null。
可是，自定义属性在IE 中会被当作元素的特性，反之亦然。

再说一下，移动元素特性，removeAttribute(),这个方法会删除掉 HTML元素的特性的值，还有属性本身。（IE5 及更老的版不支持此方法）

（三） attributes 属性

        Element 类型 是使用attributes 属性的 唯一类型。 attributes 中 包含 一个NamedNodeMap,与Nodelist一样，是一个动态的集合，元素的每一个特性，用Attr类型的节点表示，每一个节点都存储在NamedNodeMap 集合对象中，NamedNodeMap 对象有以下方法:

    getNamedItem(name),removeNamedItem(name),setNamedItem,item(pos),

         attributes 属性中包含一系列节点，每个节点的nodeName 就是特性的名称，而节点的nodeValue就是特性的值。要取得元素的id 特性，可以使用以下代码

  

var id = element.attributes.getNamedItem("id").nodeValue;

     也可以通过通过属性的形式：

var id = element.attributes["id"].nodeValue;

 也可以这样来设置特性值

element.attributes["id"].nodeValue = "someid";

一般来说，由于前面提到的attributes 的方法不够方便，因此更多的时候会使用
getAttribute()、removeAttribute()和setAttribute()方法。

但是 arrtibutes 属性 也是有用的，特别是你在 要遍历HTML 元素特性的时候

再说说移除元素特性的两种方法的不同，

调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果相同——直接删
除具有给定名称的特性。下面的例子展示了两个方法间唯一的区别，即removeNamedItem()返回表示
被删除特性的Attr 节点。

（五） 创建html元素

        使用document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML 文档中不区分大小写，而在XML（包括XHTML）文档中，则是区分大小写的。例如，使用下面的代码可以创建一个<div>元素。

var div = document.createElement("div")

增加特性:

div.id = "myNewDiv";
div.className = "box";

增加到文档树中:

document.body.appendChild('div');

（六） 元素的子节点

  element.childNodes, 返回 NodeList 对象，不同的浏览器 处理Element 子节点不同，例如在IE 中 空行也是一个节点。

<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul >

以上代码段在IE 中 , ul ,会有 7个子节点（其中四个空行）。chrome 中 ，只有 3 个子节点。

为了兼容浏览器间的这一差别。这意味着在执行某项操作以前，通常都要先检查
一下nodeTpye 属性，如下面的例子所示。

for(var i = 0;i<element.childNodes.length;i++) {
    if(element.childNodes[i].nodeType == 1){
    //dosomething
}

在上面的例子中，如何要取得所有的li 节点，还可以这样:

var ul = document.getElementById("myList");
var li = ul.getElementByTagName("li");

这个li 对象，也是 NodeList 类型，不过如果 li 中还包括其它的li ，则这个NodeList 中 都会包含。