タグの属性変更

[新着] Webテンプレートを仮オープンしました

0   名前： ルックＳ ： 2006/07/17（月） 23:16
属性でCというのがあたっとして、
<div>を<div C>というふうに動的に変えるにはどう書けばよいのでしょうか。
DOMでできるようなのですが、あまり詳しくありません。
すいません、教えてください。
1   名前： 匿名 ： 2006/07/17（月） 23:16  ID:zB2/vVG8
よくわかりませんがこれのことですか？

http://www.tagindex.com/stylesheet/basic/format2.html
2   名前： Pid ◆byEkK9OALr ： 2006/07/17（月） 23:16
>>0
具体的に何がしたいのですか。
3   名前： 神崎 ： 2006/07/17（月） 23:16
> 属性でCというのがあたっとして、
> <div>を<div C>というふうに動的に変えるにはどう書けばよいのでしょうか。

setAttribute、または直接、属性に値を代入出来ます。

getElementsByTagName('DIV')[0].setAttribute('ID', 'newID')
または、
getElementsByTagName('DIV')[0].id='newID';

フォームエレメントのselected属性のような値が書かれていない属性は、
HTMLでは通常はtrueかfalseを値として指定します。
XHTMLではselected="selected"のように、属性名と値が同じになります。
4   名前： 神崎 ： 2006/07/17（月） 23:16
補足
IEではsetAttributeで指定する属性は、大文字と小文字を区別します。

setAttribute('ID', 'newID', 1)
と、第三引数に１を指定すると、大文字と小文字の区別がなくなります。
5   名前： Pid ◆byEkK9OALr ： 2006/07/17（月） 23:16
もう一つ補足です。

setAttribute は DOM1 Core に含まれるので，DOM 実装であればどんな環境でも動作するはずです。ところが，実際にはややこしい経緯があって，過去の多くの実装では，node.setAttribute ('attr', value); は node.attr = value; のシンタックスシュガーでしかありません。
http://nanto.asablo.jp/blog/2005/10/29/123294

DOM 実装ブラウザであればほぼ確実に DOM1 HTML をサポートしていますので，対象が HTML とあらかじめ分かっている場合には，古い実装（IE5，Opera6 など）が淘汰されるまでは setAttribute を使わない方が無難だと思います。

// DOM HTML がサポートされていれば，属性名と似たプロパティ名でアクセスできる
node.id = 'ID';

// ただし，常に同じ名前ではないことに注意
node.className = 'class';
node.htmlFor = 'targetID';


もし style 属性であれば，

// DOM2 CSS
node.style.cssText = 'color: #999; background: #ccc;';


もしイベント属性であれば，

// DOM2 Events
node.addEventListener ('click', listener, useCapture);

// ただし，IE の場合はビヘイビア以来の attachEvent を使う
node.attachEvent ('onclick', listener);


※特にスタイル・イベントに関しては，対象が XML の場合は当然ながら setAttribute による操作の保証はありませんので，上記の手段を使うことになります。
6   名前： その他 ： 2006/07/17（月） 23:16  ID:GWk10w0a
>>4

> setAttribute('ID', 'newID', 1)
> と、第三引数に１を指定すると、大文字と小文字の区別がなくなります。

setAttributeの第三引数は
０：大文字小文字の区別をしない
１：大文字小文字の区別をする（デフォルト）
ですよ
7   名前： Pid ： 2006/07/17（月） 23:16  ID:euCmTh43
大文字・小文字で思い出した雑談ですが，

XHTML 1.0 マークアップは大文字・小文字を区別します[*1]が，HTML 4.0(1) マークアップでは大文字・小文字を区別しません[*2]。

しかし，HTML 4.0(1) 文書をスクリプトで扱う場合は，以下の規則があります（DOM Level 2 HTML[*3]）。

値の取得に関して：
・要素名（たとえば element.tagName）は，必ず大文字を返す（§1.6.3）。
・属性値が値リストの場合（たとえば align="left|center|right" や type="text|submit|button|radio|checkbox"）は，必ず小文字を返す（§1.6.1）。

値の設定に関して：
・XHTML 1.0 との互換性を考慮し，getElementsByTagName，getAttribute などに要素名・属性名を渡す場合は，小文字で渡すようにする（§1.3）。

まあ，string.toLowerCase() などを駆使しても良いのですが，上記の規則に留意すれば無駄な変換をしなくて済むかな，と。

----
[*1] かつ，要素名と属性名は小文字で書かねばなりません。
[*2] 厳密には，内部で大文字に統一されます。
[*3] http://www2u.biglobe.ne.jp/%7Eoz-07ams/prog/dom-ref/HTML/


＊ ＊ ＊

ついでに話は飛びますが，未指定かつ既定値定義のない属性の値を取得しようとした場合，

・戻り値が String の場合は空文字列（null でも undefined でもないことに注意）
・戻り値が Boolean の場合は false
・戻り値が Number の場合は 0

を返すことになっています（§1.6.1）。


DOM2 HTML ついでの雑談でした m(_ _)m。
一覧へ戻る