HTMLXXXElement

トップ > チップス > HTMLXXXElement

/tips/js/element **概要 DOMにおける要素オブジェクトです。例えば以下のようなコードでドキュメントから任意の要素を取得することができます。 :var foo = document.getElementById("foo");

HTMLとして見ると、下記では「div」が要素、「id」「title」「class」が属性、「text1」「br」「text2」「br」が子要素となります。要素オブジェクトを使うことで、これらに自在にアクセスをすることが可能になります。 :

**フィールド ,*名前,*型,*説明 ,attributes,NamedNodeMap,属性リスト ,childNodes,NodeList,子要素リスト ,firstChild,Node,最初の子要素 ,lastChild,Node,最後の子要素 ,nextSibling,Node,次の要素 ,previousSibling,Node,手前の要素 ,parentNode,HTMLXXXElement,親要素 ,ownerDocument,{link:/tips/js/document,HTMLDocument},親ドキュメント ,,, ,nodeName,,要素の名前 ,nodeType,,要素のタイプ？ ,nodeValue,,？ ,,, ,innerHTML,,要素内の全てのHTMLを含む文字列

***属性にアクセス 要素に定義されている属性はそのままフィールドとしてアクセスが可能です。例えば、以下のような属性が定義されていれば、「foo.id」や「foo.title」といった記述で属性にアクセスすることができます。但し、「class」属性は（予約語とかぶるため？）「className」フィールドを指定する必要があるようです。 :

:foo.id // foo :foo.title // ttt :foo.className // ccc ＊注意＊ class属性のみclassNameになります

これら属性には、getAttribute(name)、setAttrubute(name,value)メソッドを通じてアクセスすることも可能です。

***スタイルにアクセス 「style」というフィールドを通じて、スタイルにアクセスすることができます。下記の例では、fooという名前の要素の文字色を赤に設定します。

:foo.style.color = "#ff0000";

***非推奨 以下のフィールドは動作する環境が限られているようです。 ,*名前,*型,*説明 ,name,, ,children,, ,innerText,,要素内のテキスト（IEのみ） ,textContent,,要素内のテキスト（FFのみ）

**メソッド ,*名前(引数),*戻り値の型,*説明 ,appendChild(Node),,子要素を（末尾に）追加します。 ,cloneNode(boolean),,要素を複製します。{br}引数にtrueが指定された場合、子要素も再帰的に複製されます。 ,insertBefore(Node\,Node),,2番目の引数で指定された要素の手前に、要素を追加します。 ,removeChild(Node),,要素を削除します。

※要素の生成はDocumentの仕事です。下記コード例のように、createXXXNodeメソッドを使用して、新しい要素やテキストを生成することができます。

{strong:コード例} :// 新しいテキストノードを生成します :var textNode = document.createTextNode("text3"); :// 末尾に追加します :foo.appendChild(textNode); :// 新しい要素(span)を生成します :var elementNode = document.createElement("span"); :// 要素(span)の文字色を赤に設定します :elementNode.style.color = "#ff0000"; :// テキストノードを複製し、要素(span)に追加します :elementNode.appendChild(textNode.cloneNode(false)); :// 先に追加したテキストノードの手前に要素(span)を追加します :foo.insertBefore(elementNode,textNode); :// 先頭の要素を削除します :foo.removeChild(foo.firstChild);

• タグ別一覧: [element]
• チップス一覧