備忘録的プログラミングリファレンス

エレメントの取得と新規追加

 エレメント取得と新規追加は、DOMのDocumentの取得や新規追加のメソッドを使います。
 HTMLページを構成するエレメントをDOMオブジェクトとして取得します。そのことで、HTMLの部品であるエレメントのデータを操作することができます。

Syntax

document.getElementsByTagName('tag_name');
 or 
element.getElementsByTagName('tag_name');

エレメント取得メソッド一覧

 エレメントの取得メソッドには以下があります。

JavaScript

MethodReturn ValueDesc
getElementsByTagName('tag_name')HTMLCollectionタグエレメント名
getElementById('id')HTMLElement/nullエレメントのID名
getElementsByClassName('class_name')HTMLCollectionエレメントのclass名
getElementsByName('name')NodeListエレメントのname名
querySelector()HTMLElementCSSのセレクタと同じ
querySelectorAll()NodeListCSSのセレクタと同じ

 getElementById('')やquerySelector('')はマッチした最初のエレメントを取得します。

 以下の方法でNodeを取得することもできますが不安定なことがあります。

SyntaxDesc
document.documentElement<html>エレメント
document.head<head>エレメント
document.body<body>エレメント
document.forms<form>エレメント、HTMLCollection
document.images<img>エレメント、HTMLCollection
document.links<a>エレメントや<area>エレメント、HTMLCollection
document.scripts<script>エレメント、HTMLCollection

jQuery

 jQueryでは、"$()"関数の第1引数にCSSのセレクタと同じ要領で指定します。すべてjQueryオブジェクトが返ります。

DescMethod
タグエレメント名$('tag_name')
エレメントのID名$('#id')
エレメントのclass名$('.class')
エレメントのname名$('[name="name名"]')
エレメントの属性(parameter)$('[parameter_name="value"]')

エレメントのname名による取得は、エレメントの属性(parameter)の指定によるもの。

エレメントの新規作成

 document.createElement()メソッドでドキュメントにエレメントを新規作成ができます。第1引数はタグ名です。

 以下の例では、エレメントの新規作成とその属性も作成し、属性の値を設定しています。

// エレメントの新規作成
var _elem = document.createElement("p");
// エレメントの属性の作成と追加
var _att = document.createAttribute( "name" );
_elem.setAttributeNode( _att );
// 属性の値を設定
_elem.setAttribute( "name", "foo" );

Example