DOM에 대한 JavaScript 애플리케이션 분석 (3)_DOM

이 DOM 요소에 스타일이 없으면 작업이 수행되지 않습니다. 2. JS를 직접 사용하여 DOM 요소를 HTML에 동적으로 쓸 수도 있습니다.
오늘 이 장에서는 이 두 가지 애플리케이션에 대해 이야기하겠습니다.
(1) html에서 기존 DOM 요소를 작동합니다.
위에서 말했듯이 기존 DOM 요소에 대한 작업은 스타일에 대한 작업에 지나지 않습니다. 따라서 먼저 이 DOM 요소의 스타일을 가져올 수 있어야 합니다. DOM 요소의 스타일을 얻는 것에 대해 이야기하기 전에. 먼저 DOM 요소의 스타일 연결 방법에 대해 이야기하겠습니다. 세 가지 유형이 있습니다.

하나는

같은 html 문서에 직접 스타일을 쓰는 방법이다.

두 번째는
#dom{width:300px;height:200px; background:#000;}

세 번째는


JS를 사용하여 스타일을 조작하는 이 세 가지 방법은 동일하지 않습니다

🎜>핵심은 세 번째 A 링크인 스타일 작업에 대해 이야기한다는 것입니다. 가장 일반적으로 사용되고 가장 편리하기 때문입니다.
두 번째 연결 스타일은 작동이 번거롭습니다.
세 번째 유형의 링크 스타일은 조작이 번거롭고 스타일을 직접 수정할 수 없습니다. 수정하려면 첫 번째 방법을 사용해야 합니다. 즉, 볼 수만 있고 만질 수는 없습니다

첫 번째 유형의 링크 스타일 작동 방법

높이 속성을 얻으려면 첫 번째 단계는 이전 장의 방법을 사용하는 것입니다.
var a = document.getElementById("dom ");
높이 속성을 다시 가져옵니다. 매우 간단합니다.
var h = a.style.height; 배경 색상
var w = a.style.width;
var bg = a.style.ground;
여백 속성은 margin-top입니다.
이를 얻으려면 직접 작성할 수 없습니다.
var mt = a.style.margin-top;
JQ에서 언급한 카멜 쓰기 방식을 사용해야 합니다
var mt = a.style.marginTop

물론이죠. 그것을 구하는 것은 쓸모가 없으며 수정하는 것이 매우 편리합니다. 예를 들어 높이를 100으로 변경하려면
a.style.height = "100px"
나머지는 동일하므로 더 이상 설명하지 않겠습니다. 🎜>

스타일을 연결하는 두 번째 방법

이 작업에는 브라우저 구분이 필요합니다. 예를 들어 IE와 FF는 이를 얻는 코드가 다르기 때문에 높이를 얻는 방법은
var domcss = document.styleSheets[0].cssRules||document.styleSheets[0].rules; a = domcss[ 0].style.height;
수정 내용은 다음과 같습니다
domcss[0].style.height = "100px"
왜 이렇게 작성되었는지 설명하고 싶지 않습니다. 이것. 궁금하신 분들은 직접 확인해 보세요.

세 번째 연결 스타일 작업 방법

이 작업도 브라우저별로 구분해야 합니다.
이를 얻으려면 일반적으로 다음과 같은 함수를 작성합니다.
function CurrentStyle(element){
return element.currentStyle || document.defaultView.getCompulatedStyle(element, null); }
css.css 파일에 높이 속성이 있다고 가정합니다.
획득 방법은 var a = CurrentStyle("dom").height;
여기의 방법으로 직접 수정할 수 없으며
왜 이렇게 쓰여지는지는 설명하고 싶지 않습니다. 관심이 있으시면 직접 확인해 보세요.

(2) JS를 사용하여 DOM 요소를 동적으로 생성합니다.
사실 이것은 매우 간단합니다. 몇 가지 JS 메서드만 있으면 됩니다. 하지만 집을 짓는 것처럼 단계별로 수행해야 합니다. 예를 들어 다음과 같은 DOM 요소를 만들고 싶습니다.


첫 번째 단계는 div 노드를 만드는 것입니다. var newobj = document.createElement("div");

두 번째 단계는 이 섹션에 id 속성을 추가하는 것이며 속성 이름은 dom입니다. newobj.setAttribute("id","dom");

세 번째 단계는 이 노드에 속성을 추가하는 것입니다. 하나는 앞에서 언급한 스타일을 수정하는 것입니다. .width = "100px"; 또 다른 방법은 두 번째 단계에서 newobj.setAttribute("width", "100px")를 사용하는 것이며 다른 속성에도 마찬가지입니다.

네 번째 단계는 이 노드를 html 문서에서 메소드는 다음과 같습니다. document.body.appendChild(newobj)는 이를 의미합니다. document.body는 body 요소
를 얻고, appendChild(newobj)는 우리가 만든 노드인 body 요소에 자식 요소를 추가합니다.


이 노드를 제거하려면 document.body.removeChild(newobj)입니다.
(하위 요소를 추가하려는 노드로 바꿀 수 있습니다. 요소, for 예를 들어, ID가 con인 요소에 노드를 추가하려면 document.getElementById("con").appendChild(newobj))

라고 작성하면 됩니다. 완료되었습니다. JS에는appendChild와 유사한 메소드가 많이 있습니다. 사용법은 이와 동일합니다. 관심이 있으시면 Baidu에 가실 수 있습니다. 일반적으로 사용되지 않으므로 여기서는 다루지 않겠습니다.

자, 이번 장에서는 여기까지입니다. 다음 장에서는 몇 가지 효과를 작성하는 방법을 가르쳐 드리겠습니다.