큰 그림을 보려면 작은 그림을 클릭하는 효과를 실현하는 js 아이디어와 샘플 코드_javascript 기술

DOM: JavaScript를 사용하여 HTML 노드를 운영하는 것입니다.

지식 포인트:

HTML을 DOM 트리로 변환

HTML을 보면 DOM 트리가 그려집니다.

노드 생성, 노드 추가, 노드 삭제

varnodeObj = document.createElement("node name") //요소 노드 생성

document .createTextNode("Text"); //텍스트 노드 생성

상위 노드.appendChild(하위 노드); //상위 노드에 하위 노드 추가

상위 노드.removeChild(하위 노드) ;

//노드 가져오기

document.getElementById("id 번호")

document.getElementsByTagName("html 태그 이름")

상위 node.getElementsByTagName("html 태그 이름")[0];

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

상위 node.childNodes

상위 node.firstChild

상위 node.lastChild

//노드 속성

nodeType 1 요소 노드 2 속성 노드 3 텍스트 노드

nodeName 요소 노드에서 사용 , 라벨 이름의 대문자 문자열 반환

nodeValue 텍스트 노드에서 사용, 텍스트 반환 또는 설정

//형제 노드 가져오기

현재 node.nextSiblings

노드 속성 설정

Node.setAttribute(속성 이름, 값)

Node.getAttribute(속성 이름); p.setAttrubute("style","color:red;font-size:20px;");

//일반적인 접근 방식에서는

노드를 설정하거나 가져올 수 있습니다. 🎜>

텍스트 설정

Text node.nodeValue=text;

사례: 작은 이미지를 클릭하면 큰 이미지를 볼 수 있습니다

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

<머리>
<제목>



<본문>

• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


•