일반적인 원시 JS 선택기 사용 방법_javascript 기술 요약

공통 getElementById, getElementsByName, getElementsByTagName. 하지만 외국인들은 이러한 API에 만족하지 않아서 getElementsByClassName을 고안했습니다. 나중에 jQuery 선택기가 조금씩 등장했습니다. 여기서는 원래 js 선택에 대해서만 이야기합니다.

1.getElementById

가장 일반적으로 사용되는 선택기이며 ID별로 위치합니다.

예:

var test=document.getElementById(" test ").value;//문서에서 테스트 ID가 있는 요소의 값을 가져오고 이를 테스트 얼굴 변경

2.getElementsByName

예:

var에 할당합니다. test= document.getElementByName("test");//문서에서 test라는 요소의 노드를 가져와 테스트 변수에 할당합니다. 이때 테스트 변수는 배열입니다

3. getElementsByTagName

예시:

var test=document.getElementsByTagName("test");//이때 문서에서 test 클래스의 요소 노드를 가져와서 test에 할당합니다. , 테스트 변수는 배열이고 이 선택기는 IE5, 6, 7, 8에서 사용할 수 없습니다.

4.getElementsByClassName

이 선택기는 js API에서 찾을 수 없습니다. 이를 사용하려면 메서드를 직접 정의해야 합니다. 일반적인 원칙 먼저 getElementsByTagName("*")을 사용하여 문서의 모든 요소를 ​​검색한 다음 탐색하고 정규식을 사용하여 일치하는 요소를 찾아 배열에 넣은 다음 돌려보내세요. 인터넷에는 이 선택기를 구현한 프로그래머가 많이 있습니다. 다음은 두 가지 예입니다.

(1) Robert Nyman이 작성한 Ultimate getElementsByClassName 체계는 2005년에 구현되었습니다. 외국인은 오래전부터 시행된 아주 먼 곳이다.

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

//세 가지 매개 변수가 모두 필요합니다. one 웹 페이지에는 클래스 이름이 "cell"인 요소가 5007개 있습니다. IE8은 1828~1844밀리초,
//IE6은 4610~6109밀리초, FF3.5는 46~48밀리초, Opera10은 31~32입니다. 밀리초, Chrome은 23~26밀리초,
//safari4는 19~20밀리초
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm. 모두)? oElm.all :
oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array()
strClassName = strClassName.replace(/-/g, "\-"); >var oRegExp = new RegExp("(^|\s)" strClassName "(\s|$)");
var oElement
for(var i=0; i < arrElements.length; i ){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return ( arrReturnElements)
}

(2) Dustin Diaz("JavaScript Design Patterns"의 저자)가 제공하지만 호환성이 위만큼 좋지 않으며 IE5를 지원하지 않습니다.

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

//마지막 두 매개변수는 신뢰할 수 있습니다. 웹 페이지 찾기 클래스 이름이 "cell"인 요소는 5007개입니다. IE8은 78밀리초 동안 지속되고, IE6은 125~171밀리초 동안 지속됩니다.
// FF3.5는 42~48밀리초, Opera10은 31밀리초, Chrome은 22~ 25밀리초, safari4는 18~19밀리초
var getElementsByClass = function(searchClass,node,tag) {
var classElements = new Array()
if ( node == null )
node = document;
if ( 태그 == null )
tag = '*';
var els = node.getElementsByTagName(tag)
var elsLen =
var 패턴 = new RegExp(" (^|\s)" searchClass "(\s|$)");
for (i = 0, j = 0; i < elsLen; i ) {
if ( 패턴. test(els[ i].className) ) {
classElements[j] = els[i];
j ;
}
}
return classElements;

------------------------------- ---- --------------------------------- ---- --------------------------------- ---- ----

참고: 이는 현재 요소의 노드를 나타낼 수 있습니다.

------------------------------- ------ ------------------ ------ ------------------ ------ --------

이벤트 등 지식 포인트를 매칭하기 위해 일반적으로 사용되는 방법은 다음과 같습니다.

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

//ID 테스트로 양식 제출

document.getElementById("test").submit()

//ID 테스트로 요소 테두리 설정 2픽셀, 단색, 빨간색

document.getElementById("test").style.border="2px solid red";

//마우스가 요소 밖으로 이동하거나 이동합니다. id 테스트, 배경색 변경

function test(){
document.getElementById("test").onmouseover=function(){document.getElementById("test2").style.BackgroundColor=" red"} ;
document.getElementById("test").onmouseout=function(){document.getElementById("test2").style.BackgroundColor="blue"};
}

//문서 내 test라는 이름의 요소 개수

function test()
　{
　var test=document.getElementsByName("test")
　alert(test) .길이);
　}