document.forms

document内の全てのフォームを参照します
フォームの出現順 または フォームのname属性のプロパティを参照して呼び出す事ができます。

<form action="/" method="post" name="test"></form>
<form action="/" method="post" name="test2"></form>

<script type="text/javascript">

// １番目のフォーム
document.forms[0]
document.forms['test']

// ２番目のフォーム
document.forms[1]
document.forms['test2']
</script>

フォーム属性の取得

フォームにセットされている属性情報を取得することができます。
また、値を代入することにより、上書きすることもできます。

formElement.action

formにセットされたactionの値を取得/セットすることができます。

<form action="http://google.com/" method="post" name="test"></form>

<script type="text/javascript">
alert(document.forms[0].action); // http://google.com/
document.forms[0].action = 'http://yahoo.co.jp';
alert(document.forms[0].action); // http;//yahoo.co.jp
</script>

formElement.method

formにセットされたmethodの値を取得/セットすることができます。

<form action="http://google.com/" method="post" name="test"></form>

<script type="text/javascript">
alert(document.forms[0].method); // POST
document.forms[0].method = 'GET';
alert(document.forms[0].method); // GET
</script>

formElement.name

formにセットされたnameの値を取得/セットすることができます。

<form action="http://google.com/" method="post" name="test"></form>

<script type="text/javascript">
alert(document.forms[0].name); // test
document.forms[0].name = 'HAHAHA';
alert(document.forms[0].name); // HAHAHA
</script>

formElement.target

formにセットされたtargetの値を取得/セットすることができます。

<form action="http://google.com/" method="post" target="_blank" name="test"></form>

<script type="text/javascript">
alert(document.forms[0].target); // _blank
document.forms[0].target = 'self';
alert(document.forms[0].target); // self
</script>

formElement.submit

formのsubmitを実行します。

<form action="http://google.com/" method="post" target="_blank" name="test"></form>

<script type="text/javascript">
document.forms[0].submit();
</script>

formElement.reset

form内のresetを実行します。

<form action="http://google.com/" method="post" target="_blank" name="test"></form>

<script type="text/javascript">
document.forms[0].reset();
</script>

フォーム内要素

【プロパティ】
フォームに内包されているinputタグやら、その辺の属性操作について

element.value

対象要素の値(value)を取得/セットすることができます。

<form action="http://google.com/" method="post" target="_blank" name="test">
<input type="text" name="text1" value="aaaa" />
</form>

<script type="text/javascript">
alert(document.forms[0].text1.value); // aaa
document.forms[0].text1.value = 'vvv';
alert(document.forms[0].text1.value); // vvv
</script>

element.focus

対象要素にフォーカスを当てます。

<form action="http://google.com/" method="post" target="_blank" name="test">
<input type="text" name="text1" value="aaaa" />
</form>

<script type="text/javascript">
document.forms[0].text1.focus();
</script>

element.blur

対象要素に当たっているフォーカスを解除します。。

<form action="http://google.com/" method="post" target="_blank" name="test">
<input type="text" name="text1" value="aaaa" />
</form>

<script type="text/javascript">
document.forms[0].text1.blur();
</script>

element.select

対象要素を選択状態にします。

<form action="http://google.com/" method="post" target="_blank" name="test">
<input type="text" name="text1" value="aaaa" />
</form>

<script type="text/javascript">
document.forms[0].text1.select();
</script>

element.checked

対象チェックボックスを選択状態にさせます。

<form action="http://google.com/" method="post" target="_blank" name="test">
<input type="text" name="text1" value="aaaa" />
<input type="checkbox" name="text2" value="aaaa" />チェック
</form>

<script type="text/javascript">
document.forms[0].text2.checked = true;// チェック状態
document.forms[0].text2.checked = false;// チェックを外す
</script>

element.select.length

対象セレクトボックスの選択値の数を取得します。

<form action="http://google.com/" method="post" target="_blank" name="test">
<input type="text" name="text1" value="aaaa" />
<input type="checkbox" name="text2" value="aaaa" />チェック
</form>

<script type="text/javascript">
document.forms[0].text2.checked = true;// チェック状態
document.forms[0].text2.checked = false;// チェックを外す
</script>

element.select.value

対象要素の値(value)を取得/セットすることができます。

<form action="http://google.com/" method="post" target="_blank" name="test">
<input type="text" name="text1" value="aaaa" />
<input type="checkbox" name="text2" value="aaaa" />チェック
<select name="test3">
<option value="1">てすと1</option>
<option value="2">てすと2</option>
<option value="3">てすと3</option>
<option value="4">てすと4</option>
<option value="5">てすと5</option>
<option value="6">てすと6</option>
</select>

</form>

<script type="text/javascript">

// value値を直接参照するパターン
alert(document.forms[0].test3.value); // 1
document.forms[0].test3.value = 3;  // value3が選択状態に
alert(document.forms[0].test3.value); // 3

// optionの順番を参照するパターン
alert(document.forms[0].test3.selecedIndex); // 3
document.forms[0].test3.selecedIndex = 2;  // 2番目が選択状態に　※0番目を忘れないように。
alert(document.forms[0].test3.selecedIndex); // 2

</script>

番組の途中ですがここで練習問題です

タイトルタグ

ここではタイトルタグをいじらせてやろう。

document.title

現在表示中のページのタイトルタグ部分を取得/セットすることができます。

alert(document.title);// 設定されているタイトルタグの中身
document.title = 'すしのへや';
alert(document.title);// すしのへや

良い子の要素追加手順講座

あのねー。divタグ追加したいんだー。どうしよう。
みたいな時、さてどうすんの？っていう所で順を追って説明していくやで彡(^)(^)

まずは、何のタグを追加したいのか？
document.createElement(tagName);

まずは、何のタグを追加したいのか、ソコです。
基本何でもいけます。まずはdivタグを作ってみたいと思います。

var elem = document.createElement('div'); // divタグを生成

この時点ではDOMツリーには入っていない状態です。
それでも、エレメント情報を変数に入れる事により、このタグに対しての操作が可能になります。

クラス名つけたいんですけど。
element.className

クラス名を付けたい場合は、こいつ。classNameにクラス名を代入することで、その要素に対してクラスを付与することができます。
で、こいつは上書きをする性質がありますので。
元々クラス名があって追加したい場合は、取り出してクラス名を引っ付けて、セットするようにしましょう
複数のクラスを付与する場合は、各クラス名の間に半角スペースを入れてあげます。
というか class="[ここ]"を入れ替えてるに過ぎないって事を覚えておいてください。

戻り値はクラス名です。クラス名が欲しい場合は代入せずに戻り値を参照しましょう。

var elem = document.createElement('div'); // divタグを生成

elem.className = "tesClass"; // class="tesClass" となります。

elem.className = "tesClass2"; // class="tesClass2" となります。 tesClassは上書きされました。南無三

var classData = elem.className; // tesClass2 が変数に入ります。

classData = classData+' tesClass'; // tesClass2 tesClass

elem.className = classData; // class="tesClass2 tesClass" となります。イエース

////////////////////////////////////////////////////////

わざわざ変数に入れるの煩わしい。

///////////////////////////////////////////////////////

elem.className += ' testClass4'; // 加算代入
alert(elem.className); // tesClass2 tesClass testClass4

idつけたいねんけど。
element.id

classと同じく、IDも追加することができます。

戻り値はID名です。ID名が欲しい場合は代入せずに戻り値を参照しましょう。

var elem = document.createElement('div'); // divタグを生成
elem.id = "test"; // id="test" となります。

何か属性つけたい。
element.setAttribute(attributeName,value)

classとid以外の属性をセットしたい場合はこいつを使います。
classもidも本当は属性なんですけどね！！！
なので、こいつでもつけれます。
なんでもできる万能選手です。

var elem = document.createElement('div'); // divタグを生成
elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。

HTMLタグをもう入れたい！createすんのめんどくさい！！
element.innerHTML

では、innerHTMLをすればよいです。
なお、無事上書きされて全滅する模様。なので、使いどころには注意してください。
ちなみに戻り値ではその中のhtmlタグを返してくれますよ。

var elem = document.createElement('div'); // divタグを生成
document.body.innerHTML; // body直下全部取得
document.body.innerHTML = '<p>寿司をくれぇ</p>'; // 無事上書き。

htmlタグじゃなくって、テキストでいれたいんですよ。
element.textContent

そんなあなたにtextContent。
対象エレメントに【文字列】として挿入します。
htmlタグは【文字列】として評価されますので、タグがそのまま出ます。

var elem = document.createElement('div'); // divタグを生成
elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。
document.body.insertBefore(elem, document.body.firstChild);  // 生成したdiv要素に、test属性をセットします。
elem.id="tesId";
elem.textContent = '<div>追加した！</div>';

DOM構造内に、要素を入れるぞー！
Node.appendChild(setElement)

DOM構造内に要素をつっこみます。
まず手法その１：とある要素の一番最後に追加
それがappendChildです。
一番最後ってのはどういう事かと申しますと、まぁ、一番最後なのですが
指定要素が内包している第一次の最後

(´・ω・｀)

div#container
┣ div#head
┣ div#contents
┃ ┗ div#main
┗ div#footer

これの、#containerにただのdivをappendChildした場合

div#container
┣ div#head
┣ div#contents
┃ ┗ div#main
┣ div#footer
┗ div

こうなるのです。

 var elem = document.createElement('div'); // divタグを生成
 elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。
 document.body.appendChild(elem); // bodyタグ内の最後に追加

最初に入れたいんですけど・・・
Node.insertBefore(setElem,Node)

insertBeforeを使おう(提案)
まぁ、若干ピンときにくい関数ではあります。
【追加したい大元の要素】.insertBefore(【何を？】,【大元の要素の中のどの子要素の前に】);
が日本語でなおした時の説明になります。
div#container
┣ div#head
┣ div#contents
┃ ┗ div#main
┗ div#footer

※分かりやすい書き方で書いてます。
#container.insertBefore('div','#contents');
とすると

div#container
┣ div#head
┣ div // ここ
┣ div#contents
┃ ┗ div#main
┗ div#footer

こうなるわけさー

var elem = document.createElement('div'); // divタグを生成
document.body.insertBefore(elem, document.body.firstChild); // body直下の一番最初の要素の前に、生成したdivを追加します。

要素を指定して、そいつをなんかしたいのよ
document.getElementById('ID名')

要素の指定方法としては、まず、IDによる直接指定方法があります。

var elem = document.getElementById('container'); // id="container"の要素を取得することができました。
  elem2 = document.createElement('div'); // divの生成
elem2.textContent = 'おおおおおお'; // 生成したdivに文字列を入れる
elem.appendChild(elem2); // #containerの最後に生成したdivを入れる

タグ名で要素を取得する。
document.getElementsByTagName('タグの名前')

タグ名をキーとしてエレメントを取得する。
指定した全てのタグを配列として取得します。
引数に * とした場合は、全てのタグを取得します。

var elem = document.createElement('div'); // divタグを生成
elem2 = document.getElementsByTagName('div')[0]; // bodyからみて0番目のdivを取得する。
elem2.appendChild(elem); // 最初のdivの最後に生成したdivを追加

良い子の要素確認講座

あれ？この要素ってこうだっけ？みたいなチェックをするときに使えるメソッドです。

こいつこの属性もってたっけ？
element.hasAttribute('string')

対象要素に指定した属性が存在しているかどうかをチェックします。
存在していればtrue なければfalseを返します。

var elem = document.createElement('div'); // divタグを生成
elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。
alert(elem.hasAttribute('test')); // true
alert(elem.hasAttribute('ほおおおおおお')); // false

こいつなんでもいいから属性もってたっけ？
element.hasAttributes()

特定の属性をの時ではなく、もう何でもいいから属性持ってんの！？どうなのって時にはこいつ
sがついて複数形になってる感じです。

こい子要素もってんの？
Node.hasChildNodes

指定要素が子要素を持っているかどうかを判定します。
子要素があればtrueをなければfalseを返します。

var elem = document.createElement('div'); // divタグを生成
elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。
document.body.insertBefore(elem, document.body.firstChild);  // 生成したdiv要素に、test属性をセットします。
elem.id="tesId";
alert(elem.hasChildNodes()); // false;
elem.innerHTML = '<div></div>';
alert(elem.hasChildNodes()); // true;

(´・ω・｀)しぬがよい

/////////////////////////////////////////////////////////////////////////////////

超難問
さて、getElementsByClassNameを作ってみようではないか。
getElementsByClassNameってのは元々存在しているけど、IE8ではまだ動作しない
困った子
丁度よいので、同じような動きをするクラスを作ってみよう。
ちなみに、ここまでで出したdocumentオブジェクトの内容だけでできるハズである。

>∩(・ω・)∩<ﾃｰﾚｯﾃｰ

/////////////////////////////////////////////////////////////////////////////////

mb20ってクラスがついてるやつを赤字にするは

良い子の近所の要素を調べる方法

idとかで一発取得できない要素を選択するにはどうしたらいいのか？
その答えとして、DOM要素内を移動できる優れものをご紹介。

1つ上の親要素を取得したい
Node.parentNode

指定要素の親要素を取得します。
先祖ではなく、親です。
先祖が欲しい場合は、親要素に対してさらにparentNodeをかけます。その繰り返しです。

var elem = document.createElement('div'); // divタグを生成
elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。
document.body.insertBefore(elem, document.body.firstChild);  // 生成したdiv要素に、test属性をセットします。
elem.id="tesId";
alert(elem.parentNode.tagName); // body

子要素は何があんの？
Node.childNodes

指定要素の子要素を取得します。
配列の形で帰ってきますので、順番をキーに指定することができます。
孫要素に関しては、特定子要素に対してさらにchildNodesを行います。

var elem = document.createElement('div'); // divタグを生成
elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。
document.body.insertBefore(elem, document.body.firstChild);  // 生成したdiv要素に、test属性をセットします。
elem.id="tesId";
elem.innerHTML = '<span></span>';
alert(elem.childNodes[0].tagName); // span

Node.firstChild | Node.lastChild

指定要素内の最初の子要素と最後の子要素を取得する事ができます。

var elem = document.createElement('div'); // divタグを生成
elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。
document.body.insertBefore(elem, document.body.firstChild);  // 生成したdiv要素に、test属性をセットします。
elem.id="tesId";
elem.innerHTML = '<span></span>';
elem.innerHTML = '<p></p>';
elem.innerHTML+= '<div></div>';
alert(elem.firstChild.tagName); // span
alert(elem.lastChild.tagName); // div

Node.previousSibling | Node.nextSibling

指定要素の兄弟要素(同一階層の前後の要素)を取得することができます。

var elem = document.createElement('div'); // divタグを生成
elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。
document.body.insertBefore(elem, document.body.firstChild);  // 生成したdiv要素に、test属性をセットします。
elem.id="tesId";
elem.innerHTML = '<span></span>';
elem.innerHTML = '<p></p>';
elem.innerHTML+= '<div></div>';
elem2 = elem.childNodes[1];
alert(elem2.previousSibling.tagName); // span
alert(elem2.nextSibling.tagName); // div

Node.removeChild

子要素を削除します。

var elem = document.createElement('div'); // divタグを生成
elem.setAttribute('test','TEEEST'); // 生成したdiv要素に、test属性をセットします。
document.body.insertBefore(elem, document.body.firstChild);  // 生成したdiv要素に、test属性をセットします。
elem.id="tesId";
elem.innerHTML = '<span></span>';
elem.innerHTML = '<p></p>';
elem.innerHTML+= '<div></div>';
elemData = elem.childNodes; // 配列として全子要素が返ってくる。
elem.removeChild(elemData[0]); // span要素が削除

elementとNodeの違い

elementって書いてあったりNodeって書いてあったりしました
これは何の差なのか書いてみるのです。。

element.xxxx

element.xxxx　これはその要素自体を何かいじったりしますよ！！！って事
setAttributeとかも、その要素に対して、何かしてるから
elementなのです。

Node.xxxx

Node つまり、DOM構造に対して何かする / どうなの？っていう場合なので、タグ自体になにかするわけではありません
なので、Nodeという言い方をしています。

innerHTMLとtextContent、これは？

innerHTMLとtextContent、これはelementになってますね。
例えば、innerHTML これは、htmlタグが追加される、つまり、DOM構造に対して何かするわけですから、Node
と思われても仕方がないですね。実際DOM構造に対して追加するのは事実なのですが
そもそもの指定がDOM構造に対してではなく、【結果】DOM構造に対して何かしています。
つまり最初に指定する所が、DOMではなく、要素に対して、なので、elementになるわけですね。
頭痛が痛いって感じですね。