| ■86772 / inTopicNo.2) |
Re[1]: Dom要素(Domオブジェクト)の属性についての質問 |
□投稿者/ 魔界の仮面弁士 (1588回)-(2018/03/14(Wed) 12:58:15)
|
2018/03/14(Wed) 13:00:13 編集(投稿者)
■No86770 (Sasaki さん) に返信
> divElement.style = 'color:blue'; // [1]
> divElement['style'] = 'color:blue'; // [2]
前者はドット表記法
後者はブラケット表記法ですね。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors
両者の意味は同じですが、数値やハイフンで始まるメンバー名の場合は、
ドット表記ではアクセスできないため、その場合は
ブラケット表記法を用いてアクセスする必要があります。
> (2)また、style属性以外のHTMLで定義されていない属性を設定/利用してもよいものなのでしょうか。
style オブジェクトにメンバーを追加するという話でしょうか。
それとも、style 以外の属性を利用したいという話でしょうか。
HTML の要素の定義と DOM 側のプロパティは、それぞれ分けて考えてください。
DOM オブジェクトへのメンバー追加は、仕様的には問題ありませんが、
HTML の記述として、未定義の属性を含めてよいのかどうかは、また別の話です。
HTML5 だと、一般的にはカスタムデータ属性として data-* を使うようになっています。
カスタムデータ属性へのアクセスは、dataset IDL 属性を使うのが一般的です。
alert(divElement.dataset.address);
XHTML の場合、未定義の属性を使うことは XML の妥当性検証としては NG となります。
ただし整形式の XML とはなりえますし、名前空間を分ければ別の属性を扱うことも出来ます。
> 例えば、divElement.select = function() {...};
先述の通り、DOM 上で新しい独自メンバー(プロパティ/メソッド)を追加することは
動作的には問題ありません。
しかし、<textarea> や <input type="text"> のオブジェクトにも
select という同名メソッドがあるので、既存の同名メンバーを上書きしたり、
他の開発者を混乱させるような実装としないようにするなどといった
配慮は必要かと思います。
> (1)Dom要素の属性を設定/変更する方法は、以下のように３つの方法があると認識しているのですが、正しいでしょうか。
DOM のどの属性を対象にしているのか、にもよります。
殆どの場合、DOM のプロパティ名は属性名と一致しますが、
中には属性名のプロパティが使えないものもあります。
たとえば <div class="old"> の『class 属性』を読み書きする場合、
[3] の getAttribute / setAttribute を使う場合には、
var cls = divElement.getAttribute("class");
divElement.setAttribute("class", cls + " example");
などと書けますが、[1] や [2] の構文では "class" ではなく
"className" を使わねばなりません。
divElement.className = "new";
また、
<input type="checkbox" id="chk1" checked>
<input type="checkbox" id="chk2">
なども注意が必要です。
[1] の構文を使う場合、
defaultChecked プロパティ（HTML ページ上で最初に読み込まれたときの初期値）と
checked プロパティ（現在のチェック状態値）という 2 種類が存在し、
そのいずれもが boolean 型の値を使用しています。
var val3 = document.getElementById("chk1").defaultChecked; // true
var val4 = document.getElementById("chk2").defaultChecked; // false
var val5 = document.getElementById("chk1").checked; // true または false
var val6 = document.getElementById("chk2").checked; // true または false
document.getElementById("chk2").checked = true; // 文字列 "checked" を代入するのは誤り
一方 [3] による "checked" 属性へのアクセスでは、string 型の値が使われることになります。
こちらは、[1] で言う所の defaultChecked プロパティの操作に相当しますが、
完全に同じと言うわけではありません。
var val1 = document.getElementById("chk1").getAttribute("checked"); // "checked"
var val2 = document.getElementById("chk2").getAttribute("checked"); // null
document.getElementById("chk1").removeAttribute("checked");
このほか、旧 IE における style / currentStyle / runtimeStyle のような
パターンもありますね。
// DOM Level 2 Style
var currentStyleStandard = window.getComputedStyle(divElement, null);
// safari
var currentStyleSafari = document.defaultView.getComputedStyle(divElement, null);
// 古いIE
var currentStyleOldIE = divElement.currentStyle;
|
|