JavaScript学习-Element类型

1，介绍

• Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。

2，获取标签名

• nodeName属性和tagName属性

  • 这两个属性会返回相同的值，以下面元素为例：

  <div id="myDiv"></div>

  • 可以像下面这样取得这个元素及其标签名

  var div = document.getElementById("myDiv");
  alert(div.tagName);//"DIV"
  alert(div.tagName == div.nodeName); //true

3，HTMLElement

• 所有的HTML元素都是HTMLElement类型或其子类型。
• HTMLElement直接继承自Element类型。
• HTMLElement添加了一些属性，对应于HTML元素中都存在的标准特性。
  
  • id，元素在文档中的唯一标识符。
  • title，有关元素的附加说明信息，一般通过工具提示条显示出来。
  • lang，元素内容的语言代码，很少使用。
  • dir，语言的方向，值为“ltr”(从左到右）或“rtl”（右到左）。
  • className，与元素的class特性对应。
• 下表列出了所有HTML元素以及与之关联的类型(以斜体印刷的元素表示已经不推荐使用了）。
  
  

4，操作特性的DOM方法

• getAttribute()

  • 参数
    
    • 传递的特性名与实际的特性名相同。若不存在，返回null。
    • 参数特性的名称是不区分大小写的。
    • 根据HTML5规范，自定义特性应该加上data-前缀以便验证。
  • 元素的公认的（非自定义的）特性，也都可以通过DOM元素本身的属性来访问。

  alert(div.id);// "myDiv"
  alert(div.my_special_attribute); // undefined(IE除外）
  alert(div.align); // "left"

  • 有两类特殊的特性，对应的属性值与通过getAttribute()返回的值并不相同。
    
    • style特性，用于通过CSS为元素指定样式。
      
      • 通过getAttribut()访问时，返回的style特性值中包含的是CSS文本。
      • 通过属性访问，返回一个对象。因为style属性是用于以编程访问元素样式的，因此并没有直接映射到style特性。
    • onclick这样的事件处理程序特性。
      
      • 通过getAttribut()访问时，会返回相应代码的字符串。
      • 通过onclick属性访问时，会返回一个JavaScript函数。
  • 由于JavaScript以编程方式操作DOM时，开发人员通常不适用getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用getAttribute()方法。
• setAttribute()
  
  • 两个参数：要设置的特性名和值
  • 若存在则覆盖，若不存在，则创建。
  • 通过这个方法设置的特性名会被统一转换为小写形式。
  • 直接给属性赋值可以设置特性的值。不过为DOM添加一个自定义的属性，该属性不会自动成为元素的特性。
• removeAttribute()
  
  • 用于彻底删除元素的特性。

5，attributes属性

• 此属性只有Element类型使用，attributes属性中包含一个NamedNodeMap，与NodeList类似，是一个动态集合。NamedNodeMap对象拥有下列方法。
  
  • getNamedItem(name):返回nodeName属性等于name的节点；
  • removeNamedItem(name)：从列表中移出nodeName属性等于name的节点；
  • setNameItem(node)：向列表中添加节点，一节点的nodeName属性为索引；
  • item(pos)：返回位于数字pos位置处的节点。
• 该属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。
• 适合于遍历的场景

function outputAttributes(element){

    var pairs = new Array(),
        arrtName,
        attrValue,
        i,
        len;
    for(i = 0,len=element.attributes.length;i<len;i++){
        attrName=element.attributes[i].nodeName;
        attrValue=element.attributes[i].nodeValue;
        pairs.push(attrName + "=\"" + attrValue+ "\"");
    }
    return pairs.join(" ");
}

6，document.createElement()方法创建新元素

• 参数:要创建元素的标签名。
  
  • 不区分大小写。但是在XML文档中，则是区分大小写的。
• 创建新元素的同时，也为新元素设置了ownerDocuement属性。
• 将新元素添加到文档树中，浏览器才会修改显示效果。可以使用appendChild(),insertBefore()或replaceChild()方法。

7，元素的子节点

• 元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。
• 代码为例

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

• IE的解析与其他浏览器的异同
  
  • IE解析会有3个子节点，分别是3个\<\li>元素。
  • 其他浏览器，\<\ul>会有7个子元素，包含3个\<\li>元素和4个文本节点（之间的空格）
• 可以通过判断节点类型nodeType属性来判断，筛选出自己需要的节点。
• 通过getElementsByTagName(“li”)方法获取元素，\<\ul>的后代如果包含更多层次的后代元素，那么各个层次中包含的\<\li>元素也都会返回。