DOM 작업 소개
DOM이란?
문서 객체 모델(DOM)은 HTML 또는 XML 문서를 나타내는 플랫폼 및 언어의 독립형 모델입니다.그것은 기본적으로 웹 페이지의 대상을 대상으로 표시하는 것이다.이는 웹 페이지의 논리적 구조를 나타내며 자바스크립트와 같은 프로그래밍 언어를 사용하여 문서의 구조, 스타일과 내용을 변경할 수 있다.
HTML 문서를 나타내는 DOM을 HTML DOM이라고 합니다.이와 같이 XML 문서를 나타내는 DOM을 XML DOM이라고 합니다.이 강좌의 중점은 HTMLDOM입니다. 자바스크립트를 사용하여 HTML 문서에 접근하고 조작하는 인터페이스를 제공합니다.
DOM 도움말에서는 거의 JavaScript 코드를 사용하여 HTML 문서의 모든 컨텐트에 액세스, 업데이트, 삭제 또는 추가할 수 있습니다.
DOM 구조
우리가 DOM 조작의 전체 내용을 연구하기 전에 먼저 DOM의 구조를 연구하는 것이 중요하다.HTMLDOM에는 노드라는 DOM 객체로 구성된 계층 트리 구조가 있습니다.DOM 헤드의 첫 번째 노드는 문서 노드입니다.HTML 요소(요소 노드)가 문서 노드 아래의 DOM 트리에 추가됩니다.계산의 대다수 일과 마찬가지로 DOM 노드는 다른 노드와 다양한 유형의 관계를 맺을 수 있다.DOM 노드는 다른 노드의 모 노드, 모 노드의 자 노드 또는 다른 노드의 동급 노드일 수 있습니다.이제 DOM 트리가 어떤 모양인지 살펴보자. 우리는 아래의 HTML 코드를 사용하여 이 점을 실현할 것이다.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Mobile OS</h1>
<ul>
<li>Android</li>
<li>iOS</li>
</ul>
</body>
</html>
우리가 DOM 구조를 이해한 이상, 그것들에 대해 각종 조작을 할 수 있도록 특정한 DOM 노드를 어떻게 찾아야 하는가가 매우 중요하다.식별자를 통해 DOM 요소를 선택하거나 찾는 방법을 연구합니다.식별자는 다음과 같습니다.
ID별 요소 선택
ID를 통해 DOM 요소를 선택하려면
document.getElementById( ) 방법을 사용합니다.이 메서드는 선택한 요소의 ID인 개별 문자열을 적용합니다.클래스 이름으로 요소 선택
사용
document.getElementByClassName( ) 방법.문자열 매개변수를 적용하고 지정된 클래스 이름과 일치하는 모든 요소의 활성 HTMLCollection을 반환합니다.태그 이름으로 요소 선택
태그 이름으로 요소를 선택하려면
document.getElementByTagName( ) 방법을 사용합니다.검색할 태그를 나타내는 단일 문자열을 매개변수로 사용합니다.CSS 조회 선택기를 통해 요소를 선택합니다.
이것은 두 가지 기능을 통해 실현된 것이다.
querySelectorAll( ) 및 querySelector( ).CSS 선택기 문자열을 나타내는 단일 문자열 매개변수를 모두 적용합니다.querySelector는 검색과 일치하는 모든 요소의 정적 노드 목록을 되돌려주고querySelector는 하나의 요소를 되돌려줍니다.DOM 노드를 선택할 수 있는 몇 가지 방법을 이해한 후에 진정한 DOM 조작을 시작합시다.
DOM 작업
HTMLDOM을 조작하는 데는 다음과 같은 세 가지 주요 방식이 있다.
새 요소 생성 및 DOM 추가
DOM에 요소를 추가하려면 요소를 만들어 DOM에 추가해야 합니다.다음 DOM 방법을 사용하여 DOM 노드를 생성할 수 있습니다.
document.createElement()
Node.cloneNode()
document.createTextNode()
createElement().새 요소가 생성되지만 DOM에 추가되지는 않습니다.이것은 만들 요소의 태그 이름인 문자열을 매개 변수로 합니다.cloneNode() 호출된 DOM 노드의 복사본을 만듭니다.부울 매개변수가 필요합니다.deep이false이면 호출된 노드cloneNode만 복사하지만 deep이true이면 호출된 노드cloneNode와 전체 DOM 트리를 복사합니다.N/B: When a node is cloned, the node together with all its attributes and values are copied. Event listeners that are added inline in HTML are copied as well. So when you clone a node, be sure to check and update its attributes and their values where necessary.
createTextNode는 일반 텍스트 노드를 만드는 데 사용됩니다.HTML 요소에 텍스트를 배치하는 데 사용됩니다.문자열 매개 변수를 받아들여 텍스트 노드를 되돌려줍니다.
DOM에 새 노드를 추가하려면 다음과 같은 방법을 사용합니다.
Node.appendChild()
Node.insertBefore()
Node.appendChild() 호출된 노드의 하위 목록의 끝에 노드를 추가합니다.appendChild를 호출하는 노드에 추가할 하위 노드를 받아들입니다.If the node passed to
Node.appendChild()already exist in the DOM tree, it is moved from its current position to a new position as a child of its specified parent node.
Node.insertBefore() 지정한 인용 노드에 앞서 호출된 노드의 하위 목록에 노드를 삽입합니다.그것은 두 개의 매개 변수, 새 노드와 인용 노드를 받아들인다.인용 노드의 값이 비어 있으면 새 노드는 하위 목록의 끝에 추가됩니다.Note that reference node is not an optional argument. It is either you pass in a node or the value null.
DOM에서 요소 제거
DOM 트리에서 요소를 제거하려면 를 사용합니다.이것은 지정한 하위 노드를 호출하는 부 노드에서 지정한 하위 노드를 삭제합니다.그것은 매개 변수를 받아들여 삭제된 하위 매개 변수를 되돌려줍니다.
DOM의 요소를 업데이트합니다.
다음과 같은 방법으로 DOM 노드를 업데이트할 수 있습니다.
removeChild() 방법으로 대체할 수 있습니다.호출된 노드의 지정한 하위 노드를 새 지정 노드로 바꿉니다.그것은 두 가지 논점을 포함한다.새 서브노드와 바꿀 서브노드.innerHTML은 HTML 태그를 가져오거나 설정하는 데 사용됩니다.HTML로 해석되는 문자열 값을 적용합니다.
속성을 변경하거나 업데이트하여 수정할 수도 있습니다.이것은 다음과 같은 방법을 통해 실현된 것이다.
getAttribute()
setAttribute()
removeAttribute()
replaceChild() 단일 문자열 매개 변수를 받아들인다. 이 매개 변수는 우리가 그 값을 얻으려는 속성이고 이 속성의 값을 되돌려준다.주어진 속성이 존재하지 않으면, 되돌아오는 값은null 또는 '(빈 문자열) 입니다.getAttribute() 지정된 요소의 속성 값을 설정합니다.이 속성이 이미 존재하면 이 값을 업데이트합니다.그렇지 않으면 지정한 이름과 값을 사용하여 새 속성을 추가합니다.setAttribute() 요소에서 지정된 이름을 가진 속성을 제거합니다.반환 값이 없습니다.요소의 클래스 정보를 변경하려면 두 개의 속성
removeAttribute()과 className 속성을 사용할 수 있습니다.클래스 값을 가져오거나 설정하는 데 className 속성을 사용할 수 있습니다.classList는 요소의 클래스 속성에 대한 live DOMTOkenList 컬렉션을 반환합니다.그것은 다음과 같은 여섯 가지 보조 기능을 가지고 있다.classList - 원소에 클래스를 추가하는 데 사용합니다.이것은 추가할 클래스를 표시하는 임의의 문자열 파라미터를 받아들인다.지정한 클래스가 이미 존재하면 무시합니다.add() - 지정된 클래스 값을 삭제합니다.존재하지 않는 값은 무시됩니다.그것은 임의의 문자열 매개 변수를 받아들인다.remove() - 숫자를 매개 변수로 하고 DOMTOkenList에서 이 숫자로 인덱스된 클래스 값을 되돌려줍니다.item() - 클래스 값, 문자열 및 옵션 부울 값 "force"를 전환합니다.force가true로 설정되면,force가false일 때 클래스를 추가하고 삭제합니다.toggle() - 이 방법은 그에게 전달된 클래스 값이 존재하는지 확인하고 브리 값을 되돌려 클래스 값이 존재하는지 표시합니다.contains() - 이 방법은 기존 클래스를 새로운 클래스로 교체하는 데 사용됩니다.이것은 두 개의 문자열 매개 변수를 받아들인다. 즉, 바꿀 클래스 값과 새 값이다.Reference
이 문제에 관하여(DOM 작업 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/brandonbawe/introduction-to-dom-manipulation-5hjl텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
