javascript DOM의 샘플 코드에 대한 자세한 설명

이 글은 주로 javascript DOM에 대한 자세한 설명과 예제 코드 관련 정보를 소개하고 있습니다. 도움이 필요한 친구들은

javascript DOM 요약

을 참고하세요.

저는 항상 DOM(DocumentObjectModel)이 JS의 가장 간단한 부분이라고 생각했습니다. DOM의 사고 모드가 약간 고정되어 있고 일부 고정된 메소드만 기억하면 되므로 DOM은 모든 js의 시작점이라고 할 수 있기 때문에 실제로 매우 간단하다는 것은 부인할 수 없습니다(여기서는 클라이언트를 참조함). js).

최근 DOM에 유용한 몇 가지 연습을 하다가 내 DOM 지식이 매우 단편적이라는 것을 알게 되었습니다(저는 항상 DOM에 대해 잘 알고 있다고 생각했습니다). DOM은 DOM의 세부 사항을 전혀 고려할 필요 없이 몇 가지 메서드를 호출하거나 jQuery를 직접 사용합니다. 네, 맞습니다. jQuery의 DOM 캡슐화는 전례가 없는 일이지만, 성장하는 것과 마찬가지로 걸을 수 있어야 뛰기 때문에 DOM에 대한 더 자세한 이해가 필요하다고 생각하므로 DOM에 대해 다음과 같이 요약했습니다. 사용 방법.

W3C DOM 사양 요약에는 매우 일반적으로 사용되는 것도 있고 별로 유용하지 않은 것도 있습니다. 여기서는 일반적으로 사용되는 DOM 작업 (DOM 관련 의 기본 개념은 여기서 소개하지 않습니다.) :

노드 레벨

소위 노드 레벨은 다음을 의미합니다.

html 문서에는 고유한 특성, 데이터, 메소드를 갖는 노드(레이블 등)가 있고, 노드 간의 관계는 계층 구조(실제로는 트리 구조로 상상될 수 있음)를 구성합니다. NODE 인터페이스는 W3C의 DOM 레벨 1 사양에 정의되어 있습니다. 이 인터페이스에는 매우 유용한 몇 가지 메서드가 있습니다.

Node.ELEMENT_NODE; (요소 노드)

Node.TEXT_NODE;

　 Node.DOCUMENT_NODE(문서 노드)

그리고 각 노드에는 NodeType 속성인 자체 노드 유형 플래그가 있습니다(예: 요소 node == ') 1'; 텍스트 노드의 nodeType == '9';

1. 문서 노드는

문서 문서 객체로 표현되며 기본 특징은 다음과 같습니다.

console.log(document.nodeType); // 9 
console.log(document.nodeName); // #document 
console.log(document.nodeValue); // null 
console.log(document.parentNode); // null(它已经是最顶层的节点，树的根节点)

팁 1(문서의 하위 노드):

1.document.documentElement는 html을 가져올 수 있습니다. 객체이며 document.get childNodes[0] 및 document.firstchild를 통해서도 얻을 수 있습니다. 그러나 documentElement는 요소에 대한 더 빠르고 직접적인 액세스를 제공합니다.

팁 2(문서 관련 정보):

1. 문서 제목 가져오기: document.title;

2. 전체 URL 가져오기: document.URL;

　3. 도메인 이름(ip) 가져오기: document.domain;

　4. 페이지 URL 가져오기: document.referrer;

팁 3(문서 검색 요소) :

1. ID 전달: document.getElementById("xxx"); 일반적으로 동일한 ID가 여러 개인 경우 해당 ID를 가진 첫 번째 요소를 가져옵니다.

　2. 태그 이름을 통해: document.getElementsByTagName("xxx"); 태그 이름이 "xxx"인 요소 컬렉션을 반환합니다!

　3. 이름을 통해: document.getElementByName();

문서 개체를 이해하는 것은 매우 간단하며 호환성도 비교적 고급입니다.

2. 요소 노드

요소 노드는 요소 태그 이름, 하위 노드 및 속성에 대한 액세스를 제공합니다. 기본 특징은 다음과 같습니다:

var ele = document.getElementById("element"); //通过document取到一个标签对象 
console.log(ele.nodeType); // 1 
console.log(ele.nodeName); // 返回元素的标签名 
console.log(ele.nodeValue); //永远返回null!

팁 1(html 요소):

　<p id="myp" class="bd" title="Body text" lang="en" dir="ltr"></p>
　　　　var p = document.getElementById("p");
　　　　1. console.log(p.id); // "myp"
　　　　2. console.log(p.className); // "bd"
　　　　3. console.log(p.title); // "Body text"
　　　　4. console.log(p.lang); // "en"
　　　　5. console.log(p.dir); // "ltr"

팁 2(get, set, delete 기능):

　1.p.getAttribute("id"); // "myp"
　　　　2.p.setAttribuye("id","yourp"); // id已变动
　　　　3.p.removeAttribute("id"); //id已删除

주의해야 할 점: IE7 이하에서는 세 가지 방법에 몇 가지 비정상적인 동작이 있습니다. 특히

이벤트가

프로그램을 처리할 때 set을 통해 클래스 및 스타일 속성을 설정하면 아무런 효과가 없습니다. get 의 경우에도 마찬가지입니다. 따라서 일반적인 개발에서는 위의 세 가지 방법은 지양하고, 속성을 통해 특성을 설정하는 것이 좋습니다. 팁 3(요소의 하위 노드):

제가 집중하고 싶은 부분은 다음과 같은 코드입니다:

<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 코드는 포함될 수 없습니다. 텍스트 노드의 기본 특성은 다음과 같습니다.

<p id="myp">123</p> 
 
var myp = document.getElementById("myp") //取到元素节点 
var tx = myp.childNodes[0] //前面也提过childNodes的特性，这次取到了文本节点 
 
console.log(tx.nodeType) // 3 
console.log(tx.nodeName) // 所有文本节点的nodeName都是"#text"; 
console.log(tx.nodeValue) // 123(节点包含的文本)，注意元素节点是不能取到它包含的文本节点的文本的 
 
//所以其父节点显然是个元素节点.

팁 1:

텍스트 노드를 만드는 두 가지 방법: document.createTextNode(), document.createText();

작성 일단 완료되면 문서에 직접 삽입되지 않으며 인용이 필요합니다.

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

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

　　　　a.appendChild(b);

　　　　document.body.appendChild(a);

이렇게 하면 본문 끝에 e388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a3와 같은 태그가 나타납니다.

개인적으로 DOM은 확실히 js를 배우기 위한 시작점이라고 생각하지만, 다듬는 데에도 오랜 시간이 걸립니다. 저는 DOM을 세 번 이상 읽었습니다. DOM 레벨 1 사양에 불과하며 매번 새로운 내용이 있습니다. DOM을 배우면 몇 가지 함정에 주의를 기울이고 그것에 대해 생각하는 데 더 많은 시간을 투자해야 합니다.

위 내용은 javascript DOM의 샘플 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!