JavaScript文件物件模型-Element類型

除了Document類型之外，Element類型是JavaScript程式設計中最常使用的類型。 Element類型常用於表現HTML或XML元素，提供對元素標籤名稱、子節點及特性的存取。 Element節點具有以下的特點：

nodeType的值為1。

nodeName的值為元素的標籤名稱。

nodeValue的值為null。

parentNode的值可能是Document或Element。

它的子節點可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。

要存取元素的標籤名稱可以使用nodeName屬性，也可以使用tagName屬性，這兩個屬性會傳回相同的值，例如下面的範例：

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

可以像下面這樣取得這個元素的標籤名稱：

var div = document.getElementById("myDiv");
console.info(div.tagName);                 //输出“DIV”
console.info(div.tagName == div.nodeName); //true

在HTML中，標籤總是以大寫字母來表現，因此div.tagName會輸出大寫的「DIV」。而在XML（包括XHTML）中，標籤名則會於原始碼中的標籤保持一致。因此在比較元素的標籤名是否一致的時候，最好將它們轉換為小寫在比較。

//错误的写法
if(element.tagName == "div"){
   
}
//正确的写法
if(element.tagName.toLowerCase() == "div"){
   
}

 HTML元素

所有的HTML元素都由HTMLElement類型來表示，不是透過這個類型，也是透過它的子類型來表示。 HTMLElement類型直接繼承自Element類型，並加入了一些屬性。新增的這些屬性分別對應於每個HTML元素中都存在的系列特性：

• id，元素在文件中唯一的識別碼。

• title，有關元素的附加說明信息，一般會透過工具提示條來顯示。

• lang，元素內容的語言。

• dir，語言的方向，值為「ltr」（從左向右顯示），或「rtl」（從右向左顯示）。

• classname，元素元素的class特性對應，即為元素指定的CSS類別。

上面的這些屬性都可以用來取得或修改對應的特性值。例如下面的例子：

<div id="myDiv" title="jQuery之家" dir="ltr">jQuery之家</div>

我們可以在控制台中輸出上面的屬性值：

var div = document.getElementById("myDiv");
console.info(div.id);
console.info(div.className);
console.info(div.title);
console.info(div.lang);
console.info(div.dir);

要給這些屬性賦值，可以像下面這樣操作：

div.id = "otherId";
div.className = "otherClass";
div.title = "otherTitle";
div.lang = "en";
div.dir = "rtl";

 取得屬性

或多個屬性，操作元素屬性的DOM方法有3個，分別是：
getAttribute()
setAttribute()
removeAttribute()

removeAttribute()屬性使用，例如：

var div = document.getElementById("myDiv");
console.info(div.getAttribute("id"));
console.info(div.getAttribute("class"));
console.info(div.getAttribute("title"));
console.info(div.getAttribute("lang"));
console.info(div.getAttribute("dir"));

透過getAttribute()方法也可以取得自訂的屬性（即標準HTML語言中沒有的屬性名稱），例如：

<div id="myDiv" my-attribute="hello">自定义属性</div>

var div = document.getElementById("myDiv");
console.info(div.getAttribute("my-attribute"));   //hello

屬性的值。

div.setAttribute("id","myDiv");
div.setAttribute("class","div-class");
div.setAttribute("title","div-title");

提示：屬性名稱不區分大小寫，即"ID"與"id"代表同一個屬性。

有兩個特殊的屬性，它們雖然有對應的屬性名，但是屬性的值與透過getAttribute()取得的值並不相同。第一個屬性是style屬性，用來透過CSS來為元素賦予樣式。透過getAttribute()存取時，返回的style屬性值中並不是包含的CSS文本，而是會傳回一個物件。第二個是像onclick這樣的事件處理程序。在元素上使用的時候，onclick中包含的是JavaScript程式碼，如果透過getAttribute()來存取的時候，則會傳回一個JavaScript函數。

 設定屬性

與getAttribute()相對應的是setAttribute()方法，該方法接收兩個參數：要設定的屬性名稱和值。如果要設定的屬性已經存在，setAttribute()方法會以指定的值取代現有的值，如果屬性不存在，setAttribute()方法會建立該屬性並設定對應的值。例如：

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

透過setAttribute()方法既可以操作HTML屬性，也可以操作自訂的屬性。透過這個方法設定的屬性名稱會被統一轉換為小寫形式，例如「ID」會被轉換為「id」。

🎜也可以直接使用屬性賦值的方式來設定屬性值🎜

div.myColor = "red";
alert(div.getAttribute("myColor")); //返回null

🎜但是像下面這樣為DOM元素添加一個自訂屬性，這個屬性不會自動成為元素的特性：🎜

div.myColor = "red";
alert(div.getAttribute("myColor")); //返回null

要删除一个元素的特性，可以使用removeAttribute()方法，该方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，也会从元素中完全删除这个特性。例如：

div.removeAttribute("class");

 attribute属性

Element类型是唯一一个使用attribute属性的DOM节点类型。attribute属性中包含一个NamedNodeMap，于NodeList相似，也是一个动态的集合。元素的每一个特性都由一个Attr节点表示，每一个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有以下一些方法：

• getNamedItem(name)：返回nodeName属性等于name的节点。

• removeNamedItem(name)：从列表中移除nodeName属性等于name的节点。

• setNamedItem(name)：向列表中添加节点，以节点的nodeName为索引。

• item(pos)：返回位于pos位置处的节点。

attribute属性包含一系列的节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。要取得元素的id，可以使用下面的方法：

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

也可以通过方括号的方式来简写上面的代码：

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

也可以通过这种语法来设置属性值：

element.attribute["id"].nodeValue = "myDiv";

调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果一样：删除给定名称的元素特性。但是它们之间也有一些区别，removeNamedItem()方法会返回被删除特性的Attr节点：

var oldAttr = element.attribute.removeNamedItem("id");

 创建元素

我们通过document.createElement()方法可以创建一个新的元素。这个方法只接受一个参数：要创建的元素的标签名称。这个标签名称在HTML文档中不区分大小写，而在XML文档中则是要区分大小写的。例如使用下面的代码来创建一个新的元素：

var div = document.createElement("div");

在使用createElement()创建元素的同时，也为元素设置了ownerDocument属性。同时，我们还可以操作元素的特性，为它添加更多的子节点，例如：

var div = document.createElement("div");div.id = "myDiv";div.className = "div-class";

在新元素上设置这些特性只是为元素添加了相应的信息。由于新元素还没有被添加到文档树中，所以这些特性不会浏览器的显示。要把新元素添加到文档树中，可以使用appendChild()、insertBefore()、replaceChild()方法，例如下面的代码：

var div = document.createElement("div");
document.body.appendChild(div);

一旦新元素被添加到文档树中，浏览器就会立刻展现该元素。之后，对该元素所做的任何修改都会在浏览器中被反应出来。

 元素子节点

元素可以有任意数量的子节点和后代节点。元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。不同的浏览器对待这些节点有不同的处理方法，以下面的代码为例：

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

如果是IE浏览器来解析这段代码，那么

元素会有3个子节点，分别是3个
• 元素；如果是其他浏览器来解析，
  元素都会有7个子节点，包括3个
  • 元素和4个文本节点（表示
  • 元素之间的空白符）。如果像下面这样删除了元素之间的空白符号，那么所有的浏览器都会返回相同的子节点数量。

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

    
    

    对于上面的代码，

    元素在任何浏览器都会包含3个子节点。如果你需要通过childNodes来遍历子节点，那么一定要注意浏览器之间的这一差别。这就意味着在执行某项操作之前，我们需要检查一下nodeType属性，例如下面的代码：

    for(var i = 0,len = element.childNodes.length; i < len; i++){
      if(element.childNodes[i].nodeType == 1){
        //执行某些操作...
      }
    }

    这个例子会循环遍历特定元素的每一个子节点，在子节点的nodeType类型为1时（表示元素节点），才执行某些操作。

    如果想通过某个特定的标签名称来获取子节点和后代节点，可以使用getElementsByTagName()方法。在通过元素调用这个方法的时候，除了搜索起点是当前元素之外，其它的都与通过document来调用这个方法是一样的，因此，搜索的结果只会返回当前元素的后代。例如，想要取得

    元素包含的所有
    • 元素，可以这样写代码：

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

      上面的

      元素中只包含直接的
      • 子元素。如果它包含更多层次的后代子元素，那么各个层次包含的
      • 元素也一起会被返回。

        以上就是JavaScript文档对象模型-Element类型的内容，更多相关内容请关注PHP中文网（www.php.cn）！