XML의 중요성: DOM 너머(DOM을 쉽게 사용하기 위한 팁과 요령)

이 유틸리티는 다수의 복잡한 DHTML 객체를 신속하게 생성하려는 경우 많은 시간을 절약할 수 있습니다. 여기서 패턴은 자주 생성해야 하는 특정 DOM 구조가 있는 경우 유틸리티를 사용하여 생성한다는 의미입니다. 이렇게 하면 작성하는 코드의 양이 줄어들 뿐만 아니라, 반복적으로 잘라내고 붙여넣는 코드(오류의 원인)도 줄어들고, 코드를 읽을 때 명확하게 생각하기가 쉬워집니다.

다음은 무엇입니까?
DOM은 문서의 순서에 따라 다음 노드가 무엇인지 알려주는 데 어려움을 겪는 경우가 많습니다. 다음은 노드 간 앞뒤로 이동하는 데 도움이 되는 몇 가지 유틸리티입니다.

목록 8. nextNode 및 prevNode
// 문서 순서대로 다음 노드를 반환합니다.
함수 nextNode(노드) {
if (!node)는 null을 반환합니다.
if (node.firstChild){
node.firstChild를 반환합니다.
} 또 다른 {
return nextWide(노드);
}
}
// nextNode()에 대한 도우미 함수
함수 nextWide(노드) {
if (!node)는 null을 반환합니다.
if (node.nextSibling) {
node.nextSibling을 반환합니다.
} 또 다른 {
return nextWide(node.parentNode);
}
}
// 문서 순서대로 이전 노드를 반환합니다.
함수 prevNode(노드) {
if (!node)는 null을 반환합니다.
if (node.previousSibling) {
return PreviousDeep(node.previousSibling);
}
node.parentNode를 반환합니다.
}
// prevNode()에 대한 도우미 함수
함수 이전Deep(노드) {
if (!node)는 null을 반환합니다.
동안(node.childNodes.length) {
노드 = node.lastChild;
}
반환 노드;
}

DOM을 쉽게 사용하세요
때로는 각 노드에서 함수를 호출하거나 각 노드에서 값을 반환하여 DOM을 반복하고 싶을 수도 있습니다. 실제로 이러한 아이디어는 매우 일반적이기 때문에 DOM 레벨 2에는 DOM Traversal and Range(DOM의 모든 노드를 반복하기 위한 객체와 API를 정의)라는 확장이 이미 포함되어 있습니다. 이는 DOM에서 함수를 적용하고 범위를 선택하는 데 사용됩니다. . 이러한 함수는 Internet Explorer에 정의되어 있지 않기 때문에(적어도 아직은) nextNode()를 사용하여 비슷한 작업을 수행할 수 있습니다.

여기서 아이디어는 몇 가지 간단하고 일반적인 도구를 만든 다음 원하는 효과를 얻기 위해 다양한 방법으로 조합하는 것입니다. 함수형 프로그래밍에 익숙하다면 이 내용도 익숙할 것입니다. Beyond JS 라이브러리(참고자료 참조)는 이 아이디어를 발전시킵니다.

목록 9. 기능적 DOM 유틸리티
// startNode에서 시작하여 모든 노드의 배열을 반환하고
// DOM 트리의 나머지 부분을 계속 진행합니다.
함수 listNodes(startNode) {
var list = 새로운 배열();
var 노드 = startNode;
동안(노드) {
목록.푸시(노드);
node = nextNode(노드);
}
반환 목록;
}
// listNodes()와 동일하지만 startNode에서 거꾸로 작동합니다.
// 이는 listNodes()를 실행하는 것과 같지 않으며
// 목록을 뒤집습니다.
함수 listNodesReversed(startNode) {
var list = 새로운 배열();
var 노드 = startNode;
동안(노드) {
목록.푸시(노드);
node = prevNode(노드);
}
반환 목록;
}
// nodeList의 각 노드에 func를 적용하고 새로운 결과 목록을 반환합니다.
함수 맵(목록, func) {
var result_list = 새로운 배열();
for (var i = 0; i < list.length; i++) {
result_list.push(func(list[i]));
}
결과_목록을 반환합니다.
}
// 각 노드에 테스트를 적용하고, 해당 노드의 새 목록을 반환합니다.
// 테스트(노드)는 true를 반환합니다.
함수 필터(목록, 테스트) {
var result_list = 새로운 배열();
for (var i = 0; i < list.length; i++) {
if (test(list[i])) result_list.push(list[i]);
}
결과_목록을 반환합니다.
}

목록 9에는 네 가지 기본 도구가 포함되어 있습니다. listNodes() 및 listNodesReversed() 함수는 Array의 Slice() 메서드와 유사하게 선택적 길이로 확장될 수 있습니다. 주목해야 할 또 다른 점은 map() 및 filter() 함수는 완전히 일반적이며 모든 목록(노드 목록뿐만 아니라)에 대해 작업하는 데 사용할 수 있다는 것입니다. 이제 이 두 가지를 결합할 수 있는 몇 가지 방법을 보여 드리겠습니다.

목록 10. 기능 유틸리티 사용
// 문서 순서대로 모든 요소 이름 목록
함수 isElement(노드) {
return node.nodeType == Node.ELEMENT_NODE;
}
함수 nodeName(노드) {
node.nodeName을 반환합니다.
}
var elementNames = map(filter(listNodes(document),isElement), nodeName);
// 문서의 모든 텍스트(CDATA 무시)
함수 isText(노드) {
return node.nodeType == Node.TEXT_NODE;
}
함수 nodeValue(노드) {
node.nodeValue를 반환합니다.
}
var allText = map(filter(listNodes(document), isText), nodeValue);

이러한 유틸리티를 사용하여 ID 추출, 스타일 수정, 특정 노드 찾기 및 제거 등을 수행할 수 있습니다. DOM Traversal 및 Range API가 광범위하게 구현되면 먼저 목록을 작성하지 않고도 이를 사용하여 DOM 트리를 수정할 수 있습니다. 강력할 뿐만 아니라 위에서 강조한 것과 유사한 방식으로 작동합니다.

DOM의 위험 지대
핵심 DOM API를 사용하면 XML 데이터를 DOM으로 구문 분석하거나 DOM을 XML로 직렬화할 수 없습니다. 이러한 함수는 DOM 레벨 3 확장 "Load and Save"에 정의되어 있지만 아직 완전히 구현되지 않았으므로 지금은 생각하지 마세요. 각 플랫폼(브라우저 또는 기타 전문 DOM 애플리케이션)에는 DOM과 XML 간 변환을 위한 고유한 방법이 있지만 플랫폼 간 변환은 이 기사의 범위를 벗어납니다.

DOM은 매우 안전한 도구가 아닙니다. 특히 XML로 직렬화할 수 없는 트리를 생성하기 위해 DOM API를 사용할 때 더욱 그렇습니다. 동일한 프로그램에서 DOM1 비네임스페이스 API와 DOM2 네임스페이스 인식 API(예: createElement 및 createElementNS)를 혼합하지 마십시오. 네임스페이스를 사용하는 경우 루트 요소 위치에서 모든 네임스페이스를 선언하고 네임스페이스 접두사를 재정의하지 마세요. 그렇지 않으면 상황이 매우 혼란스러워질 것입니다. 일반적으로 말해서, 일상 생활을 따르는 한 문제를 일으킬 수 있는 심각한 상황은 발생하지 않습니다.

구문 분석을 위해 Internet Explorer의 innerText 및 innerHTML을 사용해 왔다면 elem() 함수를 사용해 볼 수 있습니다. 유사한 유틸리티를 구축하면 더욱 편리해지고 크로스 플랫폼 코드의 이점을 상속받을 수 있습니다. 이 두 가지 방법을 혼합하는 것은 매우 나쁩니다.

일부 유니코드 문자는 XML에 포함되지 않습니다. DOM을 구현하면 추가할 수 있지만 결과적으로 직렬화할 수 없습니다. 이러한 문자에는 대부분의 제어 문자와 유니코드 서로게이트 쌍의 개별 문자가 포함됩니다. 이는 문서에 이진 데이터를 포함하려고 할 경우에만 발생하지만 이는 또 다른 상황입니다.

결론
나는 DOM이 할 수 있는 일을 많이 다루었지만 DOM(및 JavaScript)이 할 수 있는 일이 훨씬 더 많습니다. 이러한 예제를 연구하고 탐색하여 클라이언트 스크립트, 템플릿 또는 특수 API가 필요할 수 있는 문제를 해결하는 데 어떻게 사용할 수 있는지 알아보세요.

DOM에는 한계와 단점이 있지만 많은 장점도 있습니다. Java 기술, Python 또는 JavaScript를 사용하든 동일한 방식으로 작동합니다. 위에서 언급한 템플릿을 사용하면 매우 쉽습니다. 사용하기 간단하고 강력합니다. Mozilla 기반 애플리케이션, OpenOffice 및 Blast Radius의 XMetaL을 포함하여 점점 더 많은 애플리케이션이 DOM을 지원하기 시작했습니다. 점점 더 많은 사양에 DOM이 필요하고 이를 확장(예: SVG)하므로 DOM은 항상 여러분 주변에 있습니다. 널리 배포된 이 도구를 사용하는 것이 현명할 것입니다.