JavaScript 属性ノードとは-フロントエンドQ&A-php.cn

JavaScript 属性ノードとは

青灯夜游

リリース： 2022-02-16 18:39:39

オリジナル

4028 人が閲覧しました

JavaScriptにおいて、属性ノードとは、HTML要素の属性を表す属性オブジェクトを指し、属性ノードの定数は「ATTRIBUTE_NODE」で表され、代表的な定数値は「2」である。この定数を使用してノードタイプを決定できます。

JavaScript 属性ノードとは

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

DOM (Document Object Model) はドキュメントオブジェクトモデルです。 DOM技術を利用すると、要素の動的表示・非表示、属性の変更、要素の追加など、Webページの動的な変化を実現できます。 DOM テクノロジーは、Web ページとのユーザーの対話性を大幅に強化します。

DOM ノードタイプ

DOM ツリー内のノードは、さまざまな方法で分類できます。ノードのレベルに応じて、祖先ノード（現在のノードより上位にあるすべてのノードの総称）、親子ノード（上位ノードと下位ノードの関係を示す）、子孫ノード（現在のノードの下にあるすべてのノードの集合名)、兄弟ノード (同じ親ノードを持つすべてのノードと総称されます) など。

ノードの種類に応じて、主にドキュメントノード、要素ノード、属性ノード、テキストノード、コメントノードに分類できます。さまざまな種類のノードには、特定の値を表す対応する定数があります。この定数を使用して、ノードの種類を決定できます。一般的に使用される HTML DOM ノードの定数表現と、それらが表す値を次の表に示します。

表: HTML DOM ノードタイプとその定数
ノードタイプ	ノードタイプ定数	定数値
ドキュメントノード	DOCUMENT_NODE	9
要素ノード	ELEMENT_NODE	1
属性ノード	ATTRIBUTE_NODE	2
テキストノード	TEXT_NODE	3
コメントノード	COMMENT_NODE	8

#JS 属性ノード

HTML DOM では、属性ノードは HTML 要素の属性を表す属性オブジェクトです。要素は複数の属性を持つことができます。要素のすべての属性は、順序付けされていないコレクション NamedNodeMap に格納されます。 NamedNodeMap 内のノードには、名前またはインデックスによってアクセスできます。

DOM を使用して HTML ドキュメント要素を処理します。要素の属性を処理する必要がある場合があります。この場合は、属性ノードの属性と関連メソッドを使用する必要があります。属性ノードの共通属性と関連メソッドを次の表に示します。

表: 属性ノードの共通プロパティと関連メソッド
プロパティ/メソッド	説明
nodeName \| name	属性オブジェクトを通じて参照され、要素属性の名前を返します。
nodeValue \| value	属性を通じて参照されます。オブジェクト、要素属性の値を設定または返します
Item (ノードの添字)	属性ノードセット内の指定された添字を持つノードを返します
lengh	属性ノードセット内のノードの数を返します
nodeType	タイプ値を返します属性ノードの

注: 属性名とノード名は同じ効果を持ち、属性値とノード値も同じ効果があります。

例: アトリビュートノードを操作します。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>操作属性节点</title>
</head>
<body>
  <a href="ex7-1.html" title="document节点的应用" id="a1">document节点</a>
  <script>
          var oA = document.getElementById(&#39;a1&#39;);
          var aAttr = oA.attributes;//获取a元素的所有属性节点
          console.log(&#39;a元素具有以下属性节点：&#39;);
          for(var i = 0; i < aAttr.length; i++){//遍历a元素的所有属性节点
              console.log(aAttr[i]);
          }
          console.log(&#39;aAttr[0]节点类型为：&#39;+aAttr[0].nodeType);//获取第一个属性节点的类型值
          console.log(&#39;aAttr[0]节点名称为：&#39;+aAttr[0].nodeName);//获取第一个属性节点的节点名
          console.log(&#39;aAttr[0]节点值为：&#39;+aAttr[0].nodeValue);//获取第一个属性节点的节点值
  </script>
</body>
</html>

ログイン後にコピー

item() を使用して属性ノードリストの要素にアクセスすることもできます。aAttr[0] は aAttr.item(0) と同等です。また、aAttr[0].nodeName は aAttr と同等です[0] .name、aAttr[0].nodeValue は aAttr[0].value と同等です。 Chrome ブラウザで上記のコードを実行した結果を図 1 に示します。

JavaScript 属性ノードとは