HTML DOM ÊôÐÔ

ÊôÐÔÊǽڵ㣨HTML ÔªËØ£©µÄÖµ£¬ÄúÄܹ»»ñÈ¡»òÉèÖá£

±à³Ì½Ó¿Ú

¿Éͨ¹ý JavaScript £¨ÒÔ¼°ÆäËû±à³ÌÓïÑÔ£©¶Ô HTML DOM ½øÐзÃÎÊ¡£

ËùÓÐ HTML ÔªËØ±»¶¨ÒåΪ¶ÔÏ󣬶ø±à³Ì½Ó¿ÚÔòÊǶÔÏó·½·¨ºÍ¶ÔÏóÊôÐÔ¡£

·½·¨ÊÇÄúÄܹ»Ö´Ðе͝×÷£¨±ÈÈçÌí¼Ó»òÐÞ¸ÄÔªËØ£©¡£

ÊôÐÔÊÇÄúÄܹ»»ñÈ¡»òÉèÖõÄÖµ£¨±ÈÈç½ÚµãµÄÃû³Æ»òÄÚÈÝ£©¡£

innerHTML ÊôÐÔ

»ñÈ¡ÔªËØÄÚÈݵÄ×î¼òµ¥·½·¨ÊÇʹÓà innerHTML ÊôÐÔ¡£

innerHTML ÊôÐÔ¶ÔÓÚ»ñÈ¡»òÌæ»» HTML ÔªËØµÄÄÚÈݺÜÓÐÓá£

ʵÀý

ÏÂÃæµÄ´úÂë»ñÈ¡ id="intro" µÄ <p> ÔªËØµÄ innerHTML£º

ʵÀý

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>

</body>
</html>

Ç××ÔÊÔÒ»ÊÔ

ÔÚÉÏÃæµÄÀý×ÓÖУ¬getElementById ÊÇÒ»¸ö·½·¨£¬¶ø innerHTML ÊÇÊôÐÔ¡£

innerHTML ÊôÐÔ¿ÉÓÃÓÚ»ñÈ¡»ò¸Ä±äÈÎÒâ HTML ÔªËØ£¬°üÀ¨ <html> ºÍ <body>¡£

nodeName ÊôÐÔ

nodeName ÊôÐԹ涨½ÚµãµÄÃû³Æ¡£

  • nodeName ÊÇÖ»¶ÁµÄ
  • ÔªËØ½ÚµãµÄ nodeName Óë±êÇ©ÃûÏàͬ
  • ÊôÐÔ½ÚµãµÄ nodeName ÓëÊôÐÔÃûÏàͬ
  • Îı¾½ÚµãµÄ nodeName ʼÖÕÊÇ #text
  • Îĵµ½ÚµãµÄ nodeName ʼÖÕÊÇ #document

×¢ÊÍ£ºnodeName ʼÖÕ°üº¬ HTML ÔªËØµÄ´óд×Öĸ±êÇ©Ãû¡£

nodeValue ÊôÐÔ

nodeValue ÊôÐԹ涨½ÚµãµÄÖµ¡£

  • ÔªËØ½ÚµãµÄ nodeValue ÊÇ undefined »ò null
  • Îı¾½ÚµãµÄ nodeValue ÊÇÎı¾±¾Éí
  • ÊôÐÔ½ÚµãµÄ nodeValue ÊÇÊôÐÔÖµ

»ñÈ¡ÔªËØµÄÖµ

ÏÂÃæµÄÀý×Ó»áÈ¡»Ø <p id="intro"> ±êÇ©µÄÎı¾½ÚµãÖµ£º

ʵÀý

<html>
<body>

<p id="intro">Hello World!</p>

<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

Ç××ÔÊÔÒ»ÊÔ

nodeType ÊôÐÔ

nodeType ÊôÐÔ·µ»Ø½ÚµãµÄÀàÐÍ¡£nodeType ÊÇÖ»¶ÁµÄ¡£

±È½ÏÖØÒªµÄ½ÚµãÀàÐÍÓУº

ÔªËØÀàÐÍ NodeType
ÔªËØ 1
ÊôÐÔ 2
Îı¾ 3
×¢ÊÍ 8
Îĵµ 9
VUE