DOMÂiDocument Object Modelj‚ÌŠî–{

<< ƒŠƒ“ƒN•锟斤拷Žš‚Ì”wŒi—Ìˆæ‚Å‚àƒNƒŠƒbƒN‰Â”\‚É‚·‚é | TOP | Dom getElementsByName()ƒƒ\ƒbƒh ƒ‰ƒWƒIƒ{ƒ^ƒ“ >>

2009”N09ŒŽ28“ú

DOMiDocument Object Modelj‚ÌŠî–{

ƒXƒ|ƒ“ƒT[ƒh@ƒŠƒ“ƒN

DOMiDocument Object Modelj‚Æ‚Í

JavaScript‚Ì‚æ‚¤‚ÈƒvƒƒOƒ‰ƒ~ƒ“ƒOŒ¾Œê‚©‚çC
HTML/XML•锟斤拷‘‚ÉƒAƒNƒZƒX‚µ‚Ä ‚»‚ê‚ð‘€ì‚·‚é•û–@‚ð’ñ‹Ÿ‚µ‚Ä‚锟斤拷‚Ü‚·B

DOM‚Å‚ÍAHTML/XML•锟斤拷‘‚Ì‚·‚锟絶‚Ä‚Ì—v‘f‚Íƒm[ƒh‚ÆŒÄ‚Î‚ê‚éƒIƒuƒWƒFƒNƒg‚©‚ç\锟斤拷‚³‚ê‚Ä‚锟斤拷‚Ü‚·B
‚锟絵‚Ìƒm[ƒh‚Í‚锟斤拷‚‚Â‚©‚ ‚è‚Ü‚·‚ª
—v‘fƒm[ƒh (element node)AƒeƒLƒXƒgƒm[ƒh (text node)A‘®«ƒm[ƒh (attribute node)‚Ì
‚Rƒc‚Ìƒm[ƒh‚ªŠî–{‚Å‚·B

DOM‚ÆjavaScript‚ÌŠÖ˜A‚É‚Â‚锟斤拷‚Ä‚ÍThe DOM and JavaScript ‚ðŽQl‚É‚µ‚Ä‚‚¾‚³‚锟斤拷B

ƒƒŠƒ|ƒbƒvI‚È‚ç‰SŽÒ‚Å‚àˆÀSI
ƒz[ƒ€ƒy[ƒWŠÈ’Pì锟斤拷@uƒzƒ€ƒyƒƒŠIvAuwoopa!v
CGIŠÈ’PÝ’u@uCGI CANDYBOX!v‚ª–³—¿‚ÅŽg‚¦‚Ü‚·II

ƒhƒLƒ…ƒƒ“ƒgƒcƒŠ[(DOMƒcƒŠ[)

<p align="left">‚锟絵‚ê‚ªDOMƒcƒŠ[‚Ì\‘锟斤拷‚Å‚·B</p>

ã‹L‚Ìhtml ‚Å‚Í
ƒ^ƒO‚ª—v‘fƒm[ƒhAiŠÈ’P‚ÉŒ¾‚¦‚ÎHTML‚Ìƒ^ƒO‚Ì‚锟絵‚Æ‚Å‚·j
ƒ^ƒO‚ÉˆÍ‚Ü‚ê‚½•锟斤拷Žš—ñ "‚锟絵‚ê‚ªDOMƒcƒŠ[‚Ì\‘锟斤拷‚Å‚·B" ‚ªƒeƒLƒXƒgƒm[ƒh‚Å‚·B
align="left"‚ª‘®«ƒm[ƒh‚É‚È‚è‚Ü‚·B
DOMƒcƒŠ[‚Å‚Í•锟斤拷Žš—ñ‚»‚Ì‚à‚Ì‚ªˆêƒc‚Ìƒm[ƒh‚É‚È‚è‚Ü‚·B

‚锟絵‚ê‚ðDOMƒcƒŠ[‚Å•\‚·‚Æ‰º}‚Ì‚æ‚¤‚É‚È‚è‚Ü‚·B

—v‘fƒm[ƒh(eƒm[ƒh)parentNode
 <p>
 „\„Ÿ„Ÿ ƒeƒLƒXƒgƒm[ƒh(Žqƒm[ƒh)childNodes[0]
 „ @@@ "‚锟絵‚ê‚ªDOMƒcƒŠ[‚Ì\‘锟斤拷‚Å‚·B"
 „ 
 „¤„Ÿ„Ÿ <p>‚Ì‘®«ƒm[ƒh
@@@@@   align="left"

—v‘fƒm[ƒh ‚ªƒeƒLƒXƒgƒm[ƒh "‚锟絵‚ê‚ªDOMƒcƒŠ[‚Ì\‘锟斤拷‚Å‚·B"‚Ìeƒm[ƒh‚Å‚·B
‹t‚É‚Ý‚é‚ÆA‚锟絵‚ÌƒeƒLƒXƒgƒm[ƒh‚Í—v‘fƒm[ƒh ‚ÌŽqƒm[ƒhchildNodes[0]‚É‚È‚è‚Ü‚·B
‘®«ƒm[ƒh‚ÍŽqƒm[ƒh‚É‚È‚è‚Ü‚·‚ªAŽqƒm[ƒh‚Æ‚µ‚Äˆµ‚í‚ê‚Ü‚¹‚ñB

’* ‚锟絵‚锟絵‚Å‚Íeƒm[ƒh‚Æ‚µ‚Ä‚锟斤拷‚Ü‚·‚ªŽÀ‚Íe‚Æ‚µ‚Äbody ƒ^ƒO‚ª‚ ‚è‚Ü‚·‚µA‘¼‚Ì—v‘f‚ª‚ ‚é‚锟絵‚Æ‚à‚ ‚è‚Ü‚·B
‚锟絵‚Ì—á‚Å‚ÍƒcƒŠ[‚Í”ñí‚ÉŠÈ’P‚Å‚·‚ªŽÀÛ‚ÌHTML•锟斤拷‘‚Í‚½‚‚³‚ñ‚Ìƒm[ƒh‚©‚ç\锟斤拷‚³‚ê‚Ä‚锟斤拷‚Ü‚·B
ˆê”Ô–Ú‚ÉŒ»‚ê‚½Žqƒm[ƒh‚ÍchildNodes[0]A“ñ”Ô–Ú‚ÍchildNodes[1]\\\\[2]A[3]‚Æ‚È‚è‚Ü‚·B

ƒ^ƒO‚É id‘®«‚ð•t‚¯A‚Ð‚Æ‚Âƒ^ƒO‚ð“ü‚êŽq‚É‚µ‚Ä‚Ý‚Ü‚µ‚½B

<p align="left" id="smp">‚锟絵‚ê‚ª<strong>DOMƒcƒŠ[</strong>‚Ì\‘锟斤拷‚Å‚·B</p>

‚锟絵‚ê‚ªDOMƒcƒŠ[‚Ì\‘锟斤拷‚Å‚·B

eƒm[ƒhƒ^ƒO‚É‚ÍŽqƒm[ƒh‚Å‚ ‚éA‚Q‚Â‚ÌƒeƒLƒXƒgƒm[ƒh‚Æ
‚P‚Â‚Ì—v‘fƒm[ƒh‚ªÝ‚è‚Ü‚·B‚³‚ç‚É‚锟絵‚Ì—v‘fƒm[ƒh‚É‚Í‚P‚Â‚ÌŽqƒm[ƒh‚ª‚ ‚è‚Ü‚·B

—v‘fƒm[ƒh(eƒm[ƒh)parentNode
<p>
 „\„Ÿ„Ÿ ƒeƒLƒXƒgƒm[ƒh(Žqƒm[ƒh)childNodes[0] 
 „ @@@ "‚锟絵‚ê‚ª"
 „ @
 „\„Ÿ„Ÿ —v‘fƒm[ƒh(Žqƒm[ƒh)childNodes[1]
 „ @@@<strong>
 „         „ @@@@ 
 „         „¤„Ÿ„Ÿ ƒeƒLƒXƒgƒm[ƒh(Žqƒm[ƒh)childNodes[1].childNodes[0]
 „ @@@              "DOMƒcƒŠ["
 „ 
 „\„Ÿ„Ÿ ƒeƒLƒXƒgƒm[ƒh(Žqƒm[ƒh)childNodes[2]
 „ @@@ "‚Ì\‘锟斤拷‚Å‚·B"
 „ 
 „¤„Ÿ„Ÿ <p>‚Ì‘®«ƒm[ƒh
@@@@@ align="left"
@@@@@ id="smp"

ƒvƒƒpƒeƒB	•Ô‚è’l
nodeValue	FƒeƒLƒXƒg’Šo // —v‘fƒm[ƒh‚Ínull AƒeƒLƒXƒgƒm[ƒh‚Íƒm[ƒh‚Ì•锟斤拷Žš—ñ
nodeName	Fƒm[ƒh‚Ìƒ^ƒO–¼ // —v‘f‚Íƒ^ƒO–¼AƒeƒLƒXƒgƒm[ƒh‚Í "#text"‚Æ‚锟斤拷‚¤•锟斤拷Žš
childNones.length	FŽqƒm[ƒh‚Ì”
nodeType	FŠeŽíƒm[ƒh‚ª•Ô‚·”’l // —v‘fƒm[ƒh‚Í1CƒeƒLƒXƒgƒm[ƒh‚Í3
getAttributeNode	Fƒm[ƒh‚ÌŽw’è‚µ‚½‘®«–¼‚Ì‘®«’l‚ð“¾‚é
`’) getAttributeNode‚Íƒƒ\ƒbƒh‚Å‚·` Še ƒvƒƒpƒeƒB‚ðƒNƒŠƒbƒN‚·‚é‚Æ‚»‚ê‚É‘Î‰ž‚·‚é ’l ‚ª•\Ž¦‚³‚ê‚Ü‚·B

document.getElementById('id‘®«’l');

‚Å‚Ídocument.getElementById ƒƒ\ƒbƒh‚ðŽg‚Á‚ÄŠeAŽqƒm[ƒh‚ÉƒAƒNƒZƒX‚µ‚Ä‚Ý‚Ü‚·B
‚锟絵‚锟絵‚Å‚ÍŽw’è‚µ‚½'id‘®«’l‚ðŽ‚Â—v‘fƒm[ƒh ‚ª‹N“_‚É‚È‚è‚Ü‚·B

‚锟絵‚ê‚ªDOMƒcƒŠ[‚Ì\‘锟斤拷‚Å‚·B

var Mnode = document.getElementById("smp");
// <p>ƒ^ƒO“à‚Ì‘S—v‘f‚ð•Ï” Mnode ‚ÉŠi”[‚µ‚Ü‚·B

Mnode.*****;
Mnode.childNodes[0].*****;
Mnode.childNodes[1].*****;
Mnode.childNodes[1].childNodes[0].*****;
Mnode.childNodes[2].*****;

***** ‚Éã‹L,•\‚ÌƒvƒƒpƒeƒB(getAttributeNode‚ðœ‚)‚ð‚锟斤拷‚ê‚Ü‚·‚Æ
‚»‚ê‚É‘Î‰ž‚·‚é’l‚ª•Ô‚Á‚Ä‚«‚Ü‚·B

—v‘f‚Ì‘®«‚Ì’l‚ð“¾‚é‚É‚ÍgetAttributeNode()ƒƒ\ƒbƒh‚ðŽg‚锟斤拷‚Ü‚·B
ˆø”‚É‘®«–¼‚ð“ü‚ê‚é‚Æ‚»‚Ì‘®«’l‚ð•Ô‚µ‚Ü‚·B
Mnode.getAttributeNode('align').value‚Å‚»‚Ì‘®«’l left ‚ð
Mnode.getAttributeNode('id').value‚Åid‘®«’l smp ‚ðŽæ“¾‚·‚é‚锟絵‚Æ‚ª‚Å‚«‚Ü‚·B

a —v‘f‚Ì‘®«’l‚âƒm[ƒh‚Ì’l‚ÌŽæ“¾‚Æ•ÏX

JavaScript ƒXƒ^ƒCƒ‹ƒV[ƒgƒTƒ“ƒvƒ‹W
<a href="http://javascript123.seesaa.net/" target="_blank" class="Clink" id="link1">JavaScript ƒXƒ^ƒCƒ‹ƒV[ƒgƒTƒ“ƒvƒ‹W</a>

’l‚ÌŽæ“¾
var Mnode = document.getElementById("link1");
Mnode.getAttributeNode('href').value; // http://javascript123.seesaa.net/
Mnode.getAttributeNode('target').value; // _blank
Mnode.getAttributeNode('class').value; // Clink
Mnode.getAttributeNode('id').value; // link1
Mnode.childNodes[0].nodeValue; // JavaScript ƒXƒ^ƒCƒ‹ƒV[ƒgƒTƒ“ƒvƒ‹W
@<*Mnodeƒm[ƒh‚É‚Í‚P‚Â‚µ‚©Žqƒm[ƒh‚Í‚È‚锟斤拷‚Ì‚ÅfirstChild(Å‰‚ÌŽqƒm[ƒh)‚Å‚à
lastChild(ÅŒã‚ÌŽqƒm[ƒh)‚Å‚à“¯‚锟斤拷’l‚ðŽæ“¾‚Å‚«‚Ü‚·B*>
Mnode.firstChild.nodeValue; // JavaScript ƒXƒ^ƒCƒ‹ƒV[ƒgƒTƒ“ƒvƒ‹W
Mnode.lastChild.nodeValue; // JavaScript ƒXƒ^ƒCƒ‹ƒV[ƒgƒTƒ“ƒvƒ‹W

ƒŠƒ“ƒNæ‚ÆƒŠƒ“ƒN•锟斤拷Žš‚ðgetAttributeNode‚ÆnodeValue‚Å•ÏX‚µ‚Ü‚·B

’l‚Ì•ÏX
var Mnode = document.getElementById("link1");
Mnode.getAttributeNode("href").value="http://www.google.co.jp/";
Mnode.childNodes[0].nodeValue="Google"; 
<*’l‚ÌŽæ“¾‚Æ‚Í”½‘Î‚ÉŠó–]‚·‚é’l‚ð‘ã“ü‚·‚ê‚Î‚Å‚«‚ ‚ª‚è‚Å‚·B*>

ã‹L‚Ì—p—á‚ÍŠÈ’P‚Å‚·‚ª‚锟絵‚Ì‚æ‚¤‚É‚µ‚ÄJavascript‚©‚çDOMƒcƒŠ[‚ð’H‚Á‚Ä
HTML•锟斤拷‘‚ðŽ©—R‚É‘€ì‚Å‚«‚Ü‚·B

¡‰ñ‚Ídocument.getElementById("id’l");‚ðŽg‚Á‚ÄHTML“à‚Ì—v‘f‚ð“Á’è‚µ‚Ä
ƒAƒNƒZƒX‚µ‚Ü‚µ‚½‚ª‚锟絵‚Ì‘¼‚É‚Qƒc‚Ìƒƒ\ƒbƒh‚ª—pˆÓ‚³‚ê‚Ä‚锟斤拷‚Ü‚·B

document.getElementsByTagName("ƒ^ƒO–¼");

document.getElementsByName("name‘®«’l");

ƒ`ƒFƒbƒN‚ª“ü‚é‚Æƒ`ƒFƒbƒNƒ{ƒbƒNƒX‚Æƒ‰ƒxƒ‹(•锟斤拷Žš)‚Ì”wŒiF‚ª•Ï‚í‚è‚Ü‚·
ƒ`ƒFƒbƒNƒ{ƒbƒNƒX‚Ìƒ`ƒFƒbƒN‚Å‚«‚é”‚ð锟斤拷ŒÀ‚µ,“ü—Í•s‰Â‚É‚µ‚Ü‚·
ƒ`ƒFƒbƒNƒ{ƒbƒNƒX‚Ì‚·‚锟絶‚Ä‘I‘ð ‚·‚锟絶‚Ä‰ðœ
ƒcƒŠ[ƒƒjƒ…[@ƒ`ƒFƒbƒNƒ{ƒbƒNƒX‚Éƒ`ƒFƒbƒN‚ð“ü‚ê‚é‚Æƒƒjƒ…[‚ª“WŠJ
ƒ`ƒFƒbƒN‚ª“ü‚é‚Æƒ`ƒFƒbƒNƒ{ƒbƒNƒX‚Æƒ‰ƒxƒ‹(•锟斤拷Žš)‚Ì”wŒiF‚ª•Ï‚í‚è‚Ü‚·
JavaScript‚Å“®“I‚ÉƒNƒ‰ƒX–¼‚ð•t‚¯‚Ü‚·B•Ï‚¦‚Ü‚·
ƒe[ƒuƒ‹‚Ìs‚Ì”wŒiF‚ðˆês‚锟絅‚«‚É•Ï‚¦‚Ü‚·
ƒgƒOƒ‹ƒXƒCƒbƒ`i‚O‚Æ‚PAtrue‚Æfalse‚ðØ‚è‘Ö‚¦jðŒ•ªŠò