KoXo 자바스크립트 - 컬렉션(collection) - *** | childNodes (A, ACRONYM, ADDRESS, ...)

지정된 개체의 직접적인 자식개체인 HTML Elements와 TextNode 개체들의 컬렉션을 반환한다.

개체	script	HTML	규격	IE
a	[cVal]=a.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
acronym	[cVal]=acronym.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
address	[cVal]=address.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
applet	[cVal]=applet.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
area	[cVal]=area.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
attribute	[cVal]=attribute.childNodes	없음	없음	IE6(win32)
b	[cVal]=b.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
base	[cVal]=base.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
baseFont	[cVal]=baseFont.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
bdo	[cVal]=bdo.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
big	[cVal]=big.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
blockQuote	[cVal]=blockQuote.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
body	[cVal]=body.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
button	[cVal]=button.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
caption	[cVal]=caption.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
center	[cVal]=center.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
cite	[cVal]=cite.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
code	[cVal]=code.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
col	[cVal]=col.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
colGroup	[cVal]=colGroup.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
comment	[cVal]=comment.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
dd	[cVal]=dd.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
del	[cVal]=del.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
dfn	[cVal]=dfn.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
dir	[cVal]=dir.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
div	[cVal]=div.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
dl	[cVal]=dl.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
document	[cVal]=document.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
dt	[cVal]=dt.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
em	[cVal]=em.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
embed	[cVal]=embed.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
fieldSet	[cVal]=fieldSet.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
font	[cVal]=font.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
form	[cVal]=form.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
frame	[cVal]=frame.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
frameSet	[cVal]=frameSet.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
head	[cVal]=head.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
hn	[cVal]=hn.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
hr	[cVal]=hr.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
html	[cVal]=html.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
i	[cVal]=i.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
iFrame	[cVal]=iFrame.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
img	[cVal]=img.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
ins	[cVal]=ins.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
kbd	[cVal]=kbd.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
label	[cVal]=label.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
legend	[cVal]=legend.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
li	[cVal]=li.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
link	[cVal]=link.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
listing	[cVal]=listing.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
map	[cVal]=map.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
marquee	[cVal]=marquee.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
menu	[cVal]=menu.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
nextID	[cVal]=nextID.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
ol	[cVal]=ol.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
Option	[cVal]=Option.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
p	[cVal]=p.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
plainText	[cVal]=plainText.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
pre	[cVal]=pre.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
q	[cVal]=q.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
s	[cVal]=s.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
samp	[cVal]=samp.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
script	[cVal]=script.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
select	[cVal]=select.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
small	[cVal]=small.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
span	[cVal]=span.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
strike	[cVal]=strike.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
strong	[cVal]=strong.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
sub	[cVal]=sub.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
sup	[cVal]=sup.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
table	[cVal]=table.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
tBody	[cVal]=tBody.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
td	[cVal]=td.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
textArea	[cVal]=textArea.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
tFoot	[cVal]=tFoot.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
th	[cVal]=th.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
tHead	[cVal]=tHead.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
title	[cVal]=title.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
tr	[cVal]=tr.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
tt	[cVal]=tt.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
u	[cVal]=u.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
ul	[cVal]=ul.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
var	[cVal]=var.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)
xmp	[cVal]=xmp.childNodes	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)

개체

script

HTML

규격

[cVal]=a.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

acronym

[cVal]=acronym.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

address

[cVal]=address.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

applet

[cVal]=applet.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

area

[cVal]=area.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

attribute

[cVal]=attribute.childNodes

없음

IE6(win32)

[cVal]=b.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

base

[cVal]=base.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

baseFont

[cVal]=baseFont.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

bdo

[cVal]=bdo.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

big

[cVal]=big.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

blockQuote

[cVal]=blockQuote.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

body

[cVal]=body.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

button

[cVal]=button.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

caption

[cVal]=caption.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

center

[cVal]=center.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

cite

[cVal]=cite.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

code

[cVal]=code.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

col

[cVal]=col.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

colGroup

[cVal]=colGroup.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

comment

[cVal]=comment.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=dd.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

del

[cVal]=del.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

dfn

[cVal]=dfn.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

dir

[cVal]=dir.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

div

[cVal]=div.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=dl.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

document

[cVal]=document.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=dt.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=em.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

embed

[cVal]=embed.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

fieldSet

[cVal]=fieldSet.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

font

[cVal]=font.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

form

[cVal]=form.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

frame

[cVal]=frame.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

frameSet

[cVal]=frameSet.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

head

[cVal]=head.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=hn.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=hr.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

html

[cVal]=html.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=i.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

iFrame

[cVal]=iFrame.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

img

[cVal]=img.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

ins

[cVal]=ins.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

kbd

[cVal]=kbd.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

label

[cVal]=label.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

legend

[cVal]=legend.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=li.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

link

[cVal]=link.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

listing

[cVal]=listing.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

map

[cVal]=map.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

marquee

[cVal]=marquee.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=menu.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

nextID

[cVal]=nextID.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=ol.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

Option

[cVal]=Option.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=p.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

plainText

[cVal]=plainText.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

pre

[cVal]=pre.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=q.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=s.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

samp

[cVal]=samp.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

script

[cVal]=script.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

select

[cVal]=select.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

small

[cVal]=small.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

span

[cVal]=span.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

strike

[cVal]=strike.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

strong

[cVal]=strong.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

sub

[cVal]=sub.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

sup

[cVal]=sup.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

table

[cVal]=table.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

tBody

[cVal]=tBody.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=td.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

textArea

[cVal]=textArea.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

tFoot

[cVal]=tFoot.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=th.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

tHead

[cVal]=tHead.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

title

[cVal]=title.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=tr.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=tt.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=u.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

[cVal]=ul.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

var

[cVal]=var.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

xmp

[cVal]=xmp.childNodes

없음

IE5(win16,win32,unix,mac),IE5.5(ce)

length 속성 IE
⇒ 컬렉션의 길이를 반환하거나 지정한다.

문법: [iVal=]object.childNodes.length

코드: document.write(oObj.length); 결과: 27
코드: for (i=0;i< oObj.length;i++){ document.write(oObj[i].nodeName+', ')}; 결과: #text, SCRIPT, #text, P, #text, SCRIPT, TABLE, #text, DL, #text, BR, #text, SCRIPT, A, TABLE, #text, P, #text, TABLE, #text, BR, #text, SCRIPT, A, TABLE, #text, DIV,
코드: document.write(oObj[4].childNodes[0].childNodes[0].childNodes[0].nodeName); 결과:

item 메서드 IE
⇒ 인덱스로 children이나 childNodes 컬렉션의 한개의 개체를 반환한다.

문법: [oVal=]object.childNodes.item('iVal')

코드: document.write(oObj.item(1).nodeName 결과: SCRIPT

urns 메서드 IE
⇒ behavior가 첨부된 모든 개체의 컬렉션을 반환한다.

문법: [oVal=]object.childNodes.urns('sVal')

코드: document.write(Sample.behaviorUrns.length) 결과:
코드: document.write(document.all.namedItem('Sample').children.urns('../public/hilite.htc')) 결과:

createElement, insertBefore 메서드를 이용한 개체를 생성하고 삽입하는 childNodes 컬렉션 예제

span1 문자열
span2 문자열
span3 문자열

결과 표시창

<OL id=testOl style="border:solid 1 blue"><LI>span1 문자열 <LI>span2 문자열 <LI>span3 문자열</OL>
<SCRIPT>
str='';
allColl=document.all.tags('ol');
testObj=allColl.item('testOl');
sObj=testObj.childNodes;
str+='sObj.length='+sObj.length+'<BR>';
for (i=0;i< sObj.length;i++){
  str+='sObj['+i+'].nodeName='+sObj[i].nodeName+' '+sObj[i].innerText+'<BR>';
}
str+='<BR>';
str+='<BUTTON onclick=doInsert()>엘레멘트 삽입</BUTTON>';
document.write(str);

function doInsert(){
  if (sObj.length>5) return;
  str='';
  newObj1=document.createElement('<LI>');
  newObj1.innerText='생성된 개체 문자열 '+i;
  testObj.insertBefore(newObj1);
  sObj=testObj.childNodes;
  str+='sObj.length='+sObj.length+'<BR>';
  for (i=0;i< sObj.length;i++){
    str+='sObj['+i+'].nodeName='+sObj[i].nodeName+' '+sObj[i].innerText+'<BR>';
  }
  showA.innerHTML=str;
}
</SCRIPT>
<DIV id=showA>결과 표시창</DIV>

Script	[cVal]=object.childNodes
	[oVal]=object.childNodes(index)