자바스크립트 스터디노트(18) 페이지에서 요소코드 얻기_기본지식

1. 요소

getElementById() 메소드를 가져오고, 요소의 ID를 통해 요소를 가져오고, 요소의 ID를 가져오는 매개변수를 수락하고, ID가 존재하지 않으면 null을 반환합니다.
Be 양식 요소의 이름과 다른 요소의 ID가 동일하지 않도록 주의하세요. IE8 이하의 IE 브라우저에서는 요소의 name 속성을 통해 요소를 가져오는 방법을 사용합니다.
다음 요소를 예로 들어 보겠습니다.

ID가 "myDiv"

var document.getElementById("myDiv")인 div 콘텐츠는 대소문자를 구분합니다. 요소를 통해

요소
getElementsByTagName() 메소드의 참조를 가져옵니다. 요소의 태그 이름을 가져오고, 요소의 태그 이름을 가져오는 하나의 매개변수를 허용하고, 0개 이상을 포함하는 NodeList를 반환합니다.

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

var Images = document.getElementsByTagName("img "); //페이지의 모든 요소 가져오기

alert(images.length) ; //이미지 개수
alert(images[0].src); //The 첫 번째 이미지 요소의 src
alert(images.item(0).src); //위와 동일

getElementsByName() 메소드는 요소의 name 속성을 통해 요소를 가져옵니다. 요소의 이름 속성을 얻기 위해 하나의 매개변수를 허용합니다. 이는 라디오 버튼

코드 복사 코드를 얻는 데 자주 사용됩니다.

• < ;label for="colorRed">

var radios = document.getElementsByName("color "); //다음을 사용하여 모든 라디오 버튼 가져오기 name="color"

2. 요소 하위 노드 또는 요소 하위 노드와 해당 하위 노드 가져오기

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

• 프로젝트 1< ;/li> li>Project Two


• Project Three

참고: IE는

각각 3개의 요소인 3개의 하위 노드. 다른 브라우저에서는 3개의 요소와 4개의 텍스트 노드를 포함하여 7개의 하위 노드가 있다고 생각합니다.


• 프로젝트 1
• 프로젝트 2
• 프로젝트 3
　
모든 브라우저는 자식이 3개 있다고 생각합니다 노드

요소의 하위 노드 가져오기:


코드 복사 코드는 다음과 같습니다.
var ul = document.getElementById("myList");
for (var i=0,len = ul.childNodes.length; i < len ; i ) {
if ( ul .childNodes.length[i].nodeType == 1) { //nodeType == 1은 노드가 텍스트 노드가 아닌 요소 노드임을 나타냅니다.
//특정 작업 수행
}
}


요소의 하위 노드 및 하위 노드 가져오기:


코드 복사 코드는 다음과 같습니다.
var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("li"); //li의 li도 가져옵니다.


3 노드의 속성을 통해 다른 노드를 찾습니다.
nextSibling 속성은 현재 노드의 다음 형제 노드를 가리킵니다.
previousSibling 속성은 현재 노드의 이전 형제 노드를 가리킵니다.
firstChild 속성은 다음을 가리킵니다. 첫 번째 자식 노드인 lastChild는 마지막 자식 노드를 가리킵니다
childNodes는 첫 번째 자식 노드에 액세스하기 위해 someNode.childNodes[0]와 같은 대괄호 방법을 통해 액세스할 수 있는 모든 자식 노드(실제로는 NodeList 개체)를 저장합니다.
parentNode 속성은 상위 노드를 가리킵니다

노드 관계는 다음과 같습니다.


NodeList는 배열 객체입니다. 이를 배열로 변환할 수 있습니다. 함수는 다음과 같습니다.

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

function converToArray (nodes) {
var arrary = null
try {
array = Array.prototype.slice.call (nodes,0);
}
catch (ex) {
array = new Array()
for (var i=0,len=nodes.length ; iarray.push (nodes[i]);
}
}
return array;
}

var div = document.getElementById("side");
alert(converToArray( div.childNodes))

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.