DOM에 대한 JavaScript 애플리케이션 분석 (2)_DOM

실제로 네이티브 JS에도 이러한 속성이 있습니다. JQ와 거의 동일하지만 약간 적습니다. 하지만 JQ보다 사용하기가 조금 더 번거롭습니다. 주로 FF 브라우저 때문입니다. FF는 줄 바꿈을 DOM 요소로 처리하기 때문입니다. 예를 들어

코드 복사 코드는 다음과 같습니다.

저는 네이티브 JS를 사용하여 다음을 수행합니다. 요소 아래의 DOM 하위 요소로 ID를 가져옵니다. 첫 번째 장에서 언급한 방법은 var a = document.getElementById("dom").getElementsByTagName("div"); 입니다. 이는 문제가 되지 않습니다. 예, 경고(a.length) 프롬프트는 2가 됩니다. 그러나 이제 우리는 마지막 장에서 언급한 var b = document.getElementById("dom").childNodes를 얻기 위해 다른 방법을 사용합니다. )IE 브라우저에서는 문제가 없으며 여전히 2이지만 FF 브라우저에서는 4라고 프롬프트됩니다. 이는 FF가 줄 바꿈을 요소로 처리하기 때문입니다.
그래서 JS를 사용하려면 이러한 속성을 처리해야 합니다. 아이디어를 처리하는 것은 이러한 요소를 탐색하는 것만큼 간단합니다. 유형이 공백 및 텍스트인 모든 요소를 ​​삭제합니다. 처리 함수는 이렇습니다

코드 복사 코드는 다음과 같습니다.

function del_space( elem){
var elem_child = elem.childNodes;
for(var i=0;iif(elem_child.nodeName == "#text" && !/S /.test( elem_child.nodeValue))
{elem.removeChild(elem_child)}
}}

이 함수에 대해 설명하겠습니다.
var elem_child = elem.childNodes; 🎜>Pass 들어오는 elem 요소의 하위 요소가 elem_child에 던져집니다.

코드 복사 코드는 다음과 같습니다. 🎜>

for(var i=0;iif(elem_child.nodeName == "#text" && !/S/.test(elem_child.nodeValue) )
{elem.removeChild (elem_child)}
}


이러한 하위 요소를 반복합니다. 이러한 요소에 텍스트인 노드 유형이 있고 이 텍스트 유형 노드의 노드 값이 비어 있는 경우. 그냥 삭제하세요
(nodeName은 이 노드의 노드 유형을 가져오는 데 사용되는 JS의 속성입니다. /S/는 JS에서 null이 아닌 문자의 정규식입니다. 앞에 느낌표를 추가합니다. 이는 null 문자임을 의미합니다. Test는 내부 항목과 외부 항목을 비교하는 JS의 메서드입니다. nodeValue는 이 노드의 값을 가져오는 메서드이기도 합니다. 외부 요소)

이렇게 속성을 호출하기 전에 공백을 지우려면 이 함수만 호출하면 되며, 안심하고 사용할 수 있습니다. 🎜>
코드 복사

코드는 다음과 같습니다.

;/div>

<script> </script>

함수 dom(){

var a = document. getElementById("dom");
del_space(a); 공백을 정리하는 함수 호출
var b = a.childNodes; a의 모든 하위 노드를 가져옵니다. a의 상위 노드 가져오기;
var d = a.nextSbiling; a의 다음 형제 노드 가져오기
var e = a.previousSbiling; a의 이전 형제 노드 가져오기
var f = a.firstChild ;
의 첫 번째 하위 노드 가져오기 var g = a.lastChild;

}



( 또한 var b = a.childNodes; 예를 들어 첫 번째 노드를 사용하려면 childNodes[0]가 됩니다. on)

DOM 가져오기는 여기까지입니다. 다음 장에서는 DOM 요소를 작동하는 방법을 설명합니다.