> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 DOM 인스턴스를 탐색하고 수정하는 방법에 대한 자세한 설명

JavaScript에서 DOM 인스턴스를 탐색하고 수정하는 방법에 대한 자세한 설명

伊谢尔伦
풀어 주다: 2017-07-20 13:24:07
원래의
2001명이 탐색했습니다.

Traverse DOM

DOM을 통과하는 함수를 작성할 수 있습니다


function walkDOM(n) { 
 do { 
  alert(n); 
  if (n.hasChildNodes()) { 
   walkDOM(n.firstChild) 
  }   
 } while (n = n.nextSibling) 
} 
 
walkDOM(document.body);//测试
로그인 후 복사

Modify node
DOM 노드의 수정을 살펴보겠습니다.
먼저 변경할 노드를 구하세요.


var my = document.getElementById('closer');
로그인 후 복사

이 요소의 속성을 변경하는 것은 매우 쉽습니다. innerHTML을 변경할 수 있습니다.


my.innerHTML = 'final';//final
로그인 후 복사

innerHTML에서도 html을 작성할 수 있으므로 html을 수정해 보겠습니다.


my.innerHTML = &#39;<em>my</em> final&#39;;//<em>my</em> fnal
로그인 후 복사

em 태그가 돔 트리의 일부가 되었습니다. 테스트해볼 수 있습니다


my.firstChild;//<em> 
my.firstChild.firstChild;//my
로그인 후 복사

nodeValue를 통해 값을 변경할 수도 있습니다.


my.firstChild.firstChild.nodeValue = &#39;your&#39;;//your
로그인 후 복사

스타일 수정
수정된 노드의 대부분은 스타일이 수정되었을 수 있습니다. 요소 노드에는 스타일을 수정하는 스타일 속성이 있습니다. 스타일 속성과 CSS 속성 사이에는 일대일 대응이 있습니다. 다음 코드


my.style.border = "1px solid red";
로그인 후 복사

많은 CSS 속성에는 대시("-")가 있습니다(예: padding-top). 이는 자바스크립트에서 불법입니다. 이 경우 다음과 같이 물결표를 생략하고 두 번째 단어의 첫 글자를 대문자로 표기하시기 바랍니다. margin-left는 marginLeft가 됩니다. 등등


my.style.fontWeight = &#39;bold&#39;;
로그인 후 복사

이러한 속성의 초기화 여부에 관계없이 다른 속성을 수정할 수도 있습니다.


my.align = "right"; 
my.name = &#39;myname&#39;; 
my.id = &#39;further&#39;; 
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">
로그인 후 복사


위 내용은 JavaScript에서 DOM 인스턴스를 탐색하고 수정하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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