JS에서 DOM을 작동하는 방법

문서 개체 모델(DOM)은 W3C(World Wide Web Consortium)의 표준입니다. DOM은 HTML 및 XML에 액세스하기 위한 표준을 정의합니다. W3C DOM(문서 개체 모델)은 프로그램을 허용하는 플랫폼 및 언어 중립적 인터페이스입니다. 문서의 내용, 구조 및 스타일을 동적으로 액세스하고 업데이트하는 스크립트.

W3C Dom 표준은 3가지 다른 부분으로 나뉩니다. 1. Core DOM - 모든 구조화된 문서의 표준 모델 2. XML DOM - XML ​​문서의 표준 모델 3. HTML DOM - HTML 문서의 표준 모델

In HTML DOM, 모든 것이 노드이고 DOM은 여러 노드로 처리되는 HTML입니다. 1. 전체 문서는 문서 노드입니다. 2. 각 HTML 요소는 요소 노드입니다. 3. HTML 요소 내의 텍스트는 텍스트입니다. 노드 4. 각 HTML 속성은 속성 노드입니다. 5. 주석은 주석 노드입니다.

HTML DOM은 HTML 문서를 트리 구조로 취급합니다. 이 구조를 HTML DOM을 통해 트리의 모든 노드에 액세스할 수 있습니다. 액세스를 위해 모든 HTML 노드(요소)를 수정할 수 있으며 노드를 생성하거나 삭제할 수 있습니다.

일반적으로 사용되는 일부 HTML DOM 메서드: 1.getElementById(id) - 지정된 ID를 가진 노드(요소) 가져오기 2.appendChid (노드) - 새 하위 노드(요소)를 삽입합니다. 3.removeChild(노드) - 하위 노드(요소)를 삭제합니다.

일반적으로 사용되는 일부 HTML DOM 속성: 1.innerHTML - 노드(요소)의 텍스트 값 2. parentNode - 노드(요소)의 상위 노드 3.childNodes - 노드(요소)의 하위 노드 4..attributes - 노드(요소)의 속성 node

DOM Operation

Create element

var newp = document. createElement("p") ;클래스 이름 설정 newp.className = "item"; ID 설정

newp.id = "first";배경색 설정 newp.style.Background = "red";요소 상자 추가 the body

먼저 추가하려는 요소를 가져옵니다.

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName("box")[0];body.appendChild(newp) ;//본문에 두 개의 내용이 있는데 하나는 newp이고 다른 하나는 box입니다.//현재 상황은 newp의 내용을 상자 뒤에 삽입하는 것입니다

p에 있는 내용을 상자 앞쪽에 삽입하려면 , 다음과 같습니다: body.insertBefore(newp, box); 요소 body를 삭제합니다.removeChild(box);//상자 라벨 삭제 box.remove();DOM attribute

Node: 라벨 텍스트 주석문(doctype)

다음 방법을 통해 요소 순서의 모든 노드를 얻을 수 있습니다: console.log(box.childNodes) ; 레이블 유형의 하위 노드를 가져옵니다. 가져온 노드는 레이블 console.log(box.cheildren[0]입니다. ); 크기 위치 console.log(newp.offsetWidth);//인쇄 너비에는 테두리가 포함됩니다. console.log(newp.clientWidth );//테두리 또는 스크롤 막대(가시 영역)는 포함되지 않습니다. console.log(newp.scrollHeight );//요소가 수직/수평으로 스크롤된 거리이거나 요소가 롤아웃될 때 요소를 볼 수 없습니다. 오버플로의 일부는 표시되는 초과 부분을 처리하고 기본적으로 표시됩니다. Overflow:scroll; //스크롤 막대의 위치는 상위 요소의 위치를 ​​기준으로 나타납니다. console.log(newp.offsetTop); console.log(newp.offsetLeft); 하위 요소는 위로 스크롤됩니다. scrollTop을 제외하고 위 요소는 다음과 같습니다. 읽기 전용 console.log(newp.scrollTop)

Timer

일회성 타이머, 한 번만 사용할 수 있습니다

작성 방법 1: var time = setTimeout(function(){ console.log("일회성 타이머 "); },1000);작성 방법 2: function f1(){ console.log("일회성 타이머"); } setTimeout(f1,1000);일회성 타이머 지우기clearTimeout(time); 루프 타이머 , 가끔씩 함수가 실행됩니다

작성 방법 1: var 타이머 = setInterval(funtion(){ console.log("Loop 타이머"); })var 타이머 = setInterval (f2, 1000); timerclearInterval(timer); DOM은 실제로 JS가 html 요소를 작동할 수 있도록 공식화한 사양입니다. DOM 개체와 같은 많은 속성과 배치 방법이 있습니다. 노드 생성, 노드 복사, 노드 제거, 속성 수정 등은 JavaScript가 HTML 태그를 작동하는 것을 용이하게 하는 것으로 나타납니다. DOM은 HTML 문서를 기반으로 하며 Javascript가 동적으로 사용할 수 있도록 제공되는 문서 객체 모델(Document Object Model)입니다. (예: Click 이벤트) 문서의 상태를 수정하므로 DOM을 조작하는 것은 HTML 문서 객체(각 태그)를 조작하는 것입니다.

CSS는 단지 HTML 문서의 스타일을 지정하는 것 뿐이며, javascript는 이전에 HTML과 CSS를 결합할 수 있습니다. DHTML(동적 HTML)이라고 합니다

DOM은 XML(또는 HTML)의 노드를 프로그래밍 언어(예: javascript)로 제어되는 기술 사양을 제공할 수 있는 기본적으로 통합된 개체 데이터로 정의하는 것입니다

Javascript 언어를 사용하여 DOM을 작동할 수 있습니다. 웹페이지를 변경하려면 어떤 노드를 동작시켜야 하는지 자바스크립트에 알려주어야 합니다. 이것이 DOM을 조작하는 것입니다. DOM을 조작하면 웹페이지 상호작용이 의존하는 방식을 변경할 수 있습니다. 이 DOM 기술은 Javascript가 없어도 다른 언어를 사용하여 작동할 수도 있습니다. DOM

DOM은 트리이고 값과 리프에 번호가 매겨져 있습니다. 해당 분기의 어떤 리프, 그리고 이 리프에 어떤 변경 사항을 적용해야 하는지

Zhihu에 있는 경우 검색 창에 데이터를 입력하면 Javascript가 입력을 캡처하고 서버에 대한 비동기 쿼리를 사용하여 검색 결과를 동적으로 표시합니다. .

아래로 슬라이드하면 Javascript가 슬라이드 거리를 캡처하고 거리에 따라 DOM을 변경할지 여부를 결정한 다음 뒤를 돌아보지 않도록 상단 탐색 표시줄이 브라우저 창과 함께 스크롤되도록 허용합니다.

클릭하여 수정하는 경우 버튼을 누르면 자바스크립트는 이 버튼의 마우스 클릭 이벤트를 캡처하고 편집 가능한 답변을 사용자에게 피드백합니다.

자바스크립트는 실제로 DOM을 변경할 수 없습니다. 새로고침하면 표시된 콘텐츠가 사라집니다. .

하지만 이러한 변경 사항을 요청 형태로 백엔드 언어 인터페이스에 전달할 수 있으며, 백엔드 언어 ​​​​PHP Python Java Node 등은 요청을 받은 후 후속 작업을 수행합니다. 이 변경 사항은 서버 데이터를 수정하며 새로 고침 후에도 사라지지 않습니다.

그러나 팝업 창 슬라이딩 및 색상 변경 등과 같은 사용자 상호 작용은 서버와 혼합될 필요가 없습니다. 그 이유는 상호 작용이 일시적으로만 사용되며 기본값이 되며 저장할 필요가 없기 때문입니다. 서버와 상호 작용할 때 피드백이 있는지 확인하세요.

HTML은 정적 구조(웹의 기본 요소)를 표현합니다. 페이지, 각 요소의 기본 기능, 요소의 기본 기능이 어떤 의미를 생성할 수 있는지, 이 의미가 어떤 콘텐츠를 생성할 수 있는지)

CSS는 계층적 미화(요소의 기본 및 특수 속성, 모양, 상태)를 렌더링합니다. 요소 및 요소의 레이아웃)

Javascript는 동적 상호 작용(비동기 새로 고침을 위해 AJAX를 사용하여 DOM을 작동하고 서버와 상호 작용)을 담당합니다. 이 링크는 잘못되지 않았습니다. https://www.zhihu.com/question/34219998/ Answer/58211568DOM은 Javascript가 웹 페이지를 작동하는 인터페이스입니다. 정식 이름은 Document Object Model입니다. 그 기능은 웹 페이지를 Javascript 객체로 변환하여 Javascript 스크립트를 사용하여 처리할 수 있도록 하는 것입니다. 및 요소 삭제 등)

브라우저는 문서화된 구조(예: HTML 또는 XML 등)를 DOM 모델을 기반으로 일련의 노드로 구문 분석한 다음 이러한 노드를 트리 구조(Dom Tree)로 구문 분석합니다. 모든 노드와 최종 트리 구조는 표준화된 외부 인터페이스를 가지고 있으므로 DOM은 웹 페이지에 대한 프로그래밍 인터페이스로 이해할 수 있습니다. DOM은 현재 DOM3을 사용하고 있습니다

엄밀히 말하면 DOM은 Javascript에 속하지 않습니다. DOM 조작은 Javascript에서 가장 일반적인 작업이고 Javascript에서 가장 일반적인 작업은 가장 일반적인 DOM 조작 언어입니다.

DOM

DOM 또는 문서 개체 모델은 W3C(World Wide Web Consortium)의 표준입니다.

DOM은 HTML 및 XML 액세스 표준을 정의합니다. W3C DOM(문서 개체 모델)은 플랫폼 및 언어 중립적인 인터페이스입니다. 프로그램과 스크립트를 동적으로 허용 문서의 내용, 구조 및 스타일에 액세스하고 업데이트합니다.

W3C DOM 표준은 3가지 부분으로 나뉩니다. 1. Core DOM - 모든 구조화된 문서의 표준 모델 2. XML DOM - XML 문서의 표준 모델 3 .HTML DOM - HTML 문서의 표준 모델

HTML DOM에서는 모든 것이 노드이고, DOM은 HTML로 여러 노드로 처리됩니다. 1. 전체 문서는 문서 노드입니다. 2. 각각. HTML 요소는 요소 노드입니다. 3. HTML 요소 내의 텍스트는 텍스트 노드입니다. 4. 각 HTML 속성은 속성 노드입니다. 5. 주석은 주석 노드입니다.

HTML DOM은 HTML 문서를 트리 구조라고 합니다. 노드 트리. HTML DOM을 통해 트리의 모든 노드는 JavaScript를 통해 액세스할 수 있고 모든 HTML 노드(요소)를 수정할 수 있으며 노드를 생성하거나 삭제할 수도 있습니다.

일반적으로 사용되는 일부 HTML DOM 메서드: 1.getElementById(id )-지정된 ID가 있는 밴드 노드(요소) 가져오기 2.appendChid(노드)-새 하위 노드(요소) 삽입 3.removeChild(노드)-하위 노드(요소) 제거

일반적으로 사용되는 일부 HTML DOM 속성: 1. innerHTML-node (요소)의 텍스트 값 2. parentNode - 노드(요소)의 상위 노드 3. childNodes - 노드(요소)의 하위 노드 4. attribute - 노드(요소)의 속성 노드

DOM 연산

요소 생성

var newp = document.createElement("p");클래스 이름 설정 newp.className = "item";ID 설정

newp.id = "first";배경색 설정 newp.style.Background = "red";요소 추가 상자가 본문에 들어갑니다

먼저 추가할 요소를 가져옵니다

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName(" box")[0];body.appendChild(newp) ;//현재 본문에는 두 가지 내용이 있습니다. 하나는 newp이고 다른 하나는 box입니다.//현재 상황은 상자 뒤에 newp 내용을 삽입하는 것입니다

p의 내용을 상자 앞에 삽입하려면 다음을 수행하십시오: body.insertBefore(newp, box);Remove element body.removeChild(box);//Remove box label box.remove(); DOM 속성

Node: 라벨 텍스트 주석문(doctype)

모든 노드를 주문하려면 다음 방법을 통해 요소를 얻을 수 있습니다. console.log(box.childNodes); 라벨 유형의 하위 노드를 가져옵니다. 얻은 노드는 레이블입니다. console.log(box.cheildren[0]); 크기 위치 console.log(newp.offsetWidth);// 인쇄 너비에는 테두리가 포함됩니다. console.log(newp.clientWidth);//그렇지 않습니다. 테두리 또는 스크롤 막대(가시 영역)를 포함합니다. console.log(newp.scrollHeight);//요소의 수직/수평 스크롤 거리이기도 합니다. 또는 오버플로로 인해 롤아웃된 요소의 시각적으로 보이지 않는 부분입니다. 초과된 부분은 기본적으로 표시됩니다. //스크롤 막대의 위치는 상위 항목의 위치를 ​​기준으로 나타납니다. console.log(newp.offsetLeft); 하위 요소는 위로 스크롤됩니다. scrollTop을 제외하고 위 요소는 읽기 전용입니다. console.log(newp.scrollTop)

Timer

일회성 타이머, 한 번만 사용할 수 있습니다.

쓰기 1: var time = setTimeout(function (){ console.log("일회성 타이머") },1000); 작성 방법 2: function f1(){ console.log("일회성 타이머") } setTimeout (f1,1000); 일회성 타이머clearTimeout(time); 루프 타이머, 가끔씩 함수가 실행됩니다

작성 방법 1: var 타이머 = setInterval(funtion(){ console.log("Loop Timer"); }) var 타이머 = setInterval(f2, 1000); DOM은 HTML 문서 구조입니다. 실제로는 JS가 html 요소를 작동할 수 있도록 만들어진 사양입니다. 객체에는 노드 생성, 노드 복사, 노드 제거, 속성 수정 등과 같은 많은 속성과 배치 방법이 있습니다. DOM 객체는 JavaScript가 HTML 태그를 작동할 수 있도록 하는 것으로 나타납니다. DOM은 문서 객체 모델(Document Object Model)입니다. 또한 HTML 문서를 기반으로 문서의 상태를 동적으로(예: 클릭 이벤트) 수정하도록 Javascript에 제공되므로 DOM을 조작하는 것은 HTML 문서 객체(각 태그)를 조작하는 것입니다.

CSS는 단지 HTML 문서의 스타일을 지정하는 것입니다. , javascript는 HTML과 CSS를 결합할 수 있으며 이전에는 DHTML(Dynamic HTML)이라고 불렀습니다.

DOM은 XML(또는 HTML)의 노드를 프로그래밍 언어로 제어되는 기술 사양을 제공할 수 있는 기본적으로 통합된 객체 데이터로 정의하는 것입니다. ​​​(javascript 등)

을 사용할 수 있습니다. Javascript 언어는 웹 페이지를 변경하기 위해 DOM을 사용합니다. 웹 페이지를 변경하려면 어떤 노드를 작동할지 Javascript에 알려주어야 합니다. 이것이 DOM을 조작하는 것입니다.
DOM을 조작하면 웹페이지의 상호작용 방식을 변경할 수 있습니다. 모든 웹페이지 상호작용은 이 DOM 기술에 의존합니다. Javascript를 사용하지 않더라도 다른 언어를 사용하여 DOM을 조작할 수 있습니다. 는 트리이며 값과 잎에는 번호가 매겨져 있습니다. 해당 분기의 어떤 잎과 ​​이 잎에 대해 무엇을 변경해야 하는지를 찾는 함수를 스크립트에 알려줍니다.

Zhihu의 검색창에 데이터를 입력할 때 Javascript 입력을 캡처하고 서버에 대한 비동기 쿼리를 사용하며 검색 결과를 동적으로 표시합니다.

아래로 슬라이드하면 Javascript가 슬라이드 거리를 캡처하고 거리에 따라 DOM을 변경할지 여부를 결정한 다음 뒤를 돌아보지 않도록 상단 탐색 표시줄이 브라우저 창과 함께 스크롤되도록 허용합니다.

클릭하여 수정하는 경우 버튼을 누르면 자바스크립트는 이 버튼의 마우스 클릭 이벤트를 캡처하고 편집 가능한 답변을 사용자에게 피드백합니다.

자바스크립트는 실제로 DOM을 변경할 수 없습니다. 새로고침하면 표시된 콘텐츠가 사라집니다. .

하지만 이러한 변경 사항을 요청 형태로 백엔드 언어 인터페이스에 전달할 수 있으며, 백엔드 언어 ​​​​PHP Python Java Node 등은 요청을 받은 후 후속 작업을 수행합니다. 이 변경 사항은 서버 데이터를 수정하며 새로 고침 후에도 사라지지 않습니다.

그러나 팝업 창 슬라이딩 및 색상 변경 등과 같은 사용자 상호 작용은 서버와 혼합될 필요가 없습니다. 그 이유는 상호 작용이 일시적으로만 사용되며 기본값이 되며 저장할 필요가 없기 때문입니다. 서버와 상호 작용할 때 피드백이 있는지 확인하세요.

HTML은 정적 구조(웹의 기본 요소)를 표현합니다. 페이지, 각 요소의 기본 기능, 요소의 기본 기능이 어떤 의미를 생성할 수 있는지, 이 의미가 어떤 콘텐츠를 생성할 수 있는지)

CSS는 계층적 미화(요소의 기본 및 특수 속성, 모양, 상태)를 렌더링합니다. 요소 및 요소의 레이아웃)

Javascript는 동적 상호 작용(비동기 새로 고침을 위해 AJAX를 사용하여 DOM을 작동하고 서버와 상호 작용)을 담당합니다. 이 링크는 잘못되지 않았습니다. https://www.zhihu.com/question/34219998/ Answer/58211568DOM은 Javascript가 웹 페이지를 작동하는 인터페이스입니다. 정식 이름은 Document Object Model입니다. 그 기능은 웹 페이지를 Javascript 객체로 변환하여 Javascript 스크립트를 사용하여 처리할 수 있도록 하는 것입니다. 및 요소 삭제 등)

브라우저는 문서화된 구조(예: HTML 또는 XML 등)를 DOM 모델을 기반으로 일련의 노드로 구문 분석한 다음 이러한 노드를 트리 구조(Dom Tree)로 구문 분석합니다. 모든 노드와 최종 트리 구조는 표준화된 외부 인터페이스를 가지고 있으므로 DOM은 웹 페이지에 대한 프로그래밍 인터페이스로 이해할 수 있습니다. DOM은 현재 DOM3을 사용하고 있습니다

엄밀히 말하면 DOM은 Javascript에 속하지 않습니다. DOM 조작은 Javascript에서 가장 일반적인 작업이고 Javascript에서 가장 일반적인 작업은 가장 일반적인 DOM 조작 언어입니다.

相关推荐：

js中DOM知识点分享

위 내용은 JS에서 DOM을 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!