DOM javascript 入門

   

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>

 

 

PR



 - javascript 入門

Translate »