차례:
비디오: (ENG SUB)[Javascript 기초와 활용 #1] 스타크래프트 만들기?! (feat. JQuery, Codepen, Bootstrap 등) 2024
JavaScript에서는 HTML DOM을 사용하여 노드 유형과 노드 값을 표시 할 수 있습니다. 또한 Element 객체를 사용하여 DOM 내의 요소의 속성 값을 설정할 수 있습니다. JavaScript를 사용하여 DOM 요소의 속성을 설정하면 새 값이 HTML 문서에 실시간으로 반영됩니다.
웹 문서를 새로 고침하거나 새로 고침 할 필요없이 브라우저에서 즉시 반영하기 위해 웹 문서의 요소 속성을 변경하는 것은 웹 2라고 불렸던 것의 초석입니다. 0
< ! - 1 ->innerHTML
DOM을 통해 수정할 수있는 요소의 가장 중요한 속성은 innerHTML 속성입니다.
요소의 innerHTML 속성은 요소의 시작 태그와 끝 태그 사이의 모든 것을 포함합니다. 예를 들어, 다음 코드에서 div 요소의 innerHTML 속성에는 p 요소와 해당 텍스트 노드 자식이 포함됩니다.
이것은 일부 텍스트입니다.
innerHTML 속성 값을 검색하여 표시하려면 다음 코드를 사용할 수 있습니다.
var getTheInner = document. 신체. firstChild. innerHTML; 문서. 쓰기 (getTheInner);
앞의 코드에서 문서에 의해 출력 될 값. write () 메서드는
이것은 일부 텍스트입니다. innerHTML 속성을 설정하는 것은
문서의 속성을 설정하는 것과 같은 방법으로 수행됩니다. 신체. firstChild. innerHTML = "안녕하세요! ";
앞의 JavaScript를 실행 한 결과 p 요소와 원본 마크 업의 문장이 "안녕하세요!"라는 단어로 바뀝니다. "원본 HTML 문서는 변경되지 않지만 DOM 표현과 웹 페이지 렌더링은 새 값을 반영하도록 업데이트됩니다. HTML 문서의 DOM 표현은 브라우저가 표시 한 것이므로 웹 페이지의 표시도 업데이트됩니다.속성 설정하기
HTML 속성의 값을 설정하려면 setAttribute () 메소드:
문서를 사용할 수 있습니다. 신체. firstChild. innerHTML. setAttribute ("class", "myclass");
이 문을 실행 한 결과 body 요소의 첫 번째 하위 요소에 "class"라는 새 특성과 "myclass"값이 지정됩니다.