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

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 = 'your';//your

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

my.style.border = "1px solid red";

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

my.style.fontWeight = 'bold';

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

my.align = "right"; 
my.name = 'myname'; 
my.id = 'further'; 
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">

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