JavaScriptでのAttr(dom内の属性)の操作例説明

著者：Eve Cole 更新時間：2025-02-14 23:24:02

次のようにコードをコピーします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<頭>

<title>20120430dom操作属性node.htm</title>

//Attr (属性) はノードですが、firstChild や childNodes を使用してアクセスすることはできません。

関数 testBtn() {

// var myNode = document.getElementById("btn");// 要素タグを取得

// var myNodeName = myNode.nodeName // 上記のラベルの名前をボタンとして取得します。

// var x = myNode.attributes["onclick"].nodeType; //atrributes は属性配列です。この文の意味は、属性としてラベル「btn」を持つノードタイプ = 2 を見つけることです。

// if (x == 2) {

//alert("属性ノードにアクセスしています!");

// }

//以下はノードの属性を変更するコードです==================================== ==== =========================

//=============================================== ===========================================

var myNode = document.getElementById("btn");//要素タグを取得

var x = myNode.getAttribute("id");//ラベルの id 属性を取得します

myNode.setAttribute("value", "test");//ラベルの id 属性を変更します

var y = myNode.getAttribute("値");

alert("id の属性が "" + x + "" から "" + y + """ に変更されました);

//以下は要素に属性を追加する======================================= === ============================

//=============================================== ===========================================

var myAtrr = document.createAttribute("クラス");

myAtrr.nodeValue = "クラススタイル";

myNode.setAttribute(myAtrr);

// getAttributeNode と getAttribute の違いは、属性値を取得することです - getAttribute()

//getAttribute("") メソッドは属性の値を返します。

//属性値の取得 - getAttributeNode()

//getAttributeNode("") メソッドは属性ノードを返し、getAttributeNode('').value はノード値を取得します。

//ブラウザによって結果は異なります。ここでは詳細な調査は行いません。============================= ====== ==============

if (myNode.getAttributeNode("クラス") != null)

alert("正常に追加されました!!");

それ以外

alert("正常に追加されませんでした");

//以下は削除された属性の値です======================================= === ================================

//=============================================== ==========================================

// myNode.removeAttribute("クラス");

// if (myNode.getAttribute("class") == null)

//alert("正常に削除されました!!");

//それ以外

//alert("成功しませんでした");

var delNode=myNode.getAttributeNode("クラス");

if (myNode.getAttribute("class") == null)

alert("削除成功!!");

それ以外

alert("成功しませんでした");

}

</script>

</head>

<本文>

<p id="p1">ダムの紹介</p>

<p><a href="#" name="link">dom</a> の使用方法</p>

</body>

</html>

ノードを使用するパラメータメソッドとノードを使用しないパラメータメソッドの違いに注意してください。