DOM 요소의 JavaScript 전체 요약

공부하는 동안 javascript dom에 문제가 자주 발생하므로 이 글에서는 이에 대해 설명하겠습니다.

문서 객체 외에도 DOM에서 가장 일반적으로 사용되는 요소는 Element 객체입니다. Element 객체는 HTML 요소를 나타냅니다.

Element 객체는 요소 노드, 텍스트 노드 및 주석 노드 유형의 하위 노드를 가질 수 있습니다. DOM은 요소를 추가, 삭제, 수정 및 확인하는 일련의 메소드를 제공합니다.

Element에는 몇 가지 중요한 속성이 있습니다.

nodeName: 요소 태그 이름, 유사한 tagName
nodeType: 요소 유형
className: 클래스 이름 id: 요소 idchildren: 하위 요소 목록(HTMLCollection)
childNodes: 하위 요소 목록(NodeList)
firstChild: 첫 번째 하위 요소
lastChild: 마지막 하위 요소
nextSibling: 다음 형제 요소
previousSibling: 이전 형제 요소
parentNode, parentElement: 부모 요소

Query 요소

getElementById
메소드는 지정된 ID 속성과 일치하는 요소 노드를 반환합니다. 일치하는 노드가 없으면 null이 반환됩니다. 이것은 또한 요소를 얻는 가장 빠른 방법이기도 합니다

var elem = document.getElementById("test");getElementsByClassName()
getElementsByClassName

이 메소드는 클래스 이름이 지정된 조건(검색 범위에 자체 포함)을 충족하는 모든 요소와 요소가 실시간으로 반영되어 결과가 진행됩니다. 이 메서드는 문서 개체뿐만 아니라 모든 요소 노드에서도 호출할 수 있습니다.

var elements = document.getElementsByClassName(names);//getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

document.getElementsByClassName('red test');```
* getElementsByTagName()

getElementsByTagName 메소드는 지정된 태그가 있는 모든 요소를 ​​반환합니다(검색 범위에는 자체 포함). 반환 값은 HTMLCollection 개체입니다. 즉, 검색 결과는 동적 컬렉션이며 모든 요소의 변경 사항은 반환된 컬렉션에 실시간으로 반영됩니다. 이 메서드는 문서 개체뿐만 아니라 모든 요소 노드에서도 호출할 수 있습니다.

var paras = document.getElementsByTagName("p");
//上面代码返回当前文档的所有p元素节点。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。```

getElementsByName()
getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

// 다음 형식이 있다고 가정합니다. b9750e3d8cb6eeb691b69e336073dd5df5a47148e367a6035fd7a2faa965022evar form = document.getElementsByName("x");
forms[0].tagName // "FORM " //IE 브라우저에서 이 방법을 사용하면 name 속성은 없지만 동일한 이름의 id 속성이 있는 요소도 반환되므로 name 및 id 속성을 다른 값으로 설정하는 것이 가장 좋습니다. ```* querySelector()
querySelector 메소드는 지정된 CSS 선택기와 일치하는 요소 노드를 반환합니다. 여러 노드가 일치 기준을 충족하는 경우 첫 번째로 일치하는 노드가 반환됩니다. 일치하는 노드가 없으면 null이 반환됩니다.

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
//querySelector方法无法选中CSS伪元素。```

querySelectorAll()
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);//querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。var matches = document.querySelectorAll("div.note, div.alert");//上面代码返回class属性是note或alert的div元素。

elementFromPoint()
elementFromPoint方法返回位于页面指定位置的元素。

var element = document.elementFromPoint(x, y);//上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。

elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。

Create elements

createElement()
createElement方法用来生成HTML元素节点。

var newDiv = document.createElement("div");//createElement方法的参数为元素的标签名，即元素节点的tagName属性。//如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。

createTextNode()
createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。

var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");//上面代码新建一个div节点和一个文本节点
createDocumentFragment()

//createDocumentFragment方法生成一个DocumentFragment对象。var docFragment = document.createDocumentFragment();```

DocumentFragment 개체는 메모리에 존재하는 DOM 조각이지만 현재 문서에 속하지 않습니다. 더 복잡한 DOM 구조를 생성한 다음 현재 문서에 삽입하는 데 자주 사용됩니다. 이것의 장점은 DocumentFragment가 현재 문서에 속하지 않기 때문에 이를 변경해도 웹 페이지가 다시 렌더링되지 않으므로 현재 문서의 DOM을 직접 수정하는 것보다 성능이 더 좋습니다.

##요소 수정

*appendChild()
요소 끝에 요소 추가

var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");newDiv.appendChild(newContent);```
insertBefore()

요소 앞에 요소 삽입

var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");newDiv.insertBefore(newContent, newDiv.firstChild);replaceChild()
replaceChild()

두 개의 매개변수 허용: 삽입할 요소와 삽입할 요소 replacement

newDiv.replaceChild(newElement, oldElement);```
* removeChild()

Delete element

parentNode.removeChild(childNode);```
cloneNode()

Clone 메서드에는 부울 매개변수가 있습니다. true가 전달되면 요소와 해당 하위 요소가 복사됩니다(IE도 마찬가지입니다). 해당 이벤트를 복사합니다.) false인 경우 요소 자체만 복사됩니다. ##HTMLCollection 및 NodeList 우리는 Element 객체가 요소를 나타낸다는 것을 알고 있으므로 여러 요소 Collection은 일반적으로 두 가지 데이터 유형을 갖습니다. NodeList 객체는 HTML 요소의 컬렉션을 나타내는 인터페이스입니다. 및 목록을 순회할 수 있는 속성

다음 메서드는 HTMLCollection 개체를 가져옵니다

node.cloneNode(true);```##属性操作* getAttribute()
//getAttribute()用于获取元素的attribute值node.getAttribute('id');```
createAttribute()

다음 메서드는 NodeList 개체를 가져옵니다

//createAttribute()方法生成一个新的属性对象节点，并返回它。attribute = document.createAttribute(name);
createAttribute方法的参数name，是属性的名称。

* 모두 읽기 전용입니다.

* 모두 실시간입니다. 문서에 대한 변경 사항은 관련 개체에 즉시 반영됩니다(한 가지 예외를 제외하고 document.querySelectorAll에서 반환된 NodeList는 실시간이 아닙니다)

* 모두 item() 메서드가 있으며 item(index) 또는 item("id") #####차이점은 * HTMLCollection 객체에는 id 또는 name 요소를 전달하여 얻을 수 있는 명명된Item() 메서드가 있다는 것입니다.

* HTMLCollection의 item() 메서드는 속성을 통해 요소를 얻습니다. (document.forms.f1)은 id와 name을 지원할 수 있지만 NodeList 객체는 id만 지원합니다.

이 기사에는 dom에 대한 관련 설명이 있습니다. 자세한 내용은 PHP 중국어 웹사이트를 참조하세요.

위 내용은 DOM 요소의 JavaScript 전체 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!