JavaScript의 DOM에 대한 자세한 소개(코드 예)

이 글은 JavaScript의 DOM에 대한 자세한 소개(코드 예제)를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. DOM: 문서 ​​개체(문서) 모델입니다. 전체 HTML 페이지를 거꾸로 된 트리로 생각하십시오. HTML은 트리의 루트 노드이고 헤드와 본문은 트리의 하위 노드입니다. DOM 모델에서는 HTML의 각 태그 쌍이 작업을 위한 노드 개체로 처리되어야 합니다

2. DOM의 역할:

JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있습니다

JavaScript는 모든 요소를 ​​변경할 수 있습니다. 페이지의 HTML 속성
JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있습니다.
JavaScript는 페이지의 모든 이벤트에 반응할 수 있습니다.

3.DOM 페이지에서 요소 노드 개체를 찾습니다.

3.1: 페이지에서 요소 노드 개체를 찾습니다. page by id
eg :

var ob1=document.getElementById("d1");
 //将节点对象中内容输出
 alert(ob1.innerHTML);

3.2: 태그 이름을 통해 페이지에 있는 요소 노드의 컬렉션 또는 배열을 찾습니다
eg:

var arr1=document.getElementsByTagName("h2");
//遍历节点对象集合，输出每个对象的内容
for(var i=0;i<arr1.length;i++){
alert(arr1[i].innerHTML);
 }

3.3: 클래스 이름을 통해 페이지에 있는 요소 노드의 컬렉션 또는 배열을 검색합니다
예:

var arr2=document.getElementsByClassName("c1");
            //遍历节点对象集合，输出每个对象的内容
            for(var i=0;i<arr2.length;i++){
                    alert(arr2[i].innerHTML);
            }

3.4: 이름 속성 노드 컬렉션 또는 배열을 통해 요소를 찾습니다.
예:

var arr3=document.getElementsByName("hobby");
            //遍历节点对象集合，输出每个对象的value属性值
            for(var i=0;i<arr3.length;i++){
                alert(arr3[i].value);
           }

4.DOM 작업 노드 개체 콘텐츠(레이블, 하위 레이블, 하위 레이블 텍스트의 텍스트 콘텐츠...):
4.1: 노드 콘텐츠 가져오기: node object.innerHTML
예:

alert(ob1.innerHTML);

4.2: 노드 콘텐츠 수정: node object.innerHTML="new value";

eg:

ob1.innerHTML="哈哈";

4.3: 노드 콘텐츠 지우기:
eg:

ob1.innerHTML="";

5.DOM은 노드 개체의 텍스트 콘텐츠를 조작합니다(레이블의 텍스트와 하위 레이블의 텍스트...).
5.1: 노드 텍스트 콘텐츠 가져오기(레이블의 텍스트와 하위 라벨): node object.innerText
eg:

alert(ob1.innerText);

5.2: 노드 텍스트 콘텐츠 수정(레이블의 모든 콘텐츠가 수정됨): node object.innerText = "new value";
eg:

ob1.innerText="呵呵";

6. DOM 작업 노드 객체의 속성:
6.1: 노드 객체의 속성을 가져옵니다. 속성 이름
eg:

 alert(ob2.src);

6.2: 노드 객체 속성 수정: node object.attribute name = "value"
eg:

 ob2.src="img/img-2.jpg";

6.3: 노드 객체 속성 삭제: node object.removeAttribute("속성 이름")
eg:

ob2.attributes.removeNamedItem("title");
ob2.removeAttribute("title");

7. DOM 작업 노드 객체 스타일:
7.1: 노드 객체의 스타일 설정: node object.style.Style name = "style value";
eg:

ob1.style.color="red";
ob1.style.backgroundColor="blue";

7.2: 노드 객체의 스타일 가져오기: Node object.style.Style name
eg:

alert(ob1.style.color);

8.1: onload: 페이지 로딩 이벤트.
8.2: onclick: 마우스 클릭 이벤트.
8.3: onchange: 이벤트를 변경합니다.
8.4: onblur: 커서가 이벤트를 떠납니다.
8.5: onfocus: 커서 이벤트를 가져옵니다.
8.6: onmouseover: 마우스 통과 이벤트.
8.7: onmouseout: 마우스가 이벤트를 떠납니다.

9.DOM 작업 노드 개체

9.1: 노드 개체 만들기:
9.1.1: 레이블 노드 개체 만들기: document.createElement("레이블 이름");
eg:

//创建节点对象
var node1=document.createElement("p");

eg:

//创建节点对象
var node1=document.createElement("h1");
node1.innerHTML="你好<span>中国</span>";

9.1.2: 텍스트 객체 생성: document.createTextNode("text content");

eg:

//创建文本对象
var node1text=document.createTextNode("这是一个段落");

9.2: 노드 객체 추가: node object.appendChild(하위 노드);

eg:

//将节点对象添加body中
document.getElementById("d1").appendChild(node1);

//直接向一个标签中添加子节点
document.getElementById("d2").innerHTML=document.getElementById                                
("d2").innerHTML+"<h2>哈哈</h2><p>呵呵呵</p>";

9.3: 노드 객체 삭제: 상위 노드 객체 .removeChild(하위 노드 객체);

eg:

//获得父节点对象
var parentNode=document.getElementById("d1")
 //获得要删除的子节点对象
 var childNode=document.getElementsByTagName("p")[0];
//删除子节点对象
//parentNode.removeChild(childNode);
//删除当前节点对象，只有谷歌，火狐
childNode.remove();

9.4: 노드 객체 복사: node object.cloneNode(true);

eg:

//获得要复制的节点对象
var childNode=document.getElementsByTagName("p")[0];
//复制节点对象,true表示复制节点的同时将内容复制，false反之
var copyNode=childNode.cloneNode(true);
//将复制的节点添加到body中
document.getElementById("d1").appendChild(copyNode);

9.5: 요소의 하위 노드 교체: 상위 노드 object.replaceChild(newnode , oldnode);

위 내용은 JavaScript의 DOM에 대한 자세한 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!