돔 객체 모델. 표현형 JavaScript: 문서 개체 모델. HTML에 마크업 오류가 있는 경우

주제가 정말 복잡해요. 그러나 그들이 말했듯이 악마는 그려진 것만큼 끔찍하지 않습니다. 이것이 제가 가장 힘든 일을 하는 곳입니다. 가능한 한 소화하기 쉽지만 완전히 원시적이지는 않은 "페인팅"이라는 슈퍼 작업입니다. 지금까지 내가 읽은 모든 자료는 난해하거나 원시적인 경향이 있었습니다.

DOM이란 무엇입니까?

DOM의 약어는 다음과 같습니다. 문서 개체 모델(문서 개체 모델).

DOM은 HTML, XHTML 및 XML 문서의 콘텐츠, 즉 HTML, XHTML 및 XML 태그와 속성은 물론 CSS 스타일을 프로그래밍 개체로 나타내는 프로그래밍 인터페이스입니다. JavaScript와 기타 웹 프로그래밍 언어 모두 이 모델에서 작동합니다.

약간의 역사

4가지 DOM 레벨(0, 1, 2, 3)이 있습니다.

레벨 0(1996)에는 레벨 1 이전에 존재했던 DOM 모델이 포함되었습니다. 이는 주로 document.images, document.forms, document.layers 및 document.all과 같은 컬렉션입니다. 이러한 모델은 W3C에서 공식적으로 발표한 DOM 사양이 아닙니다. 오히려 표준화 프로세스가 시작되기 전에 존재했던 정보를 나타냅니다.

레벨 1(1997)에는 XML 문서 처리를 위한 기본 기능도 포함되었습니다. 즉, 개별 노드로 작업하고 XML 처리 명령으로 작업하는 다양한 방법이 포함되었습니다.

또한 DOM 레벨 1에는 개별 HTML 요소를 처리할 수 있는 특수 인터페이스가 많이 포함되어 있습니다. 예를 들어 HTML 테이블, 양식, 선택 목록 등을 사용할 수 있습니다.

DOM 레벨 2(2002)에는 몇 가지 새로운 기능이 추가되었습니다.

DOM 레벨 1에는 네임스페이스에 대한 지원이 부족한 반면, DOM 레벨 2 인터페이스에는 XML 문서 작성 및 처리 요구 사항과 관련된 네임스페이스를 관리하기 위한 메서드가 포함되어 있습니다.

또한 DOM 레벨 2는 이벤트를 지원합니다.

레벨 2는 DOM 사양의 현재 레벨이지만 W3C는 레벨 3 사양의 일부 섹션을 권장합니다.

DOM 레벨 3은 DOM 레벨 2의 기능을 확장하는 사양의 작업 초안입니다. 이 사양 버전의 가장 중요한 기능 중 하나는 수많은 DOM 확장을 사용하는 기능입니다.

"소프트웨어 인터페이스"는 무엇을 의미합니까?

영어 단어 인터페이스는 "접촉 영역"으로 번역될 수 있습니다. 대략적으로 말하면 컴퓨터는 빈 비트와 채워진 비트라는 두 가지만 이해합니다. 컴퓨터가 "말하는" 언어는 0과 1의 끝없는 문자열로 생각할 수 있으며, 이는 무한한 수의 다양한 조합을 제공합니다.

모든 프로그램 코드는 컴퓨터가 작동하는 이러한 "0과 1"을 프로그래머가 이해할 수 있는 해석입니다. 따라서 모든 프로그래밍 언어는 인간-기계 인터페이스입니다.

브라우저는 다른 컴퓨터 응용 프로그램처럼 작동합니다. HTML, XML, CSS 코드, JavaScript, PHP, Perl 등을 "0과 1"로 해석합니다. 이러한 다국어 사용을 처리하려면 공통 플랫폼이 필요합니다. 이 플랫폼은 특정 프로그래밍 언어나 마크업에 의존하지 않는 사양인 DOM입니다. 웹 페이지 생성과 관련된 많은 인기 프로그래밍 언어에서 사용할 수 있고 DOM 객체를 이해하고 해석할 수 있는 인터페이스입니다.

DOM과 브라우저

DOM과 자바스크립트

JavaScript에서 이 인터페이스에 대한 일종의 "지휘자"인 DOM 객체의 계층적 사다리의 최상위는 문서 객체이고 DOM 객체는 문서 객체의 속성, 속성의 속성 등이 됩니다. DOM 노드라고도 합니다.

DOM 노드

DOM 레벨 2에는 12가지 유형의 노드가 있습니다. 각 DOM 노드 유형에는 고유한 이름을 가진 상수가 할당됩니다. 대부분의 노드는 XML과 함께 작동하도록 설계되었습니다. 우리가 하고 있는 HTML - JavaScript 어셈블리에서는 5가지 유형만 사용할 수 있습니다. 하지만 이 '빙산의 일각'도 한두 레슨으로는 다 다룰 수 없는 그야말로 '퍼지는 나무'다.

W3C DOM 사양에 정의된 전체 노드 유형 상수 세트(HTML - JavaScript에 사용 가능한 노드는 파란색으로 강조 표시됨):

상수 이름	의미	설명
노드.ELEMENT_NODE		요소 노드(문서의 루트 요소를 반환합니다. HTML 문서의 경우 이는 HTML 요소입니다.)
노드.ATTRIBUTE_NODE		속성 노드(XML 또는 HTML 문서 요소의 속성을 반환)
		텍스트 노드(#text)
노드.CDATA_SECTION_NODE		CDATA 섹션 노드(XML: 문자 데이터를 표시하기 위한 대체 구문)
노드.ENTITY_REFERENCE_NODE
노드.ENTITY_NODE		파티션 노드
Node.PROCESSING_INSTRUCTION_NODE		XML 지시어 노드
노드.COMMENT_NODE		코멘트 노드
노드.DOCUMENT_NODE		문서 노드(문서 콘텐츠에 액세스하고 해당 구성 요소를 생성하기 위한 기반)
노드.DOCUMENT_TYPE_NODE		문서 유형 노드(이 문서의 유형, 즉 DOCTYPE 태그 값을 반환)
노드.DOCUMENT_FRAGMENT_NODE		문서 조각 노드(문서 트리의 일부 추출, 새 문서 조각 생성, 조각을 노드의 하위로 삽입 등)
노드.NOTATION_NODE		표기법 노드*

* 표기법은 구문 분석되지 않은 섹션의 형식, 표기법 속성이 있는 요소의 형식 또는 지시문이 적용되는 응용 프로그램을 식별하는 이름입니다. (불분명한가? 나도 아직은 잘 모르겠다.)

DOM의 문서 구조

모든 문서 개체는 DOM 노드입니다. 기본 문서를 살펴보겠습니다.

< title>DOM 헤더

단락 텍스트

다음은 DOM 트리의 다이어그램입니다.

각 노드는 하위 노드를 가질 수 있습니다(다이어그램에서 화살표는 하위 노드로 연결됨). 문서 트리의 기본인 문서 개체도 노드이지만 상위 노드가 없으며 다른 노드에 없는 여러 속성과 메서드를 갖습니다. 여기에는 하나의 하위 노드(element)가 있습니다.

요소에는 두 개의 하위 노드( 및 )가 있으며, 해당 노드에 포함된 모든 요소는 하위 노드가 됩니다.

주목!

"요소"와 "태그"는 동의어가 아닙니다. 태그는 마크업 표시입니다. - 두 개의 서로 다른 태그입니다. 요소는 다음 태그로 표시된 객체입니다.

단락 텍스트

.

요소 및

내부에 텍스트가 포함되어 있습니다. 이는 하위 텍스트 노드입니다. 요소에는 align="center" 속성도 있습니다. 특성 노드는 이를 포함하는 요소의 하위 노드이기도 합니다.

DOM 트리 노드로 작업할 때 해당 속성과 메서드가 사용됩니다.

노드의 일부 속성

작은 소개

다시 한 번 반복합니다. 스크립트의 페이지 요소에 액세스할 때 우리는 Javascript 언어뿐만 아니라 여기에 포함된 DOM 인터페이스도 처리합니다. 때때로 당신은 이것을 알아야 할 필요가 있고 때로는 "우리가 산문으로 이야기하고 있다는 것"을 잊어버릴 수도 있습니다.

우리는 이미 이런 방식으로 DOM 개체 모델의 일부 속성과 메서드를 사용했습니다. 따라서 수시로 이전 강의에 대한 링크를 제공하겠습니다.

이 강의에서는 모든 브라우저에 있는 모든 노드의 모든 속성을 고려하여 "학술적" 경로를 따르지 않을 것입니다. 먼저, 가장 실용적이고 "충돌이 없는" 항목에 대해 알아봅시다.

이것이 바로 관례대로 "주요 속성"인 nodeName 및 nodeValue로 시작하지 않는 이유입니다.

태그이름

요소의 태그 이름이 포함된 문자열을 반환합니다. 모든 tagName 값에는 대문자만 포함됩니다.

통사론

요소.태그이름

예

tagName 속성 테스트

document.write(document.getElementById( "테스트태그이름").태그이름)

결과

tagName 속성 테스트

내부 HTML

우리는 이미 이 속성을 접했습니다(제 10과 참조). 이제 우리는 그것이 어디에서 왔는지 이해합니다: "집에서".

요소의 콘텐츠에 대한 액세스를 제공합니다. 텍스트 내용뿐만 아니라 요소 내부에 있는 모든 HTML 태그도 지정합니다.

이 속성은 읽기용뿐만 아니라 내용 변경용으로도 사용됩니다.

메모

IE에서 innerHTML은 여러 요소에 대해 읽기 전용입니다. 이러한 요소는 다음을 제외한 모든 테이블 요소입니다. 및 , 뿐만 아니라 및 .

예를 들어 요소가 없는 빈 테이블을 만들었습니다. 프로그래밍 방식으로 이를 innerHTML을 통해 :

IE에서는 "알 수 없는 런타임 오류"가 발생하고 다른 브라우저에서 붙여넣기를 수행합니다.

동시에 요소의 기존 콘텐츠를 쿼리하면 예를 들어, Alert(document.getElementById("id").innerHTML) 을 통해 IE에서 작동합니다.

통사론

요소.innerHTML = "할당된 텍스트"

예

innerHTML 속성 테스트 삽입할 단락 // 이 함수는 텍스트를 읽고 주어진 단락에 삽입합니다. 함수 테스트읽기()( document.getElementById( "표적").innerHTML = document.getElementById( "테스트InnerHTML").innerHTML } // 이 함수는 주어진 단락의 텍스트를 변경합니다. 함수 테스트Change() ( document.getElementById( "표적").innerHTML = "텍스트 색상 변경 및 변경" } // 이 함수는 속성을 원래 위치로 되돌립니다. 함수 테스트리셋()( document.getElementById( "표적").innerHTML = "삽입할 단락" }

innerHTML 속성 테스트

삽입할 단락

문서 개체 모델("DOM")은 웹 페이지 요소에 액세스하기 위한 프로그래밍 인터페이스입니다. 기본적으로 이는 페이지의 콘텐츠, 구조 및 스타일을 읽고 조작할 수 있는 페이지 API입니다. 그것이 어떻게 작동하고 어떻게 작동하는지 알아 봅시다.

웹페이지는 어떻게 구축되나요?

원본 HTML 문서를 렌더링 가능하고 스타일이 지정된 대화형 페이지로 변환하는 프로세스를 "중요 렌더링 경로"라고 합니다. 렌더링 중요 경로 이해에서 설명했듯이 이 프로세스는 여러 단계로 나눌 수 있지만 이러한 단계는 대략 두 단계로 그룹화할 수 있습니다. 첫 번째 단계에서는 브라우저가 문서를 구문 분석하여 최종적으로 페이지에 표시할 내용을 결정하고, 두 번째 단계에서는 브라우저가 렌더링을 수행합니다.

첫 번째 단계의 결과는 "렌더 트리"입니다. 렌더링 트리는 페이지에 렌더링될 HTML 요소와 관련 스타일을 나타냅니다. 이 트리를 구축하려면 브라우저에 두 가지가 필요합니다.

요소와 관련된 스타일을 나타내는 CSSOM

DOM, 요소 표현

DOM은 무엇으로 구성되어 있나요?

DOM은 원본 HTML 문서의 객체 표현입니다. 아래에서 볼 수 있듯이 몇 가지 차이점이 있지만 본질적으로 HTML 문서의 구조와 내용을 다양한 프로그램에서 사용할 수 있는 개체 모델로 변환하려는 시도입니다.

DOM 객체의 구조는 "노드 트리"로 표현됩니다. 이는 하나의 부모가 있는 나무가 여러 개의 자식 가지로 갈라지고 각각 잎이 있을 수 있는 나무로 생각할 수 있기 때문에 그렇게 불립니다. 이 경우 부모 "요소"는 루트 요소이고, 자식 "분기"는 중첩된 요소이며, "리프"는 요소 내의 콘텐츠입니다.

이 HTML 문서를 예로 들어보겠습니다.

내 첫 번째 웹 페이지 Hello, world!

어떻게 지내세요?

이 문서는 다음과 같은 노드 트리로 표현될 수 있습니다.

• HTML
  • 머리
    • 제목
      • 나의 첫 번째 웹페이지
  • 몸
    • h1
      • 안녕, 세상!
    • 피
      • 어떻게 지내세요?

DOM이 아닌 것

위의 예에서 DOM은 원본 HTML 문서의 1:1 매핑인 것으로 보입니다. 그러나 앞서 말했듯이 차이점이 있습니다. DOM이 무엇인지 완전히 이해하려면 DOM이 아닌 것이 무엇인지 살펴봐야 합니다.

DOM은 원본 HTML의 복사본이 아닙니다.

DOM은 HTML 문서에서 생성되지만 항상 동일하지는 않습니다. DOM이 소스 HTML과 다를 수 있는 두 가지 경우가 있습니다.

1. HTML에 마크업 오류가 있는 경우

DOM은 HTML 문서의 실제(즉, 이미 렌더링된) 요소에 액세스하기 위한 인터페이스입니다. DOM 생성 과정에서 브라우저 자체는 HTML 코드의 일부 오류를 수정할 수 있습니다.

다음 HTML 문서를 예로 들어보겠습니다.

안녕, 세계!

문서에 HTML의 요구 사항인 및 요소가 없습니다. 그러나 결과 DOM 트리를 보면 이 문제가 수정되었음을 알 수 있습니다.

• HTML
  • 머리
  • 몸
    • 안녕, 세상!
  2. Javascript 코드로 DOM을 수정하는 경우

  HTML 문서의 내용을 보기 위한 인터페이스일 뿐만 아니라 DOM 자체도 수정할 수 있습니다.

  예를 들어 Javascript를 사용하여 DOM에 대한 추가 노드를 만들 수 있습니다.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("나는 새로운 사람이에요!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  이 코드는 DOM을 변경하지만 변경 사항은 HTML 문서에 표시되지 않습니다.

  DOM은 브라우저에 표시되는 것과 다릅니다(즉, 렌더링 트리).

  브라우저 뷰포트에는 제가 말했듯이 DOM과 CSSOM의 조합인 렌더링 트리가 표시됩니다. DOM과 렌더 트리의 차이점은 후자는 결국 화면에 렌더링될 항목으로만 구성된다는 것입니다.

  렌더 트리는 렌더링된 항목에만 관련되므로 시각적으로 숨겨진 요소는 제외됩니다. 예를 들어, display: none 스타일이 있는 요소입니다.

  안녕, 세계!

  어떻게 지내세요?

  DOM에는 요소가 포함됩니다.

  • HTML
    • 머리
    • 몸
      • h1
        • 안녕, 세상!
      • 피
        • 어떻게 지내세요?

  그러나 렌더 트리와 뷰포트에 표시되는 내용은 이 요소에 포함되지 않습니다.

  • HTML
    • 몸
      • h1
        • 안녕, 세상!
  DOM은 DevTools에 표시되는 것이 아닙니다.

  DevTools Element Inspector가 브라우저에 있는 DOM에 가장 가까운 근사치를 제공하기 때문에 이 차이는 약간 더 작습니다. 그러나 DevTools 검사기에는 DOM에 없는 추가 정보가 포함되어 있습니다.

  이에 대한 가장 좋은 예는 CSS 의사 요소입니다. ::before 및 ::after 선택기를 사용하여 생성된 의사 요소는 CSSOM 및 렌더링 트리의 일부이지만 기술적으로 DOM의 일부는 아닙니다. 이는 DOM이 요소에 적용된 스타일을 포함하지 않고 원본 HTML 문서에서만 생성되기 때문입니다.

  의사 요소는 DOM의 일부가 아니지만 devtools 요소 검사기에 있습니다.

  
  요약

  DOM은 HTML 문서에 대한 인터페이스입니다. 이는 뷰포트에서 무엇을 렌더링할지 결정하는 첫 번째 단계로 브라우저에서 사용되며, 페이지의 콘텐츠, 구조 또는 스타일을 변경하기 위해 Javascript 코드에서 사용됩니다.

DOM은 노드라고 불리는 개체 트리로 구성되어 있기 때문에 종종 DOM 트리라고 불립니다. DOM(문서 개체 모델)이 무엇인지, 콘솔을 사용하여 문서 개체에 액세스하고 해당 속성을 변경하는 방법, HTML 소스 코드와 DOM의 차이점을 배웠습니다.

이 튜토리얼에서는 JavaScript 및 DOM으로 작업하는 데 필요한 HTML 용어를 배우고, DOM 트리와 노드가 무엇인지 배우고, 가장 일반적인 유형의 노드를 식별하는 방법을 배웁니다. 콘솔에서 JavaScript 프로그램을 생성하여 DOM을 대화형으로 수정할 수도 있습니다.

HTML 용어

DOM 작업에는 HTML 및 JavaScript 용어를 이해하는 것이 중요합니다. 기본적인 용어를 간단히 살펴보겠습니다.

다음 HTML 요소를 살펴보세요.

집

여기에는 index.html에 대한 링크인 앵커가 포함되어 있습니다.

• a – 태그
• href – 속성
• html – 속성 값
• 집 – 문자.

여는 태그와 닫는 태그 사이의 모든 내용은 HTML 요소를 구성합니다.

이전 매뉴얼의 index.html 파일로 돌아가 보겠습니다.

DOM 학습


문서 개체 모델

JavaScript로 요소에 액세스하는 가장 쉬운 방법은 id 속성입니다. id="nav"를 사용하여 index.html 파일에 위 링크를 추가해 보겠습니다.

...

문서 개체 모델
집

...

브라우저 창에서 페이지를 로드(또는 새로 고침)하고 DOM을 확인하여 코드가 업데이트되었는지 확인하세요.

그런 다음 getElementById() 메서드를 사용하여 전체 요소에 액세스합니다. 콘솔에서 다음을 입력합니다.

document.getElementById("nav");
집

getElementById() 메소드는 전체 요소를 검색합니다. 이제 탐색 링크에 액세스해야 할 때마다 이 개체와 메서드를 입력할 필요 없이 요소를 변수에 넣어 작업하기 쉽게 만들 수 있습니다.

let navLink = document.getElementById("nav");

navLink 변수에는 앵커가 포함되어 있습니다. 여기에서 속성과 값을 쉽게 변경할 수 있습니다. 예를 들어 링크 위치를 변경하려면 href 속성을 변경합니다.

navLink.href = "https://www.wikipedia.org";

textContent 속성을 다시 할당하여 텍스트를 변경할 수도 있습니다.

navLink.textContent = "위키피디아로 이동";

이제 콘솔에서 이 요소를 보거나 Elements 태그를 확인하면 어떻게 업데이트되었는지 확인할 수 있습니다.

네비게이션링크;
위키피디아로 이동

변경 사항은 프런트 엔드에도 반영됩니다.

페이지를 새로 고치면 원래 값이 모두 반환됩니다.

이 시점에서는 문서 메소드를 사용하여 요소에 접근하는 방법, 요소를 변수에 할당하는 방법, 요소의 속성과 값을 변경하는 방법을 이해해야 합니다.

트리 및 DOM 노드

DOM의 모든 요소는 노드로 정의됩니다. 노드에는 여러 유형이 있지만 가장 자주 사용하게 될 세 가지 주요 노드는 다음과 같습니다.

요소 노드

텍스트 노드

코멘트 노드

HTML 요소가 DOM의 요소인 경우 이를 요소 노드라고 합니다. 요소 외부의 단일 텍스트는 텍스트 노드이고 HTML 주석은 주석 노드입니다. 이 세 가지 유형의 노드 외에도 문서 개체 자체는 다른 모든 노드의 루트 노드인 문서 노드입니다.

DOM은 종종 DOM 트리라고 불리는 중첩된 노드의 트리 구조로 구성됩니다. 아마도 가계도가 무엇인지 알고 계실 것입니다. 이는 부모, 자녀 및 직계 친척으로 구성된 가족 관계를 도식적으로 표현한 것입니다. DOM의 노드는 다른 노드와의 관계에 따라 상위 및 하위 노드라고도 합니다.

예를 들어 node.html 파일을 만듭니다. 여기에 텍스트 노드와 주석 및 요소 노드를 추가합니다.

노드에 대해 배우기


요소 노드

텍스트 노드.

html 요소 노드는 상위 요소입니다. 머리와 몸은 자식 HTML 노드입니다. body에는 세 개의 하위 노드가 포함되어 있으며 모두 동일한 수준에 있습니다. 노드 유형은 중첩 수준에 영향을 미치지 않습니다.

참고: HTML 생성 DOM으로 작업할 때 HTML 소스 코드 들여쓰기는 DevTools Elements 탭에 표시되지 않는 빈 텍스트 노드를 많이 생성합니다. 이에 대한 자세한 내용은 링크를 참조하세요.

노드 유형 정의

문서의 각 노드에는 nodeType 속성을 통해 액세스되는 유형이 있습니다. Mozilla 개발자 네트워크에는 모든 노드 유형 상수의 업데이트된 목록이 있습니다. 다음은 가장 일반적인 노드 유형에 대한 표입니다.

개발자 도구의 요소 탭에서 DOM의 한 줄을 클릭하고 강조 표시할 때마다 그 옆에 == $0 값이 나타나는 것을 볼 수 있습니다. 이는 현재 활성화된 요소에 액세스하는 매우 편리한 방법입니다.

node.html 콘솔에서 본문의 첫 번째 요소(h1)를 클릭합니다.

콘솔에서 nodeType 속성을 사용하여 선택한 노드의 유형을 알아보세요.

$0.노드 유형;
1

h1 요소를 선택하면 ELEMENT_NODE를 참조하는 출력으로 1이 표시됩니다. 다른 노드에서도 동일한 작업을 수행하면 각각 3과 8이 반환됩니다.

요소에 액세스하는 방법을 알면 DOM의 요소를 강조 표시하지 않고도 노드 유형을 볼 수 있습니다.

document.body.nodeType;
1

nodeType 외에도 nodeValue 속성을 사용하여 텍스트 또는 주석 노드의 값을 가져오고 nodeName을 사용하여 요소의 태그를 가져올 수도 있습니다.

이벤트를 사용하여 DOM 변경

지금까지 콘솔에서 DOM을 변경하는 방법을 살펴보았으며 이러한 변경은 일시적인 것으로 알려져 있습니다. 페이지를 새로 고칠 때마다 모든 변경 사항이 손실됩니다. 콘솔에서 페이지의 배경색을 업데이트했습니다. 이 튜토리얼에서 배운 내용과 이미 알고 있는 내용을 결합하여 배경색을 변경하는 대화형 버튼을 만들어 보세요.

index.html 파일로 돌아가서 ID가 있는 버튼 요소를 추가하세요. 또한 새 js 디렉터리 js/scripts.js에 새 파일에 대한 링크를 추가해야 합니다.

DOM 학습


문서 개체 모델
배경색 변경

JavaScript의 이벤트는 사용자가 수행하는 작업입니다. 사용자가 요소 위로 마우스를 가져가거나 요소를 클릭하거나 키보드의 특정 키를 누르는 것은 모두 이벤트입니다. 이 특별한 경우에는 사용자가 버튼을 클릭할 때 버튼이 작업을 수행해야 합니다. 이렇게 하려면 이벤트 리스너를 추가해야 합니다. scripts.js 파일을 생성하고 새 js 디렉터리에 저장합니다. 파일에서 버튼 요소를 정의하고 이를 변수에 할당해야 합니다.

addEventListener() 메서드를 사용하면 버튼이 클릭을 수신하고 클릭 후 해당 기능을 수행합니다.

...
버튼.addEventListener("클릭", () => (
// 여기에 액션이 들어갈 것입니다
});

함수 내부에 배경색을 자홍색으로 변경하려면 이전 매뉴얼의 코드를 배치해야 합니다.

...

스크립트는 다음과 같습니다.

let 버튼 = document.getElementById("changeBackground");
버튼.addEventListener("클릭", () => (
document.body.style.BackgroundColor = "자홍색";
});

파일을 저장하고 닫습니다. 브라우저에서 index.html 페이지를 새로 고칩니다. 새 버튼을 클릭하면 페이지의 배경색이 변경됩니다.

태그: ,

내부 HTML
var 텍스트 = element.innerHTML;
element.innerHTML = "";
새 innerHTML을 할당하면 새 값이 현재 값(+=)에 추가되더라도 코드를 덮어씁니다. 이런 방식으로 추가된 스크립트는 실행되지 않습니다.

외부HTML
전체 요소를 포함하며 변경할 수 없습니다. 기술적으로 이 속성에 쓰면 이전 요소를 대체하는 새 요소가 생성됩니다. 변수의 이전 요소에 대한 참조는 변경되지 않습니다.

데이터
textNode.data - 텍스트 노드 및 주석의 내용

텍스트콘텐츠
element.textContent - 태그가 없는 요소 내부의 텍스트입니다.
textContent와 공통점이 많은 innerText라는 비표준 속성도 있습니다.

요소 가시성

숨겨진
element.hidden = true
IE11에서는 숨겨진 속성이 지원되지 않습니다.

속성

DOM의 대부분의 표준 속성은 객체 속성이 됩니다.
element.id = "ID"
비표준 속성의 경우 속성이 생성되지 않습니다(정의되지 않음).

자신만의 DOM 속성을 만들 수 있습니다.
element.myData = (이름:"John", 성:"Smith");
및 방법:
element.myFunc = function())(alert this.nodeName);
이는 DOM 노드가 일반 JavaScript 개체이기 때문에 작동합니다. 이러한 비표준 속성 및 메서드는 태그 표시에 영향을 주지 않으며 JavaScript에서만 표시됩니다.

태그 속성에 액세스:
element.hasAttribute(이름)
element.getAttribute(이름)
element.setAttribute(이름, 값)
element.removeAttribute(이름)
element.attributes는 속성의 의사 배열입니다.

속성은 대소문자를 구분하지만(html) 속성은 대소문자를 구분합니다(javaScript).
속성 값은 항상 문자열입니다.

속성: a.getAttribute("href") - HTML에 있는 내용을 정확하게 표시합니다.
속성: a.href - 속성 값과 다를 수 있음
대부분의 경우 속성은 속성에 따라 달라지지만 그 반대는 아닙니다. 속성을 변경해도 속성에는 영향이 없습니다.

수업 작업

클래스 특성은 두 가지 속성에 해당합니다.
클래스명 - 문자열
classList — 객체

classList 객체 메소드:
element.classList.contains("class") - 객체에 지정된 클래스가 포함되어 있는지 확인합니다.
element.classList.add("클래스")
element.classList.remove("클래스")
element.classList.toggle("클래스")

classList는 의사 배열이며 for 루프를 통해 반복될 수 있습니다.

데이터 속성

사용자 정의 데이터 속성은 속성뿐만 아니라 데이터 세트 속성을 통해서도 사용할 수 있습니다.
data-about = "일부 값"
요소.데이터세트.정보

노드 순서

parent.contains(child) — 참 또는 거짓
하위 노드가 상위 노드 내에 중첩되어 있는지 확인합니다.

nodeA.compareDocumentPosition(nodeB) - 요소의 콘텐츠 및 상대적 순서에 대한 정보를 제공합니다. 반환 값은 비트마스크입니다.

노드 추가 및 제거

var div = document.createElement("div")
document.createTextNode("텍스트")

parent.appendChild(element) - 요소는 부모의 끝에 추가됩니다.
parent.insertBefore(element, nextSibling) - 요소가 nextSibling 앞에 추가됩니다.
parent.insertBefore(element, parent.firstChild) - 시작 부분에 추가됨
parent.insertBefore(element, null) -appendChild처럼 작동합니다.
모든 삽입 메소드는 삽입된 노드를 반환합니다.
요소를 이동할 때 먼저 이전 위치에서 요소를 제거할 필요는 없습니다. 삽입 방법이 이 작업을 자동으로 수행합니다.

element.insertAdjacentHTML(where, html) - 문서의 어느 위치에나 임의의 HTML 코드를 삽입합니다. Where는 요소( beforeBegin, afterBegin, beforeEnd, afterEnd)와 관련하여 HTML을 삽입해야 하는 위치를 지정합니다.
element.insertAdjacentElement(where, newElement)
element.insertAdjacentText(where, 텍스트)
마지막 두 가지 방법은 Firefox에서 지원되지 않습니다

node.append(...nodes) – node 끝에 노드를 삽입합니다.
node.prepend(...nodes) – node 시작 부분에 노드를 삽입합니다.
node.after(...nodes) – node node 뒤에 노드를 삽입합니다.
node.before(...nodes) – 노드 노드 앞에 노드를 삽입합니다.
node.replaceWith(...nodes) – node 대신 노드를 삽입합니다.
여기서 노드는 수량과 조합에 관계없이 쉼표로 구분되어 나열되는 노드 또는 문자열입니다.

varfragment = document.createDocumentFragment() - 문서에 삽입되면 해당 하위 요소만 남기고 사라지는 DOM 노드를 시뮬레이션합니다. 최신 브라우저에서는 권장되지 않습니다.

element.cloneNode(true) - 요소의 전체 복사본
element.cloneNode(false) - 하위 요소 없이 복사

parent.removeChild(요소)
parent.replaceChild(새 요소, 요소)
element.remove() - 부모를 참조하지 않고 요소를 직접 제거합니다.
메소드는 원격 노드를 반환합니다.

이 튜토리얼에서는 JavaScript에서 이벤트, 속성 및 getElementById 작업에 대한 기본 사항을 살펴보겠습니다.

이전 강의에서는 JavaScript 언어의 기본 기능을 연구했습니다. 이 강의부터 우리는 JavaScript가 실제로 설계된 작업을 수행할 것입니다. 즉, HTML 페이지 요소를 수정하고 사용자 작업에 응답하게 됩니다. 우리의 스크립트는 더욱 훌륭하고 유용해질 것입니다.

사이트 사용자 작업에 응답하도록 코드를 가르치는 것부터 시작하겠습니다. 예를 들어, 사용자가 마우스로 아무 곳이나 클릭하면 응답 코드는 이 클릭을 처리하고 화면에 일부 정보를 표시해야 합니다.

JavaScript를 통해 추적할 수 있는 사용자 작업을 이벤트라고 합니다. 이벤트는 다음과 같습니다. 울다페이지 요소에 마우스를 얹고, 안내마우스를 페이지 요소로 이동하거나 그 반대로 이동 - 케어요소의 마우스 커서 등. 또한 HTML 페이지가 브라우저에 로드될 때의 이벤트와 같이 사용자 작업에 의존하지 않는 이벤트도 있습니다.

JavaScript에서 이벤트를 사용하는 방법에는 여러 가지가 있습니다. 가장 간단한 것부터 시작하겠습니다.

이벤트 기본 사항

특정 이벤트에 대한 요소의 응답을 설정하는 가장 쉬운 방법은 특정 태그에 대한 속성을 사용하여 이를 지정하는 것입니다. 예를 들어, 이벤트 "마우스 클릭" onclick 속성, 이벤트에 해당합니다. "마우스 오버"- onmouseover 속성 및 이벤트 "커서 나뭇잎 요소"- onmouseout 속성.

이벤트가 포함된 속성 값은 JavaScript 코드입니다. 다음 예에서는 마우스로 버튼을 클릭하여경고 기능이 실행됩니다:

그리고 지금 클릭으로 func 함수는 요소에서 실행됩니다.

함수 func() ( 경고("!"); )

하나의 기능뿐만 아니라 여러 가지 기능을 수행할 수 있습니다.

function func1() (alert("1"); ) function func2() (alert("2"); )

속성 내부에 큰따옴표가 필요한 경우(예: 문자열) 속성의 바깥쪽 따옴표도 큰따옴표입니다. onclick="경고("!")"- 이 코드는 작동하지 않습니다.

이 문제를 해결하는 방법에는 여러 가지가 있습니다. 외부 따옴표를 작은 따옴표로 변경할 수 있습니다. onclick="경고("!")", 백슬래시를 사용하여 내부 따옴표를 이스케이프할 수도 있습니다. onclick="경고(\"!\)"또는 간단히 JavaScript 코드를 속성에서 함수로 이동하고 속성에 함수 이름만 남겨두세요. onclick="func()".

속성의 바깥쪽 따옴표를 작은 따옴표로 묶고 문자열에 작은 따옴표를 사용하는 경우에도 동일한 일이 발생합니다. onclick="경고("!")"-여기에서도 모든 것이 비슷한 방식으로 해결됩니다.

이벤트의 속성 테이블 getElementById 작업

이제 HTML 페이지 요소를 수신하고 이를 통해 다양한 조작을 수행하는 방법을 배웁니다(예를 들어 텍스트, 색상 및 기타 유용한 사항을 변경할 수 있음).

페이지에 id 속성이 test 로 설정된 태그가 있다고 가정해 보겠습니다. 이 태그에 대한 링크를 elem 변수에 작성해 보겠습니다. 이렇게 하려면 ID로 요소를 가져오는 getElementById 메서드를 사용해야 합니다.

이 항목은 onclick 속성을 할당한 버튼을 클릭할 때 발생합니다. 이 버튼을 클릭하면 func 함수가 작동하여 HTML 페이지에서 test 및 write와 동일한 ID를 가진 요소를 찾습니다. 그것에 대한 링크 elem 변수에:

이제 elem 변수에는 테스트 값에 id 속성이 있는 요소에 대한 링크가 있습니다. 변수 elem 자체는 다음과 같습니다. 물체.

이 객체와 HTML 페이지 태그는 서로 연결되어 있습니다. elem 객체의 속성을 변경할 수 있으며 동시에 수신한 요소에 발생하는 변경 사항을 HTML 페이지에서 볼 수 있습니다.

이것이 실제로 어떻게 일어나는지 봅시다.

JavaScript를 통한 HTML 속성 작업의 기본 사항

이제 태그 속성을 읽고 변경하겠습니다. test와 동일한 ID를 가진 입력과 버튼을 클릭하면 func 함수가 시작됩니다.

func 함수 내에서 입력을 받습니다. 그의 아이디로 elem 변수에 이에 대한 링크를 작성합니다.

function func() ( var elem = document.getElementById("test"); )

이제 입력 속성의 내용을 표시해 보겠습니다. 예를 들어 value 속성에 액세스하려면 다음을 작성해야 합니다. elem.value . 여기서 elem은 getElementById를 사용하여 요소에 대한 링크를 작성한 변수이고 value는 관심 있는 태그의 속성입니다.

이런 방식으로 경고를 통해 속성의 내용을 표시하거나(alert(elem.value)) 이를 일부 변수에 쓸 수 있습니다. 이렇게 해보자:

function func() ( var elem = document.getElementById("test"); Alert(elem.value); //"!"를 표시합니다)

예를 들어 elem.id - id 속성 값을 읽고 elem.type - type 속성 값을 읽는 것과 같은 방법으로 다른 속성 값도 읽을 수 있습니다. 예를 참조하세요:

function func() ( var elem = document.getElementById("test"); Alert(elem.value); //"!"를 표시합니다. Alert(elem.id); //"test"를 표시합니다. ); //"텍스트"를 표시합니다 )

속성 값을 읽을 수 있을 뿐만 아니라 변경할 수도 있습니다. 예를 들어 value 속성의 값을 변경하려면 해당 값을 elem.value 구성에 할당하기만 하면 됩니다.

function func() ( var elem = document.getElementById("test"); elem.value = "www"; //присвоим новое значение атрибуту value } !}

HTML 코드는 다음과 같습니다(value 속성은 www가 됩니다).

이제 가장 어려운 점은 elem 변수를 입력할 수 없지만 다음과 같은 방식으로 포인트 체인을 구축하는 것입니다.

function func() ( Alert(document.getElementById("test").value); //"!"를 표시합니다)

같은 방법으로(체인) 속성을 다시 작성할 수 있습니다.

function func() ( document.getElementById("test").value = "www"; }!}

그러나 대부분의 경우 변수를 도입하는 것이 더 편리합니다. 두 가지 예를 비교해 보세요. 이제 elem 변수를 도입했으며 getElementById가 호출되는 동안 원하는 만큼의 속성을 읽을 수 있습니다. 한번 만:

function func() ( var elem = document.getElementById("test"); elem.value = "www"; elem.type = "submit"; }!}

이제 새 변수를 도입하지 않으므로 getElementById를 두 번 호출해야 합니다.

function func() ( document.getElementById("test").value = "www"; document.getElementById("test").type = "submit"; }!}

제 생각에는 이 코드는 한 줄만 덜 사용하더라도 더 복잡해졌습니다. 게다가 id 값을 test에서 www 등으로 변경하려면 여러 곳에서 해야 하므로 그다지 편리하지 않습니다.

브라우저에. getElementById 메소드가 수행하는 페이지에서 요소를 찾는 작업은 다소 느린 작업입니다( 일반적으로 페이지 요소를 사용한 작업은 느린 작업입니다.- 이것을 기억).

우리의 경우 getElementById를 매번 사용하면 브라우저는 매번 HTML 페이지를 처리하고 주어진 ID를 가진 요소를 여러 번 찾습니다(ID가 동일한지는 중요하지 않습니다. 브라우저가 모든 작업을 수행합니다) 작업을 여러 번 수행하여 브라우저 작동 속도를 저하시킬 수 있는 쓸모없는 작업을 수행합니다.

elem 변수를 사용하면 페이지에서 검색이 발생하지 않습니다(요소가 이미 발견되었으며 해당 요소에 대한 링크가 elem 변수에 있음).

예외: 클래스 및 속성용

여러분은 이미 JavaScript를 통해 속성으로 작업하는 방법을 배웠으며 이제 모든 것이 그렇게 간단하지는 않다는 것을 알려줄 시간입니다. 속성으로 작업할 때 예외가 있습니다. 이것이 클래스 속성입니다.

이 단어는 JavaScript에서 특별하므로 간단히 쓸 수는 없습니다. 요소.클래스클래스 속성의 값을 읽습니다. 대신에 당신은 작성해야합니다 요소.클래스이름.

다음 예에서는 클래스 특성의 값을 표시합니다.

function func() ( var elem = document.getElementById("test"); Alert(elem.className); )

그런데 속성과 다르게 호출되는 다른 속성도 있습니다. 예를 들어 for() 속성에는 htmlFor라는 속성이 있습니다.

이것으로 작업

이제 현재 요소(이벤트가 발생한 요소)를 가리키는 특별한 this 개체를 사용하여 작업하겠습니다. 또한 이는 이 요소가 이미 getElementById 메소드에 의해 획득된 것처럼 나타냅니다.

이 작업을 수행하는 방법과 이 접근 방식의 편의성은 무엇인지 살펴보겠습니다.

입력을 클릭하여 해당 값의 내용을 표시하는 작업을 수행해 보겠습니다.

지금은 다음 결정만 내릴 수 있습니다.

function func() ( var elem = document.getElementById("test"); Alert(elem.value); )

원칙적으로 이 솔루션은 좋지만 이제 많은 입력이 있고 각 입력을 클릭할 때 해당 값을 표시해야 한다고 상상해 보세요.

이 경우 다음과 같이 끝납니다.

function func1() ( var elem = document.getElementById("test1"); Alert(elem.value); ) function func2() ( var elem = document.getElementById("test2"); Alert(elem.value); ) function func3() ( var elem = document.getElementById("test3"); 경고(elem.value); )

이제 우리 접근 방식의 단점이 명확하게 드러납니다. 각 입력에 대해 자체 클릭 처리 기능을 만들어야 하며 이러한 기능은 거의 동일한 작업을 수행합니다.

10개의 입력이 있으면 10개의 기능을 만들어야 하는데 이는 불편합니다.

작업을 단순화해 보겠습니다. 현재 요소의 ID를 매개변수로 함수에 전달합니다. 그리고 많은 수의 기능 대신 모든 것이 하나의 기능으로 축소됩니다.

function func(id) ( var elem = document.getElementById(id); Alert(elem.value); )

그러나 이 솔루션에는 여전히 단점이 있습니다. 각 요소는 서로 다른 ID를 입력해야 하며 이는 다소 불편합니다.

그럼 마지막으로 이것을 사용하여 문제를 해결하는 옵션을 살펴보겠습니다.

각 입력을 클릭하면 해당 내용이 표시되도록 만들어 보겠습니다. 이를 위해 func(this) 와 같이 this 객체를 함수에 대한 매개변수로 전달합니다.

this는 함수 매개변수로 전달되고 elem 변수로 끝납니다. 이 요소는 다음과 같은 방식으로 얻은 것처럼 동작합니다. var elem = document.getElementById(...), 하지만 이런 식으로 받을 필요는 없습니다. 모든 것이 이미 준비되어 있으므로 사용할 수 있습니다. 예를 들어 elem.value는 입력 값 등을 가리킵니다.

따라서 문제에 대한 가장 간단한 해결책은 다음과 같습니다.

함수 func(elem) ( 경고(elem.value); )

CSS 기초

JavaScript에서는 요소의 스타일 속성 값을 변경하여 CSS 속성 작업을 수행합니다. 예를 들어, 색상을 변경하려면 다음 체인을 구축해야 합니다. 요소.스타일.색상- 원하는 색상 값을 할당합니다.

function func() ( var elem = document.getElementById("test"); elem.style.color = "red"; )

elem 변수를 입력할 수도 없지만 빌드할 수는 없습니다. 아주 긴 사슬.