javascript DOM 의 상세 한 해석 및 인 스 턴 스 코드

javascript DOM 요약
DOM(문서 대상 모델)이 JS 에서 가장 간단 한 부분 인 줄 알 았 다.부인 할 수 없습니다.이것 은 정말 간단 합 니 다.DOM 의 사고방식 이 약간 고정 되 어 있 기 때문에 고정 적 인 방법 만 간단하게 기억 해 야 하기 때문에 DOM 은 모든 js(여기 서 클 라 이언 트 의 js)입문 의 시작 점 이 라 고 할 수 있 습 니 다.
최근 에 저 는 DOM 에 유용 한 연습 을 할 때 자신의 DOM 지식 이 매우 산만 하 다 는 것 을 알 게 되 었 습 니 다.(잘 파악 하고 있다 고 생각 했 습 니 다)많은 친구 들 이 DOM 이 라 고 생각 할 수도 있 습 니 다.몇 가지 방법 을 호출 하거나 제 가 직접 jQuery 를 사용 해서 DOM 의 세부 사항 을 고려 하지 않 아 도 됩 니 다.네,그것 도 맞습니다.jQuery 는 DOM 의 포장 에 대해 전대미문의 사람 이 라 고 할 수 있 습 니 다.하지만 성장 한 것 처럼 뛰 기 전에 반드시 가 야 합 니 다.그래서 저 는 DOM 에 대해 비교적 상세 하 게 알 아야 한다 고 생각 합 니 다.그래서 저 는 다음 과 같은 DOM 에 관 한 사용 방법 을 정 리 했 습 니 다.
W3C 에서 무릎 꿇 기 DOM 규범 을 정리 하 는 데 자주 사용 되 는 것 도 있 고 별로 유용 하지 않 은 것 도 있다.여기 서 우 리 는 주로 DOM 조작 을 자주 사용 하 는 것 을 토론 한다(DOM 에 관 한 기본 개념 은 여기 서 소개 하지 않 는 다).
노드 차원
노드 차원 이란 html 문서 에 각자 의 특징,데이터,방법의 노드(예 를 들 어 태그)가 존재 하고 노드 간 의 관 계 는 차원 을 구성 하 는 것 을 말한다(사실은 트 리 구조 로 상상 할 수 있다).W3C 의 DOM 1 급 규범 에서 NODE 인 터 페 이 스 를 정의 했다.이 인터페이스 에는 매우 유용 한 방법 이 있다.
　　Node.ELEMENT_NODE;(원소 노드)
　　Node.TEXT_NODE;(텍스트 노드
　　Node.DOCUMENT_NODE(문서 노드)
그리고 모든 노드 는 자신의 노드 유형 표지,즉 NodeType 속성 을 가진다.예 를 들 어 요소 노드 의 nodeType=='1'이다.텍스트 노드 의 node Type='3';문서 노드 의 node Type='9';
1.문서 노드
　   문서 노드 는 한 문서 에서 document 대상 으로 표시 합 니 다.기본 적 인 특징 은 다음 과 같 습 니 다.

console.log(document.nodeType); // 9 
console.log(document.nodeName); // #document 
console.log(document.nodeValue); // null 
console.log(document.parentNode); // null(          ，     ) 

 tip one(문서 의 하위 노드):
1.document.document Element 는 html 대상 을 찾 을 수 있 고 document.childNodes[0]와 document.firstchild 를 통 해 찾 을 수 있 습 니 다.그러나 document Element 는 요 소 를 더 빠 르 고 직접 접근 할 수 있 습 니 다.
tip two(문서 관련 정보):
1.문서 제목 가 져 오기:document.title;
2.완전한 url:document.URL 가 져 오기;
3.도 메 인 이름(ip)가 져 오기:document.domain;
4.페이지 의 URL 가 져 오기:document.referrer;
tip three(문서 찾기 요소):
1.id:document.getElement ById("xxx")를 통 해  일반 페이지 id 는 다 릅 니 다.같은 id 가 여러 개 있 으 면 이 id 가 있 는 첫 번 째 요 소 를 가 져 옵 니 다.
2.tagName:document.getElementsByTagName("xxx")을 통 해"xxx"로 표 시 된 요소 집합 을 되 돌려 줍 니 다!
3.name:document.getElement ByName()을 통 해
document 대상 을 이해 하 는 것 은 매우 간단 하고 호환성 도 비교적 앞 선다.
2.원소 노드
요소 노드 는 요소 태그 이름,하위 노드 와 특성 에 대한 접근 을 제공 합 니 다.그것 의 기본 특징 은 다음 과 같다.

var ele = document.getElementById("element"); //  document         
console.log(ele.nodeType); // 1 
console.log(ele.nodeName); //          
console.log(ele.nodeValue); //    null! 

tip one(html 요소):
　　　　
　　　　var div = document.getElementById("div");
　　　　1. console.log(div.id); // "myDiv"
　　　　2. console.log(div.className); // "bd"
　　　　3. console.log(div.title); // "Body text"
　　　　4. console.log(div.lang); // "en"
　　　　5. console.log(div.dir); // "ltr"
 tip two(취득,설정,삭제 기능):
　　　　1.div.getAttribute("id"); // "myDiv"
　　　　2.div.setAttribuye("id","yourDiv"); // id 변경 됨
　　　　3.div.removeAttribute("id"); //id 삭제 됨
주의:  IE7 및 이하 버 전에 서 세 가지 방법 은 일부 이상 행위 가 존재 합 니 다.set 를 통 해 class 와 style 특성 을 설정 합 니 다.특히 이벤트 처리 프로그램 은 아무런 효과 가 없습니다.get 도 마찬가지 입 니 다.따라서 일반 개발 은 상기 세 가지 방법 을 피하 고 속성 을 통 해 특성 을 설정 하 는 것 을 추천 합 니 다.
 tip three(원소 의 하위 노드):
중요 한 것 은 바로 여기 입 니 다.다음 과 같은 코드 가 있 습 니 다.

<ul id="myList"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul> 
 
var mL = document.getElementById("myList"); 
//   mL         ，      childNodes        ，         
 
console.log(mL.childNodes); // 7 
//?!    7 ? 
 
//    childNodes          ，  4     。       
 
for(var i=0,len=ml.childNodes.length;i<len;i++){ 
   if(ml.childNodes[i].nodeType == "1"){ //           
     // .... 
   }   
}<br>//          <br>//               <br>var items = ml.getElementsByTagName("li"); //     li     
　　

3.텍스트 노드
텍스트 노드 는 글자 그대로 해석 할 수 있 는 순수한 텍스트 내용 을 포함 하고 있 으 며,순수한 텍스트 에는 전의 후의 HTML 문 자 를 포함 할 수 있 으 나 HTML 코드 를 포함 할 수 없습니다.텍스트 노드 의 기본 특징 은 다음 과 같다.

<div id="myDiv">123</div> 
 
var myDiv = document.getElementById("myDiv") //       
var tx = myDiv.childNodes[0] //     childNodes   ，          
 
console.log(tx.nodeType) // 3 
console.log(tx.nodeName) //        nodeName  "#text"; 
console.log(tx.nodeValue) // 123(       )，                        
 
//              . 

　Tip one :
텍스트 노드 를 만 드 는 두 가지 방법:document.createTextNode(),document.createText();
만 든 후 문서 에 직접 끼 워 넣 지 않 습 니 다.참조 가 필요 합 니 다.

var a = document.createElement("p");

　　　　var b = document.createTextNode("123");

　　　　a.appendChild(b);

　　　　document.body.appendChild(a);

이렇게 하면 body 끝 에

123

라 는 태그 가 나타 납 니 다.
개인 적 으로 DOM 은 js 를 배 우 는 입문 점 이 라 고 생각 하지만 시간 이 오래 걸린다.나 는 DOM 을 세 번 이상 보 았 는데,단지 DOM 1 급 규범 일 뿐,매번 새로운 것 이 있 었 다.DOM 을 배운다 면 함정 에 도 신경 을 쓰 고 시간 도 많이 들 여야 한다.　
 읽 어 주 셔 서 감사합니다. 여러분 에 게 도움 이 되 기 를 바 랍 니 다.본 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!