강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

DOM 참조(JavaScript이용)
작성자 : 99 단국강토
등록날짜 : 2009.02.09 09:45
1,621

1. Attribute

(1) 부모노드

부모노드는 Node이다. Element, Entity, Notation 내의 애트리뷰트를 관리한다. 프로퍼티와 메소드가 많지는 않지만 몆가지라도 알아두면 쓰임새가 있다. Attribute노드는 실제로 Attr로 정의된다.

(2) Attribute Propeties


1) name

타 입
string
설 명
Attribute 노드의 이름을 나타낸다. Node로 부터 상속박은 nodeName과 같다.

2) specified

타 입
Element 논리값
설 명
Attribute 가 파서에 의해 로드되기전에 XML문서에 기입된다면 true로 설정된다.

3) value

타 입
string
설 명
Attribute 노드의 값을 나타낸다. Node로 부터 상속박은 nodeValue과 같다.

2. NodeList

(1) 부모노드

부모노드는 없다. DOM 트리를 검색하는데 있어서 결정적인 역할을 하는 요소이다.

(2) NodeList Propeties


1) length

타 입
unsigned long integer
설 명
NodeList안에 있는 자식의 개수를 리턴한다.

(2) NodeList Methods

1) item(index)

인자
index는 unsigned long integer 값이다.
반환값
node
예외처리
none
설명
NodeList가 관리하는 자식들중에 index값에 해당하는 노드을 리턴한다.
첫번째 자식 : index = 0
마지막 자식 : index = length -1
IE5.0 이상에서는 somenode.childNodes(index)를 사용할 수 있다.

2. NamedNodeMap

(1) 부모노드

부모노드는 없다. 애트리뷰트 콜렉션을 유지하기 위해 사용된다.

(2) NamedNodeMap Propeties


1) length

타 입
unsigned long integer
설 명
NamedNodeMap안에 있는 자식의 개수를 리턴한다.

(2) NamedNodeMap Methods

1) item(index)

인자
index는 unsigned long integer 값이다.
반환값
node
예외처리
none
설명
NamedNodeMap가 관리하는 자식들중에 index값에 해당하는 노드을 리턴한다.
첫번째 자식 : index = 0
마지막 자식 : index = length -1

2) getNmaedItem(name)

인자
name은 string 값이다.
반환값
node
예외처리
none
설명

name과 같은 nodeName 프로퍼티를 가지는 노드를 리턴한다 . 만약 없으면 null을 리턴한다.


3) setNmaedItem(node)

인자
node는 Node이다.
반환값
node
예외처리
DOMException
설명
node와 함께 지정된 노드를 트리에 더하고 node를 리턴한다. 만약 같은 이름의 node가 존재한다면 node로 치환되고 옛날 노드는 리턴된다.
다음 3가지중에 한가지라도 걸리면 예외상황이 발생한다.
1) node가 다른문서 안에서 생성된 경우
2) NamedNodeMap이 read-only인경우
3) node가 현재 다른 앨리먼트내에 있는 애트리뷰트인 경우
단, IE5.0이상에서는 Document에서 createAttribute로 생성한 노드를 예외상황없이 다른 Document 노드의 트리에 입력할 수 있다.

4) removeNmaedItem(name)

인자
name은 string 값이다.
반환값
node
예외처리
DOMException
설명

name과 같은 nodeName을 가지는 노드를 삭제하고 노드를 리턴한다 . 만약 처음부터 노드가 없으면 null을 리턴하고 지정된 노드가 없다면 예외상황이 발생한다.
단, IE5.0이상에서는 노드가 없더라도 예외상황이 발생되지 않는다.


3. CharacterData

(1) 부모노드

부모노드는 Node 이다. Text, CDATASection, Comment 노드에 의해 사용되어 진다. 때문에 string을 다루기 위한 프로퍼티와 메소드가 제공된다.

(2) CharacterData Propeties

1) length

타 입
integer
설 명
text string의 글자 수를 리턴한다.

2) data

타 입
string
설 명
CharaterData로부터 상속받은 노드에 저장된 text를 리턴한다.
nodeValue와 같은 값을 리턴한다.

(2) CharacterData Methods

1) substringData(offset,count)

인자
offset,count는 unsigned long integer 값이다.
반환값
string
예외처리
DOMEception
설명
offset에서 시작하는 문자열로부터 count만큼의 문자를 리턴한다.
offset,count가 정당하지 않다면 에러를 낸다.
offset은 양의 정수값을 가진다. 또한 전체길이(length)를 초과할 수 없다.
offset을 0으로 설정하는 것과 count를 length로 설정한다는 것은 string 전체를 리턴한다.

2) appendData(appendString)

인자
appendString은 string 값이다.
반환값
node
예외처리
DOMEception
설명

기존의 텍스트에 appendString을 덧붙인다.
노드가 read-only면 에러가 난다.


3) insertData(offset, newString)

인자
offset은 unsigned long integer, newString은 string이다.
반환값
node
예외처리
DOMException
설명
offset에 위치한 기존의 텍스트에 newString을 삽입한다.
offset이 정당하지 않거나 read-only면 에러가 발생한다.

4) deleteData(offset,count)

인자
offset,count는 unsigned long integer 값이다.
반환값
none
예외처리
DOMException
설명

기존의 텍스트에서 offset에서 시작하는 텍스트 스트링으로부터 count만큼 문자를 제거한다.
offset이 정당하지 않거나 read-only면 에러가 발생한다.


4) replaceData(offset, count, data)

인자
offset,count는 unsigned long integer, data는 string이다.
반환값
none
예외처리
DOMException
설명

기존의 텍스트에서 offset에서 시작하는 텍스트 스트링으로부터 count만큼 문자를 data로 치환한다.
offset이 정당하지 않거나 read-only면 에러가 발생한다.


4. Text

(1) 부모노드

부모노드는 characterData이다.

(2) Text Methods


1) splitText(offset)

인자
offset은 long integer 이다.
반환값
none
예외처리
none
설명

호출된 텍스트를 두개의 텍스트로 만든다. 첫번째는 offset의 위치를 포함 텍스트이고, 두번째 텍스트는 offset 이후의 모든 텍스트이다.


5. CDATASection

(1) 부모노드

부모노드는 Text 이다. Text 노드와 비슷하게 행동하지만 단하나의 차이는 CDATA 부분이 그안에 저장될 수 있다.

6. DocumentType

(1) 부모노드

부모노드는 Node이다. DTD를 나타내는데 사용한다. 다만 Entity와 Notation만 나타낸다. 모든 프로퍼티가 read-only 이다.

(2) DocumentType Propeties

1) name

타 입
string
설 명
DOCTYPE 바로 다음에 아노는 이름을 나타내며 바로 root element의 이름이다.

2) entities

타 입
namedNodeMap
설 명
이 문서에 대한 Entiy 콜렉션을 나타낸다.
각 Entity 노드는 DTD에 있는 엔티티선언을 모델화한 것이다.

3) notations

타 입
namedNodeMap
설 명
이 문서에 대한 Notation 콜렉션을 나타낸다.
각 Notation노드는 DTD에 있는 notation 선언을 모델화한 것이다.

7. Entity

(1) 부모노드

부모노드는 Node이다. DTD에 선언된 entity 를 모델화한 것이다. DOM 트리에서는 entity 노드가 DocumentType 노드 아래에서만 사용된다.

(2) Entity Propeties

1) systemId

타 입
string
설 명
엔티티와 관련된 시스템식별자를 나타낸다. 없다면 null이다.

2) publicId

타 입
string
설 명
엔티티와 관련된 공개된 식별자를 나타낸다. 없다면 null이다.

3) notationName

타 입
string
설 명
파서되지 않은 엔티티에 대한 notation 이름을 나타낸다. 파서된 엔티티뿐이라면 null을 나타낸다.

8. Notation

(1) 부모노드

부모노드는 Node이다. DTD에 선언된 notation을 모델화한 것이다. DOM 트리에서는Notation 노드가 DocumentType 노드 아래에서만 사용된다.

(2) Notation Propeties

1) systemId

타 입
string
설 명
Notation과 관련된 시스템식별자를 나타낸다. 없다면 null이다.

2) publicId

타 입
string
설 명
Notation과 관련된 공개된 식별자를 나타낸다. 없다면 null이다.

9. EntityReference

(1) 부모노드

부모노드는 Node 이다. EntityReference 노드는 대응하는 Entity 노드를 가리키는데 사용된다. 이 노드 타입은 그 자신의 프로퍼티와 메소드의 어떤것도 확장시키 않는다. 때문에 단지 Node안에 선언된 메소드와 프로퍼티만 EntityReference와 함께 사용할 수 있다. EntityReference 아래에 있는 노드는 read-only 이다. EntityReference 노드는 하위트리 전체를 포함해서 다수의 노드를 포함하는데 사용되어질 수 있다.

10. ProcessingInstruction

(1) 부모노드

부모노드는 Node이다. ProcessingInstruction 노드는 XML문서내의 processingInstruction을 나타내는데 사용된다.

(2) ProcessingInstruction Propeties

1) target

타 입
string
설 명
<?target text?>의 형식으로 존재하는 PI의 표적을 나타낸다.

2) data

타 입
string
설 명
<?target text?>의 형식으로 존재하는 PI의 텍스트를 나타낸다.

11. Comment

(1) 부모노드

부모노드는 CharacterData 이다. Comment 노드는 XML문서안의 <!-- text -->와 같은 주석을 나타내는데 사용된다. 이 노드는 Text와 비슷하게 동작한다. 왜냐하면 주석내 텍스트을 사용할 수 있기 때문이다.

12. DocumentFragment

(1) 부모노드

부모노드는 Node 이다.

DocumentFragment 노드는 어떠한 XML문서를 나타내지 않는다. 대신에 노드를 이동시칼때 위치소유자(place holder)로서 사용된다. DocumentFragment 노드를 어떤 노드(Document나 Element)의 자식 리스트에 입력할때 오직 DocumentFragment의 자식들과 DocumentFragment 그 자신만이 입력된다. DocumentFragment는 트리안에 존재하는 Element를 합치는데 유용하게 사용된다. 일단 DocumentFragment에서 Element 콜렉션을 생성하면 자식들은 하위트리로 이동된다.

간단한 예를 한번 보도록 하자.

<html>
<body onload="start()">
<script language="javascript">
function start() {
// DocumentFragment 노드를 생성한다.
  var myDocFrag = xml.createDocumentFragment();

// 두개의 Element 노드를 생성한다.
  var element1 = xml.createElement("element1");
  var element2 = xml.createElement("element2");

// 생성된 두개의 Element 노드를 DocumentFragment 노드에 자식으로 삽입한다.
  myDocFrag.insertBefore(element1, null);
  myDocFrag.insertBefore(element2, null);

//실제 xml의 root엘리먼트에 DocumentFragment에서 생성된 트리를 삽입한다.
  xml.documentElement.insertBefore(myDocFrag, null);

  confirm(xml.xml);
}

</script>
</body>
<xml id = "xml">
  <rootElement/>
</xml>
</html>


기본 로직은 대충 이해될 것이다. 다만 유의해서 봐야 할 것은 결과를 살펴볼 때 DocumentFragment를 사용했다는 어떠한 흔적도 증거도 남아있지 않다는 것이다. 즉 서로 다른곳에 위치한 필요한 트리를 DocumentFragment의 하위트리에 모아 놓고 한꺼번에 삽입시킬 수 있다는 것이다.

13. DOMImplemetation

(1) 부모노드

부모노드는 없다. DOMImplemetation 클래스는 DOM의 어느 특정 인스턴스와는 독립적으로 세세한 구현을 하기 위해 사용된다.

(2) DOMImplemetation Methods

1) hasFeature(feature, version)

이 메소드는 마크업언어와 버전을 받아서 참 또는 거짓을 리턴한다. 특정 버전은 특정한 마크업언어에 의존하는 것이 있다. 때문에 버전을 확인하는 것이 중요할 때가 있을 것이다. 그때 사용하면 된다.

14. DOMString

(1) 부모노드

부모노드는 없다. DOMString의 단 하나의 요구조건은 UTF-16 인코딩을 사용한다는 것이다. 실제 많이 사용되지 않는다. 왜냐하면 애플리케이션의 string을 그대로 많이 사용하기 때문이다.

15. DOMException

(1) 부모노드

부모노드는 없다. 언어 의존적인 존재이기 때문에 Java나 .NET에서나 가능할 것이다.

[출처] 웹디황용

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
자세히보기

Comments

번호 제목 글쓴이 날짜 조회
2985 Table 태그 (2) 99 단국강토 02.09 2241
2984 테이블 응용 99 단국강토 02.09 2352
2983 프레임 tag-프레임(1) 99 단국강토 02.09 2150
2982 프레임(2) 99 단국강토 02.09 2147
2981 form tag-form (1) 99 단국강토 02.09 1991
2980 form(2) 99 단국강토 02.09 1802
2979 form-(4) 99 단국강토 02.09 2267
2978 아름다운글 올리는 방법 5 마퀴 태그 99 단국강토 02.09 2301
2977 이미지의 태그 처리 99 단국강토 02.09 2253
2976 글쓰기/FIELDSET source 99 단국강토 02.09 2531
2975 블로그 영상시, 나도 만들어 볼까? 99 단국강토 02.09 2292
2974 동적 테이블 생성 DHTML 99 단국강토 02.09 2986
2973 table,tr,td 의 innerHTML 속성으로 좀 가꾸놀기 99 단국강토 02.09 3923
2972 CSS를 활용한 INPUT FORM의 커스트마이징 기법 99 단국강토 02.09 2887
2971 테이블 테두리를 가늘게 하는 확실한 팁 99 단국강토 02.09 2271
2970 스타일시트를 적용시키는 3가지 방법 99 단국강토 02.09 2059
2969 cursor:hand 을 cursor:pointer 로 교체요 ^^ 99 단국강토 02.09 2267
2968 ID attribute selector 99 단국강토 02.09 1496
2967 폼테그쓸때 테이블정렬이 잘안될때 쓰이는 css 99 단국강토 02.09 1602
2966 홈페이지 제작시 사용되는 CSS 정리 99 단국강토 02.09 1343
2965 부드럽게 펼쳐지는 콤보박스형 메뉴 99 단국강토 02.09 1674
2964 [CSS]스타일시트로 배경그림 고정시키기 99 단국강토 02.09 1676
2963 아이프레임 일부기능 대체할 수 있는 박스 99 단국강토 02.09 3230
2962 페이지 한개에서 모든것을 해결할 수 있는 탭메뉴 스크립트 99 단국강토 02.09 1407
2961 [CSS]글씨 크기-줄 간격 조절해서 보기 좋은 문서 만들기 99 단국강토 02.09 3308
2960 아이프레임 일부기능 대체할 수 있는 박스 99 단국강토 02.09 1309
2959 백그라운드 반복없이 한번만 넣기 99 단국강토 02.09 1862
2958 JAVASCRIPT + DOM 을 이용한 데이터 검색 99 단국강토 02.09 2785
2957 JAVASCRIPT + DOM 을 이용한 데이터 검색 99 단국강토 02.09 1962
열람중 DOM 참조(JavaScript이용) 99 단국강토 02.09 1622
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취