RenojiStock IT Design 旅メモ DIY Diary AboutUs
ITメモ
JavaScript
リファレンス / Reference
変数の中身を確認する方法 条件分岐に使う変数の空判定 「ブラウザ」「ビューポート」「モニター」のサイズを取得する マウスの位置を確認する スクロール位置を確認する 要素の縦・横サイズを取得する 要素の位置を確認する 要素内のテキストを変更する 要素内の子要素を取得する スタイル属性(画面で色や線・大きさを変更する方法) 発生したイベント情報を取得する ページ読み込み完了時にJavascriptを実行させる方法 画像・ファイルの読み込み完了のタイミングを知る 「Javascript」で画像を変更する方法 「Javascript」で、ヒアドキュメントを使う方法 JavascriptからPHPスクリプトを呼び出す方法 WebページのタイトルをJavascriptで変更する方法
Javascript入門
Javascriptの書き方とリンクの仕方 Javascriptの基本要素 変数 関数 / Function 構文(条件分岐・繰り返し) イベントハンドラー(Event Handler) 文字の使用方法 DOMの一覧 スコープ ファイル操作 ライブラリー / Library
オブジェクト
オブジェクトとは 数値(Number) 文字列(String) 真偽値(Boolean) 配列(Array) 数学関数(Math) 日付(Date) 関数(Function) 正規表現(RegExp) ウィンドウ(Window) Window.Navigator - ナビゲーター(Navigator) Window.Event - イベント(Event) Window.History - ヒストリ(History) Window.Location - ロケーション(Location) Window.Screen - スクリーン(Screen) Window.Document - ドキュメント(Document) Window.Document.Layer - レイヤ(Layer) Window.Document.Image - 画像(Image) Window.Document.Link - リンク(Link) Window.Document.Anchor - アンカー(Anchor) Window.Document.Applet - アプレット(Applet) Window.Document.Form - フォーム(Form) Window.Document.Elements - エレメント(Elements)
メソッド
【indexOf】 -- 指定文字列があるか検索し、位置を返す。








要素内の子要素を取得する



javascriptで、要素の中にある「子要素」を確認する方法がある。
全ての「子要素」を取得したり、
指定した「タグ」の子要素だけを取得することこともできる。

取得した後は、子要素の「ID」を取得することで、「ID」指定で色々な変更が可能になる。
よく使われる便利な機能。


・要素だけを抽出するなら、「children」を利用するのが便利。



オブジェクト説明
childnodes子要素の要素と要素内のテキストを抽出する。
children()子要素のすべてを抽出する。
children("指定したいタグ名")指定したタグの子要素だけを抽出する。


サンプルコード

var Get_Childnodes=window.document.getElementById('ID名').childNodes;
var Get_Childnodes=window.document.getElementById('ID名').children;
var Get_Childnodes=window.document.getElementById('ID名').children("div");


「タグ名」を表示させるコード

for (var i = 0, i < Get_Childnodes.length; i++) {
console.log(Get_Childnodes[i].nodeName);
}


子要素の「ID」を取得するコード

var NodeID=Get_Childnodes[0].id;
「childNodes」で取得した子要素配列には、テキストも含まれているので注意。

テキスト抽出 (要素ノードはnull 、テキストノードはノードの文字列)

Get_Childnodes[0].nodeValue

ノードのタグ名(要素はタグ名、テキストノードは "#text"という文字)

Get_Childnodes[0].nodeName

子ノードの数

Get_Childnodes.length

各種ノードが返す数値(要素ノードは1,テキストノードは3)

Get_Childnodes[0].nodeType

ノードの指定した属性名の属性値を得る

Get_Childnodes[0].getAttributeNode("属性名");