세부 정보에서 DOM (Document Object Model) 이해

우리는 모두 들었습니다. DOM, 또는 문서 객체 모델, 자바 스크립트와 관련하여 수시로 언급됩니다. DOM은 웹 개발에서 매우 중요한 개념입니다. 그것 없이는 우리가 할 수 없을 것입니다. HTML 페이지를 동적으로 수정 브라우저에서.

DOM을 배우고 이해하면 더 나은 방법으로 결과를 얻을 수 있습니다. 액세스, 변경 및 모니터링 HTML 페이지의 다른 요소. Document Object Model은 우리를 도울 수 있습니다. 스크립트 실행 시간의 불필요한 증가를 줄입니다..

데이터 구조 트리

DOM이 무엇인지, 존재하는 방법, 존재하는 방법, 내부에서 일어나는 일에 대해 이야기하기 전에, 나는 당신이 나무에 대해 알고 싶습니다. 침엽수 림과 낙엽 제외가 아닌 데이터 구조 트리.

우리가 그 정의를 단순화한다면 데이터 구조의 개념을 이해하는 것이 훨씬 쉽습니다. 나는 데이터 구조가 데이터 정렬. 그렇습니다. 평범한 예배입니다. 집에 가구를 놓거나 서가에있는 책이나, 접시에 담아 먹는 모든 다른 음식 그룹을 준비 할 때 너에게 의미심장하게해라..

물론 모든 것이 데이터 구조에있는 것은 아니지만 모든 것이 시작되는 곳입니다. 이 “배열” 그것의 중심에 있습니다. DOM에서도 매우 중요합니다. 하지만 우리는 DOM에 대해 아직 이야기하지 않고 있습니다. 친숙한 데이터 구조 : 배열.

배열과 나무

배열에는 지수 과 길이, 그들은 할 수있다 다차원의, 더 많은 특성을 가지고 있습니다. 배열에 관한 이러한 것들을 아는 것만큼이나 중요 합니다만, 지금 당장 자신을 괴롭히지 않겠습니다. 우리에게는 배열이 꽤 간단합니다. 그것은 당신이 서로 다른 것을 일렬로 배열하다.

마찬가지로, 나무를 생각할 때, 그것이 물건을 서로 아래에두기, 꼭대기에 단 한가지로 시작하는.

자, 당신은 전에부터 단 하나의 라인 오리를 가져갈 수 있습니다., 그것을 똑바로 세우다, 그걸 말해줘. “지금, 모든 오리는 다른 오리의 아래에있다.”. 그때 그것은 나무입니까? 그것은.

데이터가 무엇인지 또는 사용 방법에 따라 트리의 최상위 데이터 ( 뿌리) 뭔가있을 수 있습니다. 대단히 중요한 그저 거기에있는 그 밑에 다른 요소들을 감싸다..

어느 쪽이든, 트리 데이터 구조의 최상위 요소는 매우 중요한 것을 수행합니다. 장소를 제공합니다. 트리에서 추출하려는 정보를 검색하기 시작합니다..

DOM의 의미

DOM은 다음을 의미합니다. 문서 객체 모델. 문서 HTML (XML) 문서를 가리 킵니다. 그것은 Object로 나타내지는. (JavaScript에서는 모든 것을 객체로만 표현할 수 있습니다!)

모델은 브라우저에서 만든 HTML 문서를 가져 와서 그것을 나타내는 객체를 만듭니다. JavaScript로이 객체에 액세스 할 수 있습니다. 그리고이 객체를 사용하여 HTML 문서를 조작하고 자체 응용 프로그램을 빌드하므로, DOM은 기본적으로 API.

DOM 트리

자바 스크립트 코드에서 HTML 문서는 대상으로 표현 된. 해당 문서에서 읽은 모든 데이터는 또한 객체로 저장, 서로 중첩되어 있습니다 (이전에 말했던 것처럼 JavaScript에서는 모든 것이 객체로만 표현 될 수 있기 때문에).

이것은 기본적으로 코드에서 DOM 데이터의 물리적 인 배열입니다. 사물로. 그러나 논리적으로는, 나무예요..

DOM 파서

모든 브라우저 소프트웨어에는 DOM 파서 그 책임은 HTML 문서를 DOM으로 파싱하기.

브라우저는 HTML 페이지를 읽고 데이터를 DOM을 구성하는 객체로 변환합니다. 이러한 JavaScript DOM 객체에있는 정보는 논리적으로 DOM 트리로 알려진 데이터 구조 트리로 정렬됩니다.

HTML에서 DOM 트리로 데이터 구문 분석하기

간단한 HTML 파일을 가져 가라. 그것은 루트 요소 . 그 하위 요소 아르 과 , 각각은 그들 자신의 많은 자식 요소를 가지고있다..

그래서 본질적으로 브라우저 HTML 문서의 데이터를 읽는다., 이와 비슷한 것 :

과, 그들을 DOM 트리에 배열한다. 이렇게 :

DOM 트리에서 각 HTML 요소 (및 그 속한 콘텐츠)를 표현하는 것을 a 마디. 그만큼 루트 노드 의 노드이다. .

그만큼 DOM 인터페이스 JavaScript에서 문서 (HTML 문서의 표현이기 때문에). 따라서, 우리는 HTML 문서의 DOM 트리에 접근한다. ~을 통해 문서 인터페이스 자바 스크립트에서.

우리는 액세스 할 수있을뿐만 아니라 액세스 할 수도 있습니다. HTML 문서를 조작한다. DOM을 통해. 웹 페이지에 요소를 추가하고 제거 할 수 있습니다. DOM 트리에서 노드를 변경하거나 업데이트 할 때마다 웹 페이지에 반영.

노드 설계 방법

이전에 HTML 문서의 모든 데이터가 자바 스크립트에서 객체로 저장. 따라서 객체로 저장된 데이터를 논리적으로 트리로 정렬하는 방법?

DOM 트리의 노드는 특정 특성 또는 특성을가집니다. 트리의 거의 모든 노드 부모 노드가있다. (바로 위에있는 노드), 자식 노드 (그 아래의 노드) 및 동기 (같은 부모에 속하는 다른 노드). 이걸 가지고있어. 가족 위, 아래 및 주위에서 노드가 나무의 일부.

모든 노드의이 패밀리 정보는 다음과 같습니다. 해당 노드를 나타내는 객체의 속성으로 저장 됨. 예를 들어, 어린이 는 그 노드의 하위 요소 목록을 운반하는 노드의 속성이므로 노드 아래에 자식 요소를 논리적으로 정렬합니다.

DOM 조작을 과도하게 수행하지 마십시오.

웹 페이지를 수정하기 위해 DOM을 유용하게 업데이트하는 것만큼이나 그것을 과용 한.

예를 들어,