DOM javascript 入門
DOM
DIMとはDocument Object Modeです。
Document Object Modeとの名前の通り
ツリー構造にオブジェクトがなっております。
Documentが最上位になってます。
htmlの構造もhtmlの下にheadとbody要素がありその下にhやimgがありますね。
W3C DOMでjavascriptで要素を指定してアクセスします。
要素のアクセスには簡単に言うと二つあります。
要素のタグをしてする場合と要素にidを付けた要素をid名で指定する方法です。
getElementsByTagName()
名前の通りタグで指定する
getElementsByTagName(“p”)[0]
要素を配列形式で返すので[]で指定してください。
getElementByid()
idで指定する
getElementByid(“id名”)
idは単一です。
childNodes()
childNodesとは子ノードのことですね。
getElementsByTagName() や
getElementByid() は要素しか返しません。
テキストはテキストノードを返す必要がありので
childNodes[0]でテキストノードを含めた子ノードを返す
正確にはdocument.getElementByid((“id名”) .childNodes[0]
テキストノードの変更には
nodeValue テキストノードを返す
getElementByid((“id名”) .childNodes[0]
正確にはdocument.getElementByid(“id名”) .childNodes[0].nodeValue = “文字列”;
属性の変更には
setAttribute で属性を変更できる
document.getElementByid(“id名”) .childNodes[0].setAttribute(“属性名”,”変更するファイル名や文字列”)
getArrribute で属性を参照できる
document.getElementByid(“id名”) .childNodes[0].getArrribute(“属性名”,”変更するファイル名や文字列”)
属性値を変更してもわかりにくいのでp要素のテキストノードを変更するサンプル。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>sample1</title>
<script type=”text/javascript”>
function helloworld(){
document.getElementsByTagName(“p”)[0].childNodes[0].nodeValue = “変更されました”;
}
</script>
</head>
<body>
<form>
<p>変更前</p>
<input type=”button” value=”ここをクリック” onClick=” helloworld()”>
</form>
</body>
<html>