JavaScript DOM 학습 3장 목차_기본지식-JS 튜토리얼-php.cn

JavaScript DOM 학습 3장 목차_기본지식

WBOY

풀어 주다： 2016-05-16 18:34:26

원래의

1059명이 탐색했습니다.

이 작업도 수행하려면 내 getElementByTagNames() 함수도 필요합니다.

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

function createTOC() { 
 var y = document .createElement('div'); 
 y.id = 'innertoc'; 
 var a = y.appendChild(document.createElement('span')) 
 a.onclick = showhideTOC ; 
 a.id = 'contentheader'; 
 a.innerHTML = '페이지 내용 표시' 
 var z = y.appendChild(document.createElement('div')) 
 z. onclick = showhideTOC ; 
 var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5'); 
 if (toBeTOCced.length < 2) return false 

 ;i< toBeTOCced.length;i ) { 
 var tmp = document.createElement('a') 
 tmp.innerHTML = toBeTOCced[i].innerHTML = '페이지'; 
 z.appendChild(tmp); 
 if (toBeTOCced[i].nodeName == 'H4') 
 tmp.className = 'indent' 
 if (toBeTOCced[i].nodeName = = 'H5') 
 tmp.className = ' extraindent'; 
 var headerId = toBeTOCced[i].id || 'link' i 
 tmp.href = '#' headerId; toBeTOCced[i ].id = headerId; 
 if (toBeTOCced[i].nodeName == 'H2') { 
 tmp.innerHTML = 'Top' 
 tmp.href = '#top'; 
 toBeTOCced[i].id ='top'; () { 
 TOCstate = (TOCstate == 'none') ? 'block' : 'none' 
 var newText = (TOCstate == ' none') ? '페이지 내용 표시': '페이지 내용 숨기기'; 
 document.getElementById('contentheader').innerHTML = newText 
 document.getElementById('innertoc').lastChild.style.display = 
}


설명
이 코드는 다음과 같이 실행됩니다. 
준비 단계
먼저 테이블 내용




코드 복사

코드는 다음과 같습니다.

function createTOC() {

var y = document.createElement('div'); y.id = 'inneroc'; 그 위에 이 요소를 클릭하면 아래에 설명된 showhideTOC() 함수가 실행됩니다.

코드 복사

 코드는 다음과 같습니다.

var a = y.appendChild(document. createElement('span'));

a.onclick = showhideTOC; a.id = 'contentheader'; a.innerHTML = '페이지 내용 표시'; 그런 다음 실제 링크를 배치할 DIV를 만듭니다. 이 div를 클릭하면(실제 의미는 이 div의 링크를 클릭하는 것입니다) showhideTOC() 함수도 실행됩니다.

코드 복사

 코드는 다음과 같습니다.

var z = y.appendChild(document. createElement(' div'));

z.onclick = showhideTOC;

제목 가져오기 그런 다음 새 toBeTOCced 배열을 만든 다음 getElementByTagNames() 함수를 사용하여 전체 페이지의 왼쪽 및 오른쪽 제목. 코드 복사

코드는 다음과 같습니다.

var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5');

배열에 요소가 하나만 있는 경우 중지합니다(예: 이 페이지에는 h2 제목이 하나만 있습니다). 나는 ToC에 요소가 하나만 있는 것을 원하지 않습니다.

ToC 만들기
지금 ToC 만들기를 시작하세요. 먼저 toBeTOCced 배열을 반복합니다. 각 요소에 대해 제목과 동일한 링크를 만듭니다. innerHTML 사용에 주의하세요. 웹 사이트의 일부 제목에는

와 같은 HTML 태그가 포함되어 있으며 이러한 태그가 ToC에도 표시되기를 원합니다. ToC 내부의 에 이러한 새 링크를 추가했습니다. 


코드 복사 코드는 다음과 같습니다.
 
for (var i=0 ;i< toBeTOCced.length;i ) { 
var tmp = document.createElement('a') 
tmp.innerHTML = toBeTOCced[i].innerHTML = '페이지'; 
 z.appendChild(tmp); 

 

제목이 h4 또는 h5인 경우 클래스를 추가합니다. 

코드 복사 코드는 다음과 같습니다.
 if (toBeTOCced[i].nodeName = = 'H4') 
tmp.className = 'indent'; 
if (toBeTOCced[i].nodeName == 'H5') 
tmp.className = 'extraindent'; 
 이제 a 요소를 실제 제목에 연결해야 합니다. 이를 위해서는 고유 ID가 필요합니다. 그러나 이러한 헤더에는 이미 ID가 포함되어 있을 수 있습니다. 원래의 내부 연결을 깨고 싶지 않기 때문에 제목의 원래 ID를 사용하는 것을 선호합니다. 타이틀에 ID가 없는 경우에만 새 ID를 만듭니다. 


코드 복사 코드는 다음과 같습니다. var headerId = toBeTOCced[i].id || link' i ;  
방금 만든 링크의 href 속성은 #headerId여야 하며 제목 자체에도 ID가 있습니다. 


코드 복사 코드는 다음과 같습니다. tmp.href = '#' headerId; 
 toBeTOCced[i].id = headerId; 
 
특수한 경우: 헤더가 페이지 상단인 H2인 경우에도 ID를 받게 됩니다. 


코드 복사 코드는 다음과 같습니다. if (toBeTOCced[i].nodeName = = 'H2') { 
tmp.innerHTML = 'Top'; tmp.href = '#top' 
toBeTOCced[i].id = 'top' 
} 
 } 

 
이제 양식이 생성되었으므로 이를 호출한 위치로 되돌립니다. 


코드 복사 코드는 다음과 같습니다.return y;}  
ToC 표시 및 숨기기 
마지막 기능은 ToC 표시 및 숨기기에 사용됩니다. 매우 간단합니다. 먼저 ToC의 상태를 감지한 다음 정보를 기반으로 새로운 텍스트와 표시 값을 생성합니다. 



코드 복사 코드는 다음과 같습니다. var TOCstate = 'none'; >function showhideTOC () { 
TOCstate = (TOCstate == 'none') ? 'block' : 'none'; var newText = (TOCstate == 'none') ? '페이지 내용 표시' 페이지 내용 숨기기 '; 
document.getElementById('contentheader').innerHTML = newText; 
document.getElementById('innertoc').lastChild.style.display = 
} 

 
이 함수는 사용자가 을 클릭하면 ToC 표시를 전환할 수 있도록 호출됩니다. 또한 사용자가 링크를 클릭하면 ToC가 즉시 숨겨집니다. 
번역 주소: http://www.quirksmode.org/dom/toc.html 
재인쇄를 위해 다음 정보를 보관해 주세요. 
저자: Beiyu(tw:@rehawk)