JavaScript学習メモ(20)要素の特性(属性)の取得と設定_基礎知識

HTML のこのセクションでは、例として以下を取り上げます

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

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); am 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"); //クラスの属性を削除します