JavaScript의 DOM 작업에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript의 DOM 작업에 대한 자세한 설명

黄舟

풀어 주다： 2017-08-13 10:33:24

원래의

1423명이 탐색했습니다.

1. DOM이란

JavaScript는 ECMAScript, DOM, BOM의 세 부분으로 구성됩니다. DOM은 웹 페이지 콘텐츠를 설명하는 방법과 인터페이스, 즉 Document Object Model을 나타냅니다. 웹 페이지에서는 페이지(또는 문서)를 구성하는 개체가 트리 구조로 구성됩니다. 문서의 개체를 표현하는 데 사용되는 표준 모델을 DOM이라고 하며, 트리 구조를 우리는 흔히 DOM 트리라고 부릅니다.

　Wikipedia에서 DOM을 소개하는 것이 더 정확합니다. DOM은 크로스 플랫폼이며 언어 독립적인 애플리케이션 프로그래밍 인터페이스입니다. 즉, 현재 HTML, XHTML 또는 XML 문서를 트리 구조로 처리하며, 여기서 각 노드는 객체이고 각 노드는 노드는 문서의 일부를 나타냅니다.

2. DOM 노드

1. 노드 유형

DOM 트리는 다양한 유형의 노드로 구성되며 이러한 노드 유형은 nodeType 값을 전달할 수 있습니다. 우리가 얻거나 원하는 것이 해당 유형의 노드인지 확인합니다.

노드 유형	요소 노드(레이블 노드)	속성 노드	텍스트 노드(공백, 줄 바꿈, 텍스트)	댓글 노드	문서 노드
nodeType 값	1	2	3	8	9

nodeType 값으로 유형을 판단하는 것 외에도 nodeName을 사용하여 요소 노드와 속성 노드의 노드 이름을 볼 수 있고, nadeValue를 사용하여 속성 노드의 속성 값을 볼 수도 있습니다.

2. 요소 노드 가져오기

document.getElementById(id);
document.getElementByTagName(tagname);
document.getElementByClassName(classname);

로그인 후 복사

일반적으로 JavaScript에서 HML의 요소 노드를 변경하거나 사용하려면 호출하기 전에 먼저 가져와야 합니다. 요소의 Id 속성이나 Class 속성을 설정하거나 태그 이름을 사용하여 가져옵니다. 그러나 getElementById() 메소드는 XML에서 작동하지 않는다는 점에 유의하십시오. XML 문서에서는 id 속성을 사용하여 검색을 수행해야 하며 이 유형은 XML DTD에서 선언되어야 합니다.

원하는 노드를 얻은 후 노드의 관계를 통해 다른 노드도 작동할 수 있습니다. 여기서는 p 요소를 초기 요소 노드로 사용합니다.

2.1 하위 노드

p.children();
p.childNodes();

로그인 후 복사

　 p 아래에서 하위 노드를 가져오면 p.children()은 요소 노드의 하위 노드만 가져올 수 있지만 p.childNodes()는 모든 유형의 하위 노드를 가져옵니다. 즉, 빈 텍스트 노드가 구문 분석됩니다.

　2.2 상위 노드

p.parentNode();
p.offsetParent();

로그인 후 복사

　p의 상위 노드를 가져옵니다. p.offsetParent()는 위치 지정 속성이 있는 조상 노드를 가져옵니다. 즉, 상위 노드 시작에서 검색 상위 노드에 위치 속성이 없으면 위치 속성이 있는 노드를 찾을 때까지 상위 노드의 상위 노드를 검색합니다.

　2.3 형제 노드

//下一个兄弟节点 p.nextElementSibling();
p.nextSibling();//上一个兄弟节点 p.previousElementSibling();
p.previousSibling();

로그인 후 복사

여기에 요소가 있는지 여부는 하위 노드를 얻는 것과 마찬가지로 매우 중요합니다. p.nextSibling() 그리고 p.previousSibling ()는 빈 노드를 분석할 때 p 아래의 공간 또는 캐리지 리턴을 얻습니다. 차이점은 위와 같습니다.

3. 노드 운영

HTML에서 수정된 노드를 추가하고 삭제하는 것 외에도 JavaScript에서도 노드를 운영할 수 있습니다.

3.1 노드 만들기

//获取p的第一个子节点p.firstElementChild();
p.firstChild();//获取p的最后一个子节点p.lastElementChild();
p.lastElementChild();

로그인 후 복사

텍스트 노드 만들기는 일반적으로 요소 노드에 콘텐츠를 추가하는 데 사용되며 innerHTML 형식과 같은 HTML을 포함할 수 없습니다. creatTextNode()는 더 안전하지만 innerText에는 브라우저 호환성 문제가 있습니다. 　

3.2 노드 추가

　 우리가 생성한 노드는 HTML에 자동으로 추가되지 않으며 생성된 노드를 작동시켜야 합니다.

//创建节点/创建文本节点createElement();
createTextNode()；

로그인 후 복사

　insertBefore()의 두 번째 매개변수는 선택적 매개변수로, 두 번째 매개변수를 작성하지 않으면 기본적으로 tail에 추가되며, 이는appendChild();

3.3과 동일합니다. replacement

//向尾部添加子节点 appendChild(); 
//向目标节点之前添加insertBefore(newElement,targetElement);

로그인 후 복사

　p.replaceChild(newElement,oldElement) , 새 노드든 이전 노드든 p의 하위 노드여야 합니다.

3.4 삭제

//将旧节点换为新节点replaceChild(newElement,oldElement);

로그인 후 복사

　하위 노드가 삭제된다는 점에 유의하세요. 　

3.5 Clone/Copy

removeChild();

로그인 후 복사

　매개변수의 부울 값이 true인 경우 전체 복사, 즉 노드 자체와 그 아래의 모든 하위 노드가 복사됩니다. 　파라미터의 Boolean 값이 false인 경우 얕은 복사이며, 노드 자체만 복사됩니다. 　

3.6 결정

//深复制或浅复制cloneNode(boolean);

로그인 후 복사

　 자식 노드가 있는지 확인하고 부울 값을 반환합니다.

3.7 속성

//获取节点属性getAttribute();//设置节点属性setAttribute();//删除节点属性removeAttribute();

로그인 후 복사

　要注意的一点就是class属性不能通过setAttribute(); 设置。

三、DOM的优缺点

　　DOM的优点主要表现在：易用性强，并且遍历简单，支持XPath，增强了易用性。

　　DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高。

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