ITメモ
JavaScript
「Javascript」の基礎知識
「Javascript」の使い方【Javascript】エラーチェックをする方法【Javascript】変数【Javascript】配列(Array)【Javascript】「DOM(Document Object Model)」の使い方【Javascript】関数 / Function【Javascript】条件分岐・繰り返し【Javascript】イベントハンドラー(Event Handler)【Javascript】文字の操作方法【Javascript】文字の検索方法【Javascript】スコープ【Javascript】ファイルの操作方法【Javascript】画像の操作方法【Javascript】情報を出力・チェックする方法【Javascript】ヒアドキュメントの使い方【Javascript】Built-in Object(ビルトインオブジェクト)【Javascript】ライブラリー / Library
Library
「Ajax」の使い方
Library「jQuery」
【jQuery】とは【jQuery】の書式【jQuery】「Javascript」にリンクさせる方法【jQuery】「Javascript」に記述する方法【jQuery】のオブジェクト【jQuery】「CSS」を参照・設定する方法【jQuery】「HTML」要素の情報を参照・設定する方法【jQuery】「HTML」タグを追加する方法【jQuery】ユーティリティ関数【jQuery】イベントアクションを設定する方法【jQuery】イベントオブジェクト「.on」の使い方【jQuery】読み込み完了してから実行する「.ready」の使い方【jQuery】「Ajax」を使う方法【jQuery】「エフェクト」「アニメーション」を使う方法
Reference
数字
【Javascrpt】計算に誤差が出る時の解決方法
ファイル読み込み
【Javascrpt】「XMLHttpRequest」コンストラクタ - サーバーのファイルを読み込む方法
イベント
【Javascrpt】ページ読み込み時に「Javascript」を実行する方法【Javascrpt】画像読み込みが完了してから、次の処理を実行する方法【Javascrpt】「addEventListener()」の使い方 - イベントが発生したのを検知して実行する方法
要素情報
【Javascrpt】HTMLタグの「class」属性値を取得、変更する方法【Javascrpt】「querySelector()」の使い方 - HTML要素の情報を参照・設定する方法【Javascrpt】「querySelectorAll()」の使い方 - 要素内の指定した子要素を参照・設定する方法【Javascrpt】「classList」プロパティ - HTMLタグ属性値「class」の情報を参照・確認・追加・削除する方法【Javascrpt】「getElementById()」の使い方 - HTML要素の情報を「ID名」で参照・設定する方法【Javascrpt】「getElemetnsByClassName()」の使い方 - HTML要素の情報を「クラス名」で参照・設定する方法【Javascrpt】「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】「ParentNode.children」の使い方 - 要素内の子要素を参照・設定する方法【Javascrpt】要素の配置位置を確認する方法
Style関連
スタイル属性(色・線・大きさなど)を参照・変更する方法【Javascript】「getPropertyValue」メソッド - 指定されたCSSプロパティの値などを取得する【Javascript】「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
ページ関連
【Javascript】Webページのタイトルを変更する方法【Javascript】「モニター」情報を取得する方法【Javascript】「ブラウザ」情報を取得する方法【Javascript】「ページ」情報を取得する方法【Javascript】「イベント」情報を取得する方法【Javascript】「マウス」情報を取得する方法
サイズ関連
【Javascript】要素の縦・横サイズを参照・変更する方法【Javascript】「モニター」「ブラウザ」のサイズ情報を取得する方法
端末情報
【Javascript】スマートフォンからのアクセスを識別する方法





【Javascript】「DOM(Document Object Model)」の使い方



「Javascript」の「DOM(Document Object Model)」を使いこなすと、
Webページで、画像やテキスト、カラーなどを変更したり、動かしたりできる。

「DOM(Document Object Model)」を操作しない限り、
「Javascript」では、何もできないと思ってよいほど、中心的な機能です。
覚えてしまうと、色々できて楽しいはずです。






DOMとは


「DOM」は、「Document Object Model」の略。
「DOM」は、操作を可能にするAPIで、
「Node」「Element」の操作を可能にします。
簡単に言えば、
「「Javascript」で、Webページを色々と操作できるようにしてくれている。」
ということです。


このDOMを利用することで、「Javascript」を使用して、 HTMLタグを指定し、HTMLタグのテキスト内容や、
スタイル属性を参照・変更することができます。

マウス動作に反応させて、色などを変更するなどということも可能になります。

document.getElementById("ID名").style.fontSize="20px";

と「Javascript」に記述することで、
指定したID名のHTMLタグ内のテキストフォントサイズを「20px」に変更することができます。




Back



要素の操作方法


「DOM」は、
要素を指定して、参照することで、
Webに動的な要素を追加することができます。
要素の操作方法は、比較的単純です。

要素の操作方法は、
・要素を指定
・要素を参照
・要素を設定
です。



要素(エレメント)を指定する方法


要素を指定することで、
その要素の情報を参照・変更することができる。
要素を指定しただけでは、
何も変化はしないが、
要素を指定できないと、
何も参照・変更ができないので、
要素の指定は重要。


要素(エレメント)を指定する書式


//要素を「ID」で指定する
var 変数名 = document.querySelector('#ID名');

//クラス名の最初の要素を指定する
var 変数名 = document.querySelector('.クラス名');

//クラス名の要素を全て取得する
var 変数名 = document.querySelectorAll('.クラス名');

//要素を「ID」で指定する
var 変数名 = document.getElementById("ID名");

//タグ名で要素を指定する
var 変数名 = document.getElementsByTagName("タグ名");

//タグのname属性で要素を指定する
var 変数名 = document.getElementsByName("name値");



Back



要素(エレメント)を参照する方法


要素を指定した後に、
要素の情報を参照することができる。
要素の指定と同時に、参照することも可能。


要素を参照する書式


//要素を「ID」で指定・参照する
var 変数名 = document.querySelector('#ID名').style.color;
var 配列名 = document.querySelector('#ID名').childNodes;
//要素を指定した後に、要素を参照する
var 要素指定した変数名 = document.querySelector('#ID名');
var 変数名 = 要素指定した変数名.style.color;
var 配列名 = 要素指定した変数名.childNodes;



Back



要素リストから要素を取り出す方法


要素を指定して、
要素を参照することで、情報を確認できますが、
要素の参照情報が、配列の場合は、
もう一手間必要です。

配列に、情報が入れられているので、
配列で情報を読み出す必要があります。
繰り返しの「for」構文などを利用するのも便利です。


要素リストから要素を取り出す書式


//要素を「ID」で指定する
var Get_ChildNodes = document.querySelector('#ID名').childNodes;
//要素を指定した後に、要素を参照する
var Get_ID = document.querySelector('#ID名');
var Get_ChildNodes = Get_ID.childNodes;

var Count_ChildNodes = Get_ChildNodes.length;
var Get_Child = Get_ChildNodes[0];
var Get_Child = Get_ChildNodes(0);
var Get_Child = Get_ChildNodes.id1;
var Get_Child = Get_ChildNodes.item(0);
var Get_Child = Get_ChildNodes.item("name名");
var Get_Child = Get_ChildNodes.namedItem("name名");
var Get_Child = Get_ChildNodes.tags("タグ名");


var Get_Child;
for (i = 0; i < Count_ChildNodes; i++) {
Get_Child = Get_ChildNodes[i];
document.write(Get_Child);
}



Back



要素内の文字を参照する方法


要素内の文字やHTMLコードを参照する方法もあります。
基本は同じで、
要素を指定したら、参照します。

要素内の文字を参照できるプロパティは、
・firstChild.nodeValue
・innerText
・innerHTML
などが使用できます。


要素内の文字を参照する書式


//要素を「ID」で指定する
var Get_ChildNodes = document.querySelector('#ID名').childNodes;
//要素を指定した後に、要素を参照する
var Get_ID = document.querySelector('#ID名');
var Get_ChildNodes = Get_ID.childNodes;


var 要素内の文字を格納する変数 = Get_ChildNodes.firstChild.nodeValue;
var 要素内の文字を格納する変数 = Get_Child.innerText;
var 要素内の文字を格納する変数 = Get_Child.innerHTML;



Back



要素の属性値を参照する方法


要素の属性値も同じように、
・id;
・getAttribute("属性名");
・getAttributeNode("属性名").value
・getAttributeNode("属性名").nodeValue
・attributes.getNamedItem("属性名").value
・attributes.getNamedItem("属性名").nodeValue
を使用して参照することができます。


要素の属性値を参照する書式


//要素を「ID」で指定・参照する
var Get_ChildNodes = document.querySelector('#ID名').childNodes;
var 変数名 = document.querySelector('#ID名').id;
var 変数名 = document.querySelector('#ID名').getAttribute("属性名");
var 変数名 = document.querySelector('#ID名').getAttributeNode("属性名").value;
var 変数名 = document.querySelector('#ID名').getAttributeNode("属性名").nodeValue;
var 変数名 = document.querySelector('#ID名').attributes.getNamedItem("属性名").value;
var 変数名 = document.querySelector('#ID名').attributes.getNamedItem("属性名").nodeValue;
//要素を指定した後に、属性値を参照する
var Get_ID = document.querySelector('#ID名');

var 変数名 = Get_ID.id;
var 変数名 = Get_ID.getAttribute("属性名");
var 変数名 = Get_ID.getAttributeNode("属性名").value;
var 変数名 = Get_ID.getAttributeNode("属性名").nodeValue;
var 変数名 = Get_ID.attributes.getNamedItem("属性名").value;
var 変数名 = Get_ID.attributes.getNamedItem("属性名").nodeValue;



Back



属性値を設定する方法


属性値を設定するには、
・「=」で指定
・setAttribute("属性名", value)
・getAttributeNode("属性名").value
・getAttributeNode("属性名").nodeValue
・attributes.getNamedItem("属性名").value
・attributes.getNamedItem("属性名").nodeValue
・setAttributeNode("属性名")
などの方法がある。


要素の属性値を変更する書式


//要素を「ID」で指定・変更する
document.querySelector('#ID名').id = value;
document.querySelector('#ID名').setAttribute("属性名", value);
document.querySelector('#ID名').getAttributeNode("属性名").value = value;
document.querySelector('#ID名').getAttributeNode("属性名").nodeValue = value;
document.querySelector('#ID名').attributes.getNamedItem("属性名").value = value;
document.querySelector('#ID名').attributes.getNamedItem("属性名").nodeValue = value;
document.querySelector('#ID名').setAttributeNode("属性名");


//要素を指定した後に、属性値を変更する
var Get_ID = document.querySelector('#ID名');

Get_ID.id = value;
Get_ID.setAttribute("属性名", value);
Get_ID.getAttributeNode("属性名").value = value;
Get_ID.getAttributeNode("属性名").nodeValue = value;
Get_ID.attributes.getNamedItem("属性名").value = value;
Get_ID.attributes.getNamedItem("属性名").nodeValue = value;
Get_ID.setAttributeNode("属性名");



Back



属性を作成・削除する方法



属性を作成・削除する書式

createAttribute

var NewaAttr = document.createAttribute("属性名");
NewaAttr.nodeValue = "属性値";
document.querySelector('#ID名').attributes.setNamedItem(NewaAttr);

removeAttribute

document.querySelector('#ID名').removeAttribute("属性名");

removeAttributeNode

var GetAttrNode = element.getAttributeNode("属性名");
document.querySelector('#ID名').removeAttributeNode(GetAttrNode);




Back



DOMで使えるインターフェイス一覧


インターフェイスの中には、
色々な「プロパティ」「メソッド」が含まれていて、
その「プロパティ」「メソッド」を利用することで、
「Javascript」を利用して、Webページを動的にコントロールすることができます。


インターフェイスの一覧

インターフェイス名説明
DOMインターフェイス
Attr
CDATASection
CharacterData
ChildNode
Comment
CustomEvent
Document
DocumentFragment
DocumentType
DOMError
DOMException
DOMImplementation
DOMString
DOMTimeStamp
DOMStringList
DOMTokenList
Element
Event
EventTarget
HTMLCollection
MutationObserver
MutationRecord
NamedNodeMap
Node
NodeFilter
NodeIterator
NodeList
NonDocumentTypeChildNode
ParentNode
ProcessingInstruction
Selection
Range
Text
TextDecoder
TextEncoder
TimeRanges
TreeWalker
URL
Window
Worker
XMLDocument
  
  
SVGのインターフェイス
SVG要素のインターフェイス
SVGAElement
SVGAltGlyphElement
SVGAltGlyphDefElement
SVGAltGlyphItemElement
SVGAnimationElement
SVGAnimateElement
SVGAnimateColorElement
SVGAnimateMotionElement
SVGAnimateTransformElement
SVGCircleElement
SVGClipPathElement
SVGColorProfileElement
SVGComponentTransferFunctionElement
SVGCursorElement
SVGDefsElement
SVGDescElement
SVGElement
SVGEllipseElement
SVGFEBlendElement
SVGFEColorMatrixElement
SVGFEComponentTransferElement
SVGFECompositeElement
SVGFEConvolveMatrixElement
SVGFEDiffuseLightingElement
SVGFEDisplacementMapElement
SVGFEDistantLightElement
SVGFEDropShadowElement
SVGFEFloodElement
SVGFEFuncAElement
SVGFEFuncBElement
SVGFEFuncGElement
SVGFEFuncRElement
SVGFEGaussianBlurElement
SVGFEImageElement
SVGFEMergeElement
SVGFEMergeNodeElement
SVGFEMorphologyElement
SVGFEOffsetElement
SVGFEPointLightElement
SVGFESpecularLightingElement
SVGFESpotLightElement
SVGFETileElement
SVGFETurbulenceElement
SVGFilterElement
SVGFilterPrimitiveStandardAttributes
SVGFontElement
SVGFontFaceElement
SVGFontFaceFormatElement
SVGFontFaceNameElement
SVGFontFaceSrcElement
SVGFontFaceUriElement
SVGForeignObjectElement
SVGGElement
SVGGeometryElement
SVGGlyphElement
SVGGlyphRefElement
SVGGradientElement
SVGGraphicsElement
SVGHatchElement
SVGHatchpathElement
SVGHKernElement
SVGImageElement
SVGLinearGradientElement
SVGLineElement
SVGMarkerElement
SVGMaskElement
SVGMeshElement
SVGMeshGradientElement
SVGMeshpatchElement
SVGMeshrowElement
SVGMetadataElement
SVGMissingGlyphElement
SVGMPathElement
SVGPathElement
SVGPatternElement
SVGPolylineElement
SVGPolygonElement
SVGRadialGradientElement
SVGRectElement
SVGScriptElement
SVGSetElement
SVGSolidcolorElement
SVGStopElement
SVGStyleElement
SVGSVGElement
SVGSwitchElement
SVGSymbolElement
SVGTextContentElement
SVGTextElement
SVGTextPathElement
SVGTextPositioningElement
SVGTitleElement
SVGTRefElement
SVGTSpanElement
SVGUseElement
SVGUnknownElement
SVGViewElement
SVGVKernElement
  
  
SVGデータ型のインターフェイス【静的型】
SVGAngle
SVGColor
SVGICCColor
SVGElementInstance
SVGElementInstanceList
SVGLength
SVGLengthList
SVGMatrix
SVGNameList
SVGNumber
SVGNumberList
SVGPaint
SVGPathSeg
SVGPathSegClosePath
SVGPathSegMovetoAbs
SVGPathSegMovetoRel
SVGPathSegLinetoAbs
SVGPathSegLinetoRel
SVGPathSegCurvetoCubicAbs
SVGPathSegCurvetoCubicRel
SVGPathSegCurvetoQuadraticAbs
SVGPathSegCurvetoQuadraticRel
SVGPathSegArcAbs
SVGPathSegArcRel
SVGPathSegLinetoHorizontalAbs
SVGPathSegLinetoHorizontalRel
SVGPathSegLinetoVerticalAbs
SVGPathSegLinetoVerticalRel
SVGPathSegCurvetoCubicSmoothAbs
SVGPathSegCurvetoCubicSmoothRel
SVGPathSegCurvetoQuadraticSmoothAbs
SVGPathSegCurvetoQuadraticSmoothRel
SVGPathSegList
SVGPoint
SVGPointList
SVGPreserveAspectRatio
SVGRect
SVGStringList
SVGTransform
SVGTransformList
  
  
SVGデータ型のインターフェイス【アニメーション型】
SVGAnimatedAngle
SVGAnimatedBoolean
SVGAnimatedEnumeration
SVGAnimatedInteger
SVGAnimatedLength
SVGAnimatedLengthList
SVGAnimatedNumber
SVGAnimatedNumberList
SVGAnimatedPathData
SVGAnimatedPoints
SVGAnimatedPreserveAspectRatio
SVGAnimatedRect
SVGAnimatedString
SVGAnimatedTransformList
  
  
SVGデータ型のインターフェイス【SMIL関連】
ElementTimeControl
TimeEvent
  
  
SVGデータ型のインターフェイス【その他】
GetSVGDocument
ShadowAnimation
SVGColorProfileRule
SVGCSSRule
SVGDocument
SVGException
SVGExternalResourcesRequired
SVGFitToViewBox
SVGLangSpace
SVGLocatable
SVGRenderingIntent
SVGStylable
SVGTests
SVGTransformable
SVGUnitTypes
SVGUseElementShadowRoot
SVGURIReference
SVGViewSpec
SVGZoomAndPan
SVGZoomEvent


Back