DOM용 자바스크립트 적용 예 (1)_DOM-JS 튜토리얼-php.cn

나는 JavaScript를 배우기 위해 이곳에 오는 대부분의 사람들이 주로 JavaScript를 사용하여 페이지의 DOM 요소로 실용적이고 유용한 대화형 효과를 만들기를 원한다고 믿습니다. 그래서 여기서는 가장 실용적이고 유용한 자바스크립트 애플리케이션만 가르쳐 드리겠습니다. 그러나 전제 조건은 모든 사람이 javascript 또는 jquery 프로그래밍에 대한 기본 지식을 가지고 있어야 한다는 것입니다. 더 이상 말도 안되는 소리는 없습니다.
오늘의 첫 번째 기사에서는 JavaScript를 사용하여 페이지에 DOM 요소를 가져오는 방법을 설명합니다. 이것은 매우 중요합니다. JQuery와 비교해보겠습니다.
페이지의 요소에 ID 속성이 있는 경우

JQ 메서드: $("#dom"),
기본 js 메서드: var a = document.getElementById("dom"); 이 a는 $("#dom")과 동일합니다.

부모 요소 아래에 요소를 가져오려는 경우

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

>< ;span>

JQ 메서드: $("#domspan"),
기본 js 메서드: var b = document .getElementById("dom").getElementsByTagName("span")[0]; 이 b는 $("#domspan")과 동일합니다.
사실 간단한 메서드가 있습니다. var b = document.getElementById(" dom ").childNodes[0] 하지만 FF에는 문제가 있습니다. 이에 대해서는 나중에 논의하겠습니다.

페이지에서 요소 세트 가져오기

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

위 내용은 상당히 이해하기 쉽습니다. 지금 제가 이야기하려는 내용은 누구나 공통적으로 사용하는 말입니다. 하지만 네이티브 JS에서 얻기 가장 까다로운 속성은 클래스 속성인

네이티브 JS 방식: 좀 번거롭습니다. 함수를 작성해야 합니다. 네이티브 JS에서는 클래스를 직접 얻는 메소드를 제공하지 않기 때문에 먼저 이렇게 함수를 작성해야 합니다.

코드 복사

코드는 다음과 같습니다. function $class(domclass){ var odiv = document.body.getElementByTagName("*"); var a;

for(var i = 0;iif(odiv.className ==domclass) 🎜> a = odiv
}
return a;
}
}

이 함수를 사용하면 매우 간단합니다. var d = $class( "dom" );

이 함수의 의미에 대해 설명하겠습니다.
var odiv = document.body.getElementByTagName("*")
이 문장은 모든 DOM 요소를 가져오는 것을 의미합니다. 페이지에서

코드 복사

코드는 다음과 같습니다. for(var i = 0 ;iif(odiv.className ==domclass){ a = odiv }

 
이것은 페이지를 확인하고 해당 클래스를 비교합니다. 전달한 domclass 매개변수와 동일한 경우 이 요소를 a; 
return a; return a 

사용합니다. ");는 var d = a; 

(그런데 className은 DOM 요소의 이름을 가져오는 클래스인 이 JS의 속성입니다.)

좋아, 오늘은 이 정도만 포스팅하겠습니다. 이해가 안 되는 부분이 많을 텐데요. 이해가 안 되시면 하나씩 물어보시면 됩니다. 배우고 싶고, 당신을 만족시키기 위해 최선을 다할 것입니다.