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

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

WBOY

풀어 주다： 2016-05-16 17:52:26

원래의

1038명이 탐색했습니다.

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 "); //페이지의 모든 자바스크립트 스터디노트(18) 페이지에서 요소코드 얻기_기본지식

요소 가져오기

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는

프로젝트 1
프로젝트 2
프로젝트 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)) 