> 웹 프론트엔드 > JS 튜토리얼 > JavaScript DOM 학습 3장 목차_기본지식

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

WBOY
풀어 주다: 2016-05-16 18:34:26
원래의
1054명이 탐색했습니다.

이 작업도 수행하려면 내 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 a = y.appendChild(document. createElement('span'));
코드 복사


코드는 다음과 같습니다.


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)
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿