일반적인 getElementById, getElementsByName, getElementsByTagName. 그러나 외국인들은이 API에 만족하지 않았기 때문에 getElementsByClassName을 만들었고 나중에 jQuery 선택기가 조금씩 나타나고 원래 JS 선택 만 언급되어 있습니다.
1. GetElementById
이것은 가장 일반적으로 사용되는 선택기이며 ID에 의해 배치됩니다.
예:
var test = document.getElementById ( "Test"). 값; // 문서에서 ID 테스트를 통해 요소의 값을 얻고 값을 테스트 얼굴 변경에 할당합니다.
2. GetElementsByName
예:
var test = document.getElementByName ( "test"); // 이름이 문서에서 테스트 한 요소의 노드를 가져 와서 테스트 변수에 할당합니다
3. GetElementsByTagName
예:
var test = getElementsByTagName ( "test"); // 클래스 테스트와 함께 요소의 노드를 가져 와서 테스트 변수는 IE5, 6입니다 , 7, 8을 사용할 수 없습니다
4. GetElementsByClassName
이 선택기는 JS API에서 찾을 수 없습니다.이를 사용하려면 방법을 직접 정의해야합니다. 정규 표현식을 사용하여 일치하는 요소가 배열에서 반환됩니다. 인터넷에는이 선택기를 구현하는 많은 프로그래머가 있으며 다음은 두 가지 예입니다.
(1) Robert Nyman이 저술 한 Ultimate GetElementsByclassName 솔루션은 2005 년에 구현되었습니다. 외국인의 많은 것들이 오래 전에 아주 멀리 갔다는 것을 알 수 있습니다.
코드 사본은 다음과 같습니다.
// 세 가지 매개 변수가 필요합니다.
// IE6은 4610 ~ 6109 밀리 초, FF3.5는 46 ~ 48 밀리 초이고 Opera10은 31 ~ 32 밀리 초, 크롬은 23 ~ 26 밀리 초입니다.
// Safari4는 19 ~ 20 밀리 초입니다
함수 getElementsByClassName (Oelm, strtagname, strclassname) {
var arrelements = (strtagname == "*"&& 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);
}
}
반환 (ArrreturnElements)
}
(2) Dustin Diaz ( "JavaScript Design Patterns"의 저자가 제공하지만 호환성은 위만큼 좋지 않으며 IE5를 지원하지 않습니다.
코드 사본은 다음과 같습니다.
// 마지막 두 매개 변수는 웹 페이지에서 클래스 이름 "셀"이있는 5007 요소를 찾으십시오.
//ff3.5는 42 ~ 48ms, Opera10은 31ms, Chrome은 22 ~ 25ms, Safari4는 18 ~ 19ms입니다.
var getElementsByClass = function (SearchClass, Node, Tag) {
var classelements = new array ();
if (node == null)
노드 = 문서;
if (tag == null)
tag = '*';
var els = node.getElementsByTagName (tag);
var elslen = els.length;
var pattern = new regexp ( "(^| // s)"+searchClass+"(// s | $)");
for (i = 0, j = 0; i <elslen; i ++) {
if (pattern.test (els [i] .className)) {
분류 [j] = els [i];
J ++;
}
}
반환 계급 요소;
}
--------------------------------------------------------- --------------------------------------------------------- --------------------------------------------------- --------------------------------------------------------- --------------------------------------------------------- ------------------------------------------------- --------------------------------------------------------- ------------------------------------
참고 : 이것은 현재 요소의 노드를 나타낼 수 있습니다.
--------------------------------------------------------- --------------------------------------------------------- --------------------------------------------------- --------------------------------------------------------- --------------------------------------------------------- ------------------------------------------------- --------------------------------------------------------- ------------------------------------
다음은 이벤트와 같은 지식 포인트를 사용하는 데 일반적으로 사용되는 몇 가지 방법입니다.
코드 사본은 다음과 같습니다.
// ID 테스트로 양식을 제출합니다
document.getElementById ( "test"). 제출 ();
// 테스트 요소로 ID로 테두리를 2 픽셀, 단단하고 빨간색으로 설정합니다.
document.getElementById ( "test"). style.border = "2px solid red";
// ID 테스트로 요소를 이동하거나 이동하여 배경색을 변경합니다.
기능 test () {
document.getElementById ( "test"). OnMouseOver = function () {document.getElementById ( "test2"). Style.backgroundColor = "red"};
document.getElementById ( "test"). OnMouseOut = function () {document.getElementById ( "test2"). Style.backgroundColor = "blue"};
}
// 이름 테스트가있는 팝업 문서의 요소 수
기능 테스트 ()
{
var test = document.getElementsByName ( "테스트");
경고 (Test.Length);
}