JavaScript ドキュメント オブジェクト モデル - 要素タイプ

Document タイプに加えて、Element タイプも JavaScript プログラミングで最も一般的に使用されるタイプです。 Element タイプは、HTML または XML 要素を表すためによく使用され、要素のタグ名、サブノード、および属性へのアクセスを提供します。要素ノードには次の特性があります:

nodeType の値は 1 です。

nodeNameの値は要素のタグ名です。

nodeValue の値が null です。

parentNode の値は Document または Element の場合があります。

その子ノードは、Element、Text、Comment、Processingstruction、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、ドキュメント内の要素の一意の識別子) に対応します。

• タイトル、要素に関する追加の説明情報は、通常、ツールチップバーを通じて表示されます。

• 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";

属性を取得

各要素には 1 つまたは複数の属性があり、要素の属性を操作するための 3 つの DOM メソッドがあります。上記の方法任意の属性の使用法に使用できます。例:

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

  ヒント: 属性名では大文字と小文字が区別されません。つまり、「ID」と「id」は同じ属性を表します。
• 2 つの特別な属性がありますが、対応する属性名がありますが、属性の値は getAttribute() で取得される値と同じではありません。最初の属性は style 属性で、CSS を通じて要素のスタイルを設定するために使用されます。 getAttribute() を通じてアクセスすると、返されるスタイル属性値は含まれる CSS テキストではなく、オブジェクトです。 2 つ目は、onclick のようなイベント ハンドラーです。要素で使用すると、onclick に JavaScript コードが含まれており、getAttribute() を通じてアクセスすると、JavaScript 関数が返されます。
  属性の設定

getAttribute() に対応するのは setAttribute() メソッドで、このメソッドは 2 つのパラメーター (設定する属性の名前と値) を受け取ります。設定する属性がすでに存在する場合、setAttribute() メソッドは既存の値を指定された値に置き換えます。属性が存在しない場合、setAttribute() メソッドは属性を作成し、対応する値を設定します。例:

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

setAttribute() メソッドを通じて HTML 属性とカスタム属性の両方を操作できます。このメソッドで設定した属性名は一律に小文字に変換されます。たとえば、「ID」は「id」に変換されます。

属性割り当てを直接使用して属性値を設定することもできます

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

ただし、次のように 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）！