JavaScript 要素属性を取得、設定、削除する 3 つのメソッド_JavaScript スキル

次の HTML を例として取り上げます

コードをコピーします コードは次のとおりです:

< ;div id=" myDiv" class="bd" title="私は div">

Baidu

1. HTMLElement タイプ (オブジェクト) の属性を通じて要素プロパティを取得および設定します。 🎜>

コードをコピーします コードは次のとおりです:

var div = document.getElementById("myDiv" );
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//要素のプロパティを取得します
alert(div.id); //"myDiv"
alert(div.className); //"bd"、class は予約キーワードなので、これは div.class ではありません。
alert(div.title); //"私は div です。 "
alert(a. href); //http://www.baidu.com
//要素のプロパティを設定
div.id = "myDiv2"; //id を "myDiv2" に変更
div.className = "ft "; //クラスが "ft" に変更されます。 "ft" という名前のスタイルがある場合、すぐに "ft" スタイルに変更され、ブラウザはすぐに応答します
div.title = "I am myDiv2"; / /タイトルは "I am myDiv2" に変更されます
div.align = "center" //中央揃えを設定します
img.src ="images/img1.gif "; //画像パスを設定します
a. innerHTML = "Sina"; //「Baidu」を「Sina」に変更します
a.href = "http://www.sina.com.cn"; // ハイパーリンクをリセットします

2. getAttribute()、setAttribute()、removeAttribute() メソッドを使用して要素の特性を取得、設定、削除します (推奨されません。最初の 2 つのメソッドはIE6 と 7 では例外があり、3 番目のメソッドは IE6 ではサポートされていません。カスタム属性を設定するときに使用できます)
getAttribute() メソッドは要素の属性を取得するために使用されます。要素の属性名を取得する 1 つのパラメーターを受け取ります。
setAttribute() メソッドは、要素の属性を設定するために使用されます。要素の属性名と属性値を取得するための 2 つのパラメーターを受け取ります。
removeAttribute() メソッドは、要素の属性を削除するために使用されます。削除する要素の属性名である 1 つのパラメータを受け入れます

コードをコピー コードは次のとおりです:

var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA"); >//要素のプロパティを取得します。
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd" に注意してください。上記とは異なります。
alert(div.getAttribute("title")) //"私は div"
alert(a.getAttribute("href")); ://www.baidu. com
//要素の属性を設定します
div.setAttribute("id","myDiv2") //ID を "myDiv2" に変更します
div.setAttribute("class") ,"ft"); / /クラスは "ft" に変更されます。ここでも className ではなくクラスです。
div.setAttribute("title","I am myDiv2"); //タイトルは "I" に変更されます。 am myDiv2"
div.setAttribute ("align","center"); //中央揃えを設定します
img.setAttribute("src","images/img1.gif"); //画像パスを設定
//要素の属性を削除します
div.removeAttribute("class"); //クラス属性を削除します


3. 属性を通じて要素の属性を取得、設定、削除します。属性

コードをコピー コードは次のとおりです。

var div = document.getElementById(" myDiv");

//要素のプロパティを取得
alert(div.attributes["id"].nodeValue); //"myDiv"
//要素の属性を設定
div.attributes[" id"].nodeValue = "myDiv2"; //id を "myDiv2" に変更します
//要素の属性を削除します
div.attributes.removeNamedItem("class"); //クラスの属性を削除します