집 비교 문맹 퇴치 순수 JavaScript에서 DOM 조작. 소개 html과 dom의 충돌

순수 JavaScript에서 DOM 조작. 소개 html과 dom의 충돌

이 자습서에서는 JavaScript에서 이벤트, 속성 및 getElementById 작업의 기본 사항을 다룹니다.

이전 수업에서 우리는 공부했습니다. 기본 기능자바스크립트 언어. 이 강의를 시작으로 JavaScript 자체가 의도한 대로 수행할 것입니다. 요소를 변경할 것입니다. HTML페이지 및 사용자 작업에 응답합니다. 우리의 스크립트는 더 훌륭하고 유용하게 될 것입니다.

코드에 반응하도록 가르치는 것부터 시작하겠습니다. 사용자 행동에대지. 예를 들어 사용자가 마우스로 어딘가를 클릭하면 이에 대한 응답으로 코드가 이 클릭을 처리하고 화면에 일부 정보를 표시해야 합니다.

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

자바스크립트에는 몇 가지 방법들이벤트 작업. 가장 간단한 것부터 시작하겠습니다.

이벤트 기본

특정 이벤트에 대한 요소의 응답을 설정하는 가장 쉬운 방법은 특정 태그의 속성을 사용하여 이를 지정하는 것입니다. 예를 들어, 이벤트 "마우스 클릭"속성과 일치 클릭, 이벤트 "마우스 호버"- 기인하다 마우스오버, 그리고 이벤트 "커서 떠나는 요소"- 기인하다 onmouseout.

이벤트가 있는 속성의 값은 자바스크립트 코드. 다음 예에서 버튼을 클릭하여기능이 실행됩니다 알리다:

그리고 지금 클릭으로요소에서 함수가 실행됩니다. 기능:

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

할 수 있다 하나 이상의 기능, 하지만 몇 가지:

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

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

여러 가지 방법으로 이를 처리할 수 있습니다. 외부 따옴표를 작은 따옴표로 변경할 수 있습니다. onclick="경고("!")", 백슬래시를 사용하여 내부 따옴표를 이스케이프할 수도 있습니다. onclick="경고(\"!\")"또는 속성에서 함수로 JavaScript 코드를 전송하고 속성에 함수 이름만 남겨둡니다. onclick="함수()".

당신도 마찬가지일 것이다. 외부속성 따옴표를 작은 따옴표로 설정하고 문자열에 작은 따옴표를 사용하십시오. onclick="경고("!")"- 여기에서도 모든 것이 비슷한 방식으로 해결됩니다.

이벤트에 대한 속성 테이블

getElementById 작업

이제 요소를 받는 방법을 배웁니다. HTML페이지 및 다양한 수행 시장 조작(예를 들어, 텍스트와 색상, 기타 많은 유용한 것들을 변경할 수 있습니다.)

속성이 있는 페이지에 태그가 있다고 가정합니다. ID의미에서 테스트. 이 태그에 대한 링크를 변수에 작성해 보겠습니다. 요소. 이렇게 하려면 메서드를 사용해야 합니다. getElementById, 요소를 가져옵니다. ID.

이 항목이 발생합니다 클릭으로속성을 설정한 버튼에서 클릭. 이 버튼을 클릭하면 기능이 작동합니다 기능에서 찾을 것입니다. HTML페이지 요소 ID동일한 테스트그리고 적어 그것에 대한 링크변수로 요소:

이제 변수에서 요소속성이 있는 요소에 대한 링크가 있습니다. ID의미에서 테스트. 변수 자체 요소~이다 물체.

이 개체와 HTML 태그페이지는 서로 연결되어 있습니다. 개체의 모든 속성을 변경할 수 있습니다. 요소동시에 우리는 변경 사항을 볼 것입니다 HTML 페이지, 이것은 우리가 받은 요소에 일어날 것입니다.

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

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

이제 태그 속성을 읽고 변경할 것입니다. 다시 주어지자 입력 id가 test와 같고 단추, 기능이 실행될 클릭 기능:

함수 내부 기능우리는 우리의 의견을 얻습니다 아이디로변수에 참조를 작성하십시오. 요소:

함수 func() ( var 요소 = document.getElementById("테스트"); )

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

다음과 같은 경고를 통해 속성의 내용을 표시할 수 있습니다. 경고(요소 값)- 또는 일부 변수에 씁니다. 이렇게 해보자:

function func() ( var elem = document.getElementById("test"); alert(elem.value); // "!" 출력)

예를 들어 다음과 같은 방식으로 다른 속성의 값을 읽을 수 있습니다. elem.id- 우리는 id 속성의 값을 고려하므로 - 요소 유형- 유형 속성의 값. 예를 참조하십시오.

function func() ( var elem = document.getElementById("test"); alert(elem.value); // "!"를 출력합니다. alert(elem.id); // "테스트"를 출력합니다. alert(elem.type); // "텍스트" 출력)

속성 값을 읽을 수 있을 뿐만 아니라 변화그들을. 예를 들어 속성 값을 변경하려면 값, 해당 구성을 할당하기만 하면 됩니다. 요소 값:

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

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

글쎄, 지금 가장 어려운 것 - 당신은 할 수 있습니다 입력하지변하기 쉬운 요소, 그리고 빌드 체인다음과 같은 점에서:

function func() ( alert(document.getElementById("test").value); // "!" 출력

같은 방식으로 (체인으로) 생산하는 것이 가능합니다. 속성 덮어쓰기:

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

그러나 대부분의 경우 변수의 도입 더욱 편리한. 두 가지 예를 비교하십시오 - 이제 변수를 도입했습니다. 요소여러 속성을 읽을 수 있지만 getElementById~라고 불리는 한번 만:

function func() ( var elem = document.getElementById("테스트"); elem.value = "(!LANG:www"; elem.type = "submit"; }!}

그리고 이제 나는 새로운 변수를 도입하지 않을 것이므로 다음을 호출해야 합니다. getElementById두 배:

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

내 생각에 이 코드는 더 어렵다, 한 줄 적게 차지하지만. 또한 값을 변경하려면 ID테스트에서 www와 같이 여러 곳에서 이 작업을 수행해야 하므로 그다지 편리하지 않습니다.

브라우저에. 메소드를 만드는 페이지에서 요소를 검색합니다. getElementById, 예쁘다 느린작업 ( 일반적으로 페이지 요소에 대한 작업은 느린 작업입니다.- 이것을 기억).

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

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

예외: 클래스 및 속성

JavaScript를 통해 속성으로 작업하는 방법을 이미 배웠고 이제 무엇을 말할 시간입니다. 그렇게 간단하지 않다- 속성으로 작업할 때 예외가 있습니다. 이것은 속성입니다. 수업.

이 단어는 특별한 JavaScript에서는 요소 클래스속성 값을 읽으려면 수업. 대신에 작성해야 합니다. elem.className.

다음 예에서는 속성 값을 표시합니다. 수업:

함수 func() ( var elem = document.getElementById("테스트"); 경고(elem.className); )

그런데 속성과 다르게 호출되는 다른 속성이 있습니다. 예를 들어, 속성 ~을 위한 () 속성과 이름을 일치시킵니다. html용.

이것으로 작업

이제 우리는 특별한 개체로 작업할 것입니다 이것현재 요소(이벤트가 발생한 요소)를 가리키는 A. 또한 이 요소가 이미 메서드에 의해 수신된 것처럼 나타납니다. getElementById.

어떻게 작업하는지 보자 이것이 접근 방식의 이점은 무엇입니까?

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

지금은 다음과 같은 방법만 알 수 있습니다.

함수 func() ( var elem = document.getElementById("테스트"); 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"); alert(elem.value); )

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

10개의 입력이 있으면 10개의 함수를 만들어야 하므로 편리하지 않습니다.

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

함수 func(id) ( var elem = document.getElementById(id); alert(elem.value); )

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

그래서, 마지막으로 문제에 대한 해결책을 고려하자 이것.

클릭 시 각 입력에 내용이 표시되도록 만들어 보겠습니다. 이를 위해 객체를 함수 매개변수로 전달합니다. 이것, 이와 같이: 기능(이).

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

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

함수 func(elem) ( alert(elem.value); )

CSS 기초

에 자바스크립트작업 CSS 속성 요소의 스타일 속성 값을 변경하면 발생합니다. 예를 들어 변경하려면 색깔다음 체인을 구축해야 합니다. elem.style.color- 원하는 색상 값을 할당합니다.

함수 func() ( var elem = document.getElementById("테스트"); elem.style.color = "빨간색"; )

변수를 생략할 수도 있습니다. 요소, 그리고 빌드 매우 긴 사슬.

일반적으로 개발자는 DOM으로 작업을 수행해야 할 때 jQuery를 사용합니다. 그러나 거의 모든 DOM 조작은 DOM API를 사용하여 순수 JavaScript에서 수행할 수 있습니다.

이 API를 더 자세히 살펴보겠습니다.

마지막에는 모든 프로젝트에서 사용할 수 있는 간단한 DOM 라이브러리를 작성하게 됩니다.

DOM 쿼리

DOM 쿼리는 임의의 CSS 선택기를 인수로 사용하는 .querySelector() 메서드를 사용하여 만들어집니다.

Const myElement = document.querySelector("#foo > div.bar")

첫 번째 일치하는 요소를 반환합니다. 반대로 할 수 있습니다 - 요소가 선택자와 일치하는지 확인하십시오.

MyElement.matches("div.bar") === 참

선택자와 일치하는 모든 요소를 가져오려면 다음 구문을 사용하세요.

Const myElements = document.querySelectorAll(".bar")

참조할 상위 요소를 알고 있는 경우 전체 코드를 검색하는 대신 하위 요소를 간단히 검색할 수 있습니다.

Const myChildElemet = myElement.querySelector("input") // 대신: // document.querySelector("#foo > div.bar input")

질문이 발생합니다. 그러면 .getElementsByTagName()과 같은 덜 편리한 다른 메서드를 사용하는 이유는 무엇입니까? 작은 문제가 있습니다. output.querySelector()의 결과가 업데이트되지 않고 추가할 때 새로운 요소(참조), 변경되지 않습니다.

const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elements2.length // 거짓

또한 querySelectorAll()은 모든 것을 하나의 목록으로 수집하므로 매우 효율적이지 않습니다.

목록으로 작업하는 방법?

그 위에 .querySelectorAll()에는 두 가지 작은 단점이 있습니다. 결과에 대해 메서드를 호출하고 각각에 적용되기를 기대할 수는 없습니다(jQuery를 사용하는 데 익숙할 수 있음). 어쨌든 루프의 모든 요소를 반복해야 합니다. 둘째, 반환된 개체는 배열이 아니라 요소 목록입니다. 따라서 배열 메서드는 작동하지 않습니다. 물론 .forEach() 와 같은 목록에 대한 메서드가 있지만 모든 경우에 적합하지는 않습니다. 따라서 목록을 배열로 변환하는 것이 좋습니다.

// Array.from() 사용 Array.from(myElements).forEach(doSomethingWithEachElement) // 또는 배열 프로토타입(ES6 이전) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // 더 쉽게: .forEach.call (myElements, doSomethingWithEachElement)

각 요소에는 "패밀리"를 참조하는 몇 가지 속성이 있습니다.

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

Element 인터페이스는 Node 인터페이스에서 상속되기 때문에 다음 속성도 있습니다.

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

전자의 속성은 요소를 참조하는 반면 후자(.parentElement 제외)는 모든 유형의 요소 목록이 될 수 있습니다. 따라서 요소 유형을 확인할 수 있습니다.

MyElement.firstChild.nodeType === 3 // 이 요소는 텍스트 노드가 됩니다.

클래스 및 속성 추가

새 클래스를 추가하는 것은 매우 쉽습니다.

myElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

요소에 속성을 추가하는 것은 객체에 속성을 추가하는 것과 정확히 동일합니다.

// 속성 값 가져오기 const value = myElement.value // 속성을 요소 속성으로 설정 myElement.value = "(!LANG:foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

.getAttibute() , .setAttribute() 및 .removeAttribute() 메서드를 사용할 수 있습니다. 그들은 즉시 요소의 HTML 속성(DOM 속성과 반대)을 변경하여 브라우저를 다시 렌더링합니다(브라우저에서 개발자 도구를 사용하여 요소를 검사하여 변경 사항을 볼 수 있음). 이러한 다시 그리기에는 DOM 속성을 설정하는 것보다 더 많은 리소스가 필요할 뿐만 아니라 예기치 않은 오류가 발생할 수도 있습니다.

일반적으로 colspan 과 같이 해당 DOM 속성이 없는 요소에 사용됩니다. 또는 HTML 속성을 상속할 때와 같이 사용이 실제로 필요한 경우(참조).

CSS 스타일 추가

다른 속성과 동일한 방식으로 추가됩니다.

MyElement.style.marginLeft = "2em"

약간 특정 속성.style 을 사용하여 설정할 수 있지만 일부 계산 후에 값을 얻으려면 window.getComputedStyle() 을 사용하는 것이 좋습니다. 이 메서드는 요소를 가져와 요소 자체와 부모 요소의 스타일을 모두 포함하는 CSSStyleDeclaration을 반환합니다.

Window.getComputedStyle(myElement).getPropertyValue("왼쪽 여백")

DOM 변경

요소를 이동할 수 있습니다.

// 마지막으로 element1 추가 자식 요소 element2 element1.appendChild(element2) // element2를 element3 앞에 element1의 자식으로 삽입 element1.insertBefore(element2, element3)

이동하고 싶지 않지만 사본을 붙여넣으려면 다음을 사용하십시오.

// 클론 생성 const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

.cloneNode() 메서드는 부울 값을 인수로 사용하며 true이면 자식 요소도 복제됩니다.

물론 새 요소를 만들 수 있습니다.

const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("일부 텍스트")

그리고 위의 그림과 같이 삽입합니다. 요소를 직접 삭제할 수는 없지만 상위 요소를 통해 삭제할 수 있습니다.

MyParentElement.removeChild(myElement)

간접적으로 참조할 수도 있습니다.

MyElement.parentNode.removeChild(myElement)

요소에 대한 메서드

각 요소에는 .innerHTML 및 .textContent 와 같은 속성이 있으며 여기에는 HTML 코드와 그에 따른 텍스트 자체가 포함됩니다. 다음 예에서는 요소의 내용을 변경합니다.

// HTML 변경 myElement.innerHTML = `

새로운 콘텐츠

삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐삐

` // 이렇게 하면 내용이 제거됩니다. myElement.innerHTML = null // HTML에 추가 myElement.innerHTML += ` 계속 읽기...

사실, HTML을 변경하는 것은 나쁜 생각입니다. 왜냐하면 이전에 작성된 모든 변경 사항이 손실되고 이벤트 핸들러도 오버로드되기 때문입니다. 이 방법은 모든 HTML을 완전히 버리고 서버의 사본으로 교체하는 방식으로만 사용하는 것이 좋습니다. 이와 같이:

const link = document.createElement("a") const text = document.createTextNode("계속 읽기...") const hr = document.createElement("hr") link.href = "foo.html" link.appendChild( 텍스트) myElement.appendChild(링크) myElement.appendChild(hr)

그러나 이렇게 하면 두 개의 브라우저 다시 그리기가 발생하는 반면 .innerHTML은 하나만 발생합니다. 먼저 DocumentFragment 에 모든 것을 추가한 다음 필요한 조각을 추가하면 이 문제를 해결할 수 있습니다.

Const 조각 = document.createDocumentFragment() fragment.appendChild(text) fragment.appendChild(hr) myElement.appendChild(fragment)

이벤트 핸들러

가장 간단한 핸들러 중 하나:

MyElement.onclick = 기능 onclick (event) ( console.log(event.type + " 해고됨 ") )

그러나 일반적으로 피해야 합니다. 여기에서 .onclick은 요소의 속성이며 이론상 변경할 수 있지만 이전 함수를 참조하는 또 다른 함수를 사용하여 다른 핸들러를 추가할 수 없습니다.

핸들러를 추가하려면 .addEventListener()를 사용하는 것이 좋습니다. 이벤트 유형, 실행될 때마다 호출되는 함수, 구성 개체(나중에 설명함)의 세 가지 인수가 필요합니다.

MyElement.addEventListener("클릭", 함수(이벤트) ( console.log(event.type + " 해고됨") )) myElement.addEventListener("클릭", 함수(이벤트) ( console.log(event.type + " 다시 해고당했습니다") ))

event.target 속성은 이벤트가 연결된 요소를 나타냅니다.

따라서 모든 속성에 액세스할 수 있습니다.

// `forms` 속성은 모든 양식에 대한 링크를 포함하는 배열입니다. const myForm = document.forms const myInputElements = myForm.querySelectorAll("input") Array.from(myInputElements).forEach(el => ( el.addEventListener(" 변경 ", 기능(이벤트) ( console.log(event.target.value) )) ))

기본 작업 방지

이를 위해 표준 작업을 차단하는 .preventDefault() 메서드가 사용됩니다. 예를 들어 클라이언트 측 승인이 성공하지 못한 경우 양식 제출을 차단합니다.

MyForm.addEventListener("제출", 함수(이벤트) ( const name = this.querySelector("#name") if (name.value === "(!LANG:Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

.stopPropagation() 메서드는 자식에 연결된 특정 이벤트 핸들러와 부모에 연결된 동일한 이벤트에 대한 두 번째 핸들러가 있는 경우 도움이 됩니다.

앞서 언급했듯이 .addEventListener() 메서드는 선택적 세 번째 인수를 구성 객체로 사용합니다. 이 객체는 다음 부울 속성 중 하나를 포함해야 합니다(기본적으로 모두 false로 설정됨).

캡처: 이벤트는 DOM 아래의 다른 요소보다 먼저 이 요소에 첨부됩니다.
한 번: 이벤트를 한 번만 고정할 수 있습니다.
수동: event.preventDefault()는 무시됩니다(오류 중 예외).

가장 일반적인 속성은 .capture 이며 너무 일반적이어서 이에 대한 약칭이 있습니다. config 개체에 전달하는 대신 여기에 값을 지정하기만 하면 됩니다.

MyElement.addEventListener(유형, 수신기, true)

핸들러는 .removeEventListener() 메서드를 사용하여 제거됩니다. 이 메서드는 이벤트 유형과 제거할 핸들러에 대한 참조라는 두 가지 인수를 사용합니다. 예를 들어, Once 속성은 다음과 같이 구현할 수 있습니다.

MyElement.addEventListener("change", function listener (event) ( console.log(event.type + " got trigger on " + this) this.removeEventListener("change", listener) ))

계승

요소가 있고 모든 하위 요소에 대한 이벤트 핸들러를 추가하려는 경우를 가정해 보겠습니다. 그런 다음 위에 표시된 대로 myForm.querySelectorAll("input") 메서드를 사용하여 반복해야 합니다. 그러나 단순히 양식에 요소를 추가하고 event.target을 사용하여 해당 내용을 확인할 수 있습니다.

MyForm.addEventListener("변경", 함수(이벤트) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

그리고 이 방법의 또 다른 장점은 핸들러가 새 자식 요소에 자동으로 첨부된다는 것입니다.

생기

애니메이션을 추가하는 가장 쉬운 방법은 CSS를 transition 속성과 함께 사용하는 것입니다. 그러나 더 많은 유연성(예: 게임)을 위해서는 JavaScript가 더 적합합니다.

애니메이션이 끝날 때까지 window.setTimeout() 메서드를 호출하는 것은 좋은 생각이 아닙니다. 특히 모바일 장치에서 애플리케이션이 멈출 수 있기 때문입니다. 다음 다시 그릴 때까지 모든 변경 사항을 저장하려면 window.requestAnimationFrame()을 사용하는 것이 좋습니다. 함수를 인수로 사용하여 차례로 타임스탬프를 수신합니다.

const 시작 = window.performance.now() const 지속 시간 = 2000 window.requestAnimationFrame(function fadeIn (지금)) ( const 진행 = 지금 - 시작 myElement.style.opacity = 진행 / 지속 시간 if (진행)< duration) { window.requestAnimationFrame(fadeIn) } }

이러한 방식으로 매우 부드러운 애니메이션이 달성됩니다. Mark Brown은 그의 기사에서 이 주제에 대해 설명합니다.

우리만의 라이브러리 쓰기

DOM에서 요소를 사용하여 작업을 수행하기 위해 항상 요소를 반복해야 한다는 사실은 jQuery의 $(".foo").css((color: "red")) 구문에 비해 상당히 지루해 보일 수 있습니다. 그러나 이 작업을 더 쉽게 하기 위해 자신만의 방법을 작성해 보는 것은 어떻습니까?

Const $ = function $(selector, context = document) ( const elements = Array.from(context.querySelectorAll(selector)) return ( elements, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) return this ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) return this ), on (event, handler, options) ( this.elements .forEach(element => ( element.addEventListener(event, handler, options) )) return this ) ) )

주제가 정말 복잡합니다. 그러나 그들이 말했듯이 악마는 그가 그린 것처럼 끔찍하지 않습니다. 이것은 내가 가장 힘든 너트를 얻는 곳입니다. 가능한 한 소화하기 쉽게 "페인트"하지만 아주 원시적이지는 않은 일종의 슈퍼 작업입니다. 지금까지 내가 읽은 모든 자료는 자우미이거나 원시적인 경향이 있습니다.

DOM이란 무엇입니까?

약어 DOM의 약자 문서 객체 모델(문서 개체 모델).

DOM HTML, XHTML 및 XML 문서의 내용, 즉 HTML, XHTML 및 XML 태그 및 속성의 표현, 프로그래밍 개체로서의 CSS 스타일에 액세스하기 위한 프로그래밍 인터페이스입니다. JavaScript 및 기타 웹 프로그래밍 언어 모두 이 모델에서 작동합니다.

약간의 역사

4개의 레벨이 있습니다 DOM(0, 1, 2 및 3).

레벨 0(1996) 포함된 모델 DOM, 레벨 1의 출현 이전에 존재했습니다. 기본적으로 이들은 document.images, document.forms, document.layers 및 document.all 컬렉션입니다. 이 모델은 공식 사양이 아닙니다. DOM출판 W3C. 오히려 표준화 프로세스가 시작되기 전에 존재했던 것에 대한 정보를 나타냅니다.

레벨 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 - 자바스크립트, 우리가 다루고 있는 5가지 유형만 사용할 수 있습니다. 그러나 이 “빙산의 일각”조차도 한두 번의 수업으로 다룰 수 없는 매우 “널리는 나무”입니다.

사양에 정의된 노드 유형 상수의 전체 세트 W3C DOM(파란색으로 강조 표시된 노드는 HTML - 자바스크립트):

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

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

DOM의 문서 구조

모든 문서 객체는 DOM 노드입니다. 기본 문서를 고려하십시오.

< title>DOM

"중앙" > 제목

단락 텍스트

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

각 노드는 자식 노드를 가질 수 있습니다(다이어그램에서 화살표로 연결됨). 문서 트리의 기본이 되는 문서 개체도 노드이지만 부모 노드가 없고 다른 노드에서 찾을 수 없는 많은 속성과 메서드가 있습니다. 여기에는 하나의 자식 노드가 있습니다. .

요소에서 두 개의 자식 노드: 그리고 , 여기에 포함된 모든 요소가 자식이 됩니다.

주목!

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

단락 텍스트

집단 , <h1>그리고 자기 안에 담다 텍스트. 이들은 그들의 자녀들이다. 텍스트 노드. 요소에서 <h1>도 있다 기인하다: 정렬="중앙" . 속성 노드그것들을 포함하는 요소의 자식 노드이기도 합니다. DOM 트리 노드로 작업할 때 해당 속성과 메서드가 사용됩니다. <h4>일부 노드 속성</h4> 작은 소개 다시 한 번 반복합니다. 스크립트의 페이지 요소에 액세스할 때 Javascript 언어뿐만 아니라 여기에 포함된 인터페이스도 처리합니다. DOM. 때때로 당신은 이것을 알아야 할 필요가 있습니다. 때때로 당신은 "우리가 산문으로 말하는 것"을 잊어버릴 수 있습니다. 개체 모델의 일부 속성 및 메서드 DOM우리는 이미 이 방법을 사용했습니다. 따라서 때때로 이전 강의에 대한 링크를 제공할 것입니다. 이 단원에서는 모든 브라우저에 있는 모든 노드의 모든 속성을 고려하여 "학문적" 방식으로 진행하지 않습니다. 우선 가장 실용적이고 "충돌이없는"것에 대해 알아 보겠습니다. 그렇기 때문에 우리는하지 않습니다평소와 같이 "기본 속성"으로 시작하십시오. 노드 이름그리고 노드 값. 태그 이름 요소의 태그 이름이 있는 문자열을 반환합니다. 모든 tagName 값에는 대문자만 포함됩니다. 통사론 요소.태그 이름 예시  tagName 속성 테스트 <script type="text/javascript"> document.write (document.getElementById ("testTagName" ).tagName) </script> 결과 tagName 속성 테스트 내부HTML 우리는 이미 이 속성을 만났습니다(10과 참조). 그리고 이제 우리는 그것이 어디에서 왔는지 이해합니다. "집에서". 요소의 콘텐츠에 대한 액세스 권한을 부여합니다. 텍스트 콘텐츠뿐만 아니라 요소 내부에 있는 모든 HTML 태그를 지정합니다. 이 속성은 읽기 뿐만 아니라 내용 변경에도 사용됩니다. 메모 IE에서 다양한 요소에 대해 내부HTML읽기 전용으로 작동: 다음을 제외한 모든 테이블 요소입니다. <td>그리고 <th>, 만큼 잘 <title>그리고 <frameset> . 예를 들어 요소가 없는 빈 테이블을 만들었습니다. <td>프로그래밍 방식으로 삽입하려는 <tr>~을 통해 내부HTML: <html> <head></head> <body onload= "document.getElementById("테스트").innerHTML = " <td>테스트 문자열</td>"" > <table> <tr id= "test" ></tr> </table> </body> </html> IE는 "알 수 없는 런타임 오류"를 발생시키고 다른 브라우저는 붙여넣습니다. 동시에 요소의 기존 콘텐츠를 요청하면 <tr>, 예를 들어 경고(document.getElementById("id").innerHTML), 그러면 IE에서 작동합니다. 통사론 요소.내부HTML = "할당된 텍스트" 예시 <table class="code"><tr><td> innerHTML 속성 테스트  삽입할 단락 <script type="text/javascript"> // Эта функция читает текст и вставляет его в заданный абзац. function testRead() { document.getElementById ("target" ).innerHTML = document.getElementById ("testInnerHTML" ).innerHTML } // Эта функция изменяет текст заданного абзаца. function testChange() { document.getElementById ("target" ).innerHTML = "Перекрашиваем и меняем текст" } // Эта функция возвращает свойство в исходное положение. function testReset() { document.getElementById ("target" ).innerHTML = "Абзац для вставки" } </script> <form> <input type= "button" value= "내부HTML 읽기" onClick="테스트읽기();" > <input type= "button" value= "내부HTML 변경" onClick= "testChange();" > <input type= "button" value= "초기화" onClick= "testReset();" > </form> </td> </tr></table>innerHTML 속성 테스트 삽입할 단락 이 섹션에서는 DOM(Document Object Model)에 대한 간략한 소개를 제공합니다. DOM이 무엇인지, HTML 및 XML 문서 구조가 어떻게 제공되는지, 이들과 상호 작용하는 방법은 무엇입니까? 이 섹션에는 배경 정보와 예가 포함되어 있습니다. <h2>DOM(문서 개체 모델)이란 무엇입니까?</h2> DOM(Document Object Model)은 HTML 및 XML 문서용 프로그래밍 인터페이스(API)입니다. DOM은 문서의 구조화된 표현을 제공하고 문서의 내용, 스타일 및 구조를 변경할 수 있는 프로그램에서 해당 구조에 액세스하는 방법을 정의합니다. DOM 표현은 속성과 메서드가 있는 구조화된 노드 및 개체 그룹으로 구성됩니다. 기본적으로 DOM은 웹 페이지를 스크립팅 언어 또는 프로그래밍 언어에 연결합니다.웹 페이지는 문서입니다. 문서는 브라우저 창과 HTML 코드 자체에 모두 표시될 수 있습니다. 어쨌든 같은 문서입니다. DOM은 이 문서를 표현, 저장 및 관리하는 또 다른 방법을 제공합니다. DOM은 웹 페이지의 객체 지향 표현을 완벽하게 지원하므로 JavaScript와 같은 스크립팅 언어를 사용하여 변경할 수 있습니다. <h2>DOM에 어떻게 접근할 수 있습니까?</h2> DOM으로 작업하기 위해 특별한 작업을 수행할 필요는 없습니다. <a href="https://bar812.ru/ko/ustanovka-skriptov-v-razlichnye-brauzery-ustanovka-skriptov-v.html">다양한 브라우저</a>서로 다른 DOM 구현이 있고 이러한 구현은 실제 DOM 표준에 대한 다양한 준수 수준을 보여주지만(이는 이 문서에서 다루지 않으려고 시도한 주제입니다), 각 브라우저는 자체 DOM을 사용하여 웹 페이지를 스크립팅 언어에 액세스할 수 있도록 합니다. 요소를 사용하여 스크립트를 작성할 때<script>, либо включая в веб страницу инструкцию для загрузки скрипта, вы можете немедленно приступить к использованию программного интерфейса (API), используя элементы или для взаимодействия с самим документом, либо для получения потомков этого документа, т.е. <a href="https://bar812.ru/ko/svoistvo-znachenie-opacity-otvechaet-za-prozrachnost-s-pomoshchyu-css-prozrachnost.html">различных элементов</a> на странице. Ваше программирование DOM может быть чем-то простым, например, вывод сообщения с использованием функции объекта , или использовать более <a href="https://bar812.ru/ko/ploho-lovit-dzhipies-na-telefone-yandeks-navigator-slabyi-gps.html">сложные методы</a> DOM, которые создают новое содержимое, как показанно в следующем примере: <body onload="window.alert("добро пожаловать на мою домашнюю страницу!");"> В следующем примере внутри элемента <script> определен код JavaScript, <a href="https://bar812.ru/ko/oshibka-polucheniya-dannyh-servera-401-kody-oshibok-http-rasshifrovka.html">данный код</a> устанавливает функцию при загрузке документа (когда весь DOM доступен для использования). Эта функция создает новый элемент H1, добавляет текст в данный элемент, а затем добавляет H1 в дерево документа: < html > < head > < script > // запуск данной функции при загрузке документа window. onload = function () { // создание нескольких элементов // в пустой HTML странице heading = document. createElement( "h1" ) ; heading_text = document. createTextNode( "Big Head!" ) ; heading. appendChild( heading_text) ; document. body. appendChild( heading) ; } </ script > </ head > < body > </ body > </ html > <h2>Важные типы данных</h2> Данный раздел предназначен для краткого описания <a href="https://bar812.ru/ko/planshetnye-kompyutery-galaxy-note-8-bluetooth---eto-standart-bezopasnogo-besprovodnogo-perenosa-dan.html">различных типов</a> и объектов в простой и доступной манере. Существует некоторое количество различных типов данных, которые используются в API, на которые вы должны обратить внимание. Для простоты, синтаксис примеров в <a href="https://bar812.ru/ko/kakaya-karta-nuzhna-dlya-razrabotchikov-gugl-plei-kak-dobavlyat-igry-v.html">данном разделе</a> обычно ссылается на узлы как на element s, на массивы узлов как на nodeList s (либо просто element s) и на атрибуты узла, просто как на attribute s. Ниже таблица с <a href="https://bar812.ru/ko/sputnikovoe-tv-mts-cam-modul-sam-moduli-dlya-t2-i-ne-tolko-kratkoe.html">кратким описанием</a> этих типов данных. <table class="standard-table"><tbody><tr><td>document </td> <td>Когда член возвращает объект типа document (например, свойство элемента ownerDocument возвращает документ к которому он относится), этот обьект document является собственным корневым обьектом. В DOM document Reference разделе описан объект document. element </td> </tr><tr><td>element </td> <td>обозначает элемент или узел типа element, возвращаемый членом DOM API. Вместо того, чтобы говорить, что метод document.createElement() возвращает ссылку на node, мы просто скажем, что этот элемент возвращает element, который просто был создан в DOM. Объекты element реализуют DOM element интерфейс и также более общий Node интерфейс. Оба интерфейса включены в эту справку. nodeList </td> </tr><tr><td>NodeList </td> <td> массив элементов, как тот, что возвращается методом Document.getElementsByTagName(). Конкретные элементы в массиве доступны по индексу двумя способами: <ul><li>list.item(1)</li> </ul>Эти способы эквивалентны. В первом способе item() - единственный метод объекта NodeList. Последний использует обычный синтаксис массивов, чтобы получить второе значение в списке. </td> </tr><tr><td>attribute </td> <td>Когда attribute возвращается членом API (например, метод createAttribute()) - это будет ссылка на объект, который предоставляет специальный (хоть и небольшой) интерфейс для атрибутов. Атрибуты - это узлы в DOM, как и элементы, хотя вы можете редко использовать их в таком виде. </td> </tr><tr><td>namedNodeMap </td> <td>namedNodeMap подобна массиву, но элементы доступны по имени или индексу. Доступ по индексу - это лишь для удобства перечисления, т.к. элементы не имеют определенног порядка в списке. Этот тип данных имеет метод item() для этих целей и вы можете также добавлять и удалять элементы из namedNodeMap </td> </tr></tbody></table><h2>DOM-интерфейсы (DOM interfaces)</h2> Это руководство об объектах и реальных вещах, которые вы можете использовать для управления DOM-иерархией. Есть много моментов, где понимание того, как это работает, может удивлять. Например, объект, представляющий HTML form элемент, берет своё свойство name из интерфейса HTMLFormElement, а свойство className - из интерфейса HTMLElement. В обоих случаях свойство, которое вы хотите, находится в этом объекте формы. Кроме того, отношение между объектами и интерфейсами, которые они реализуют в DOM может быть удивительным и этот раздел пытается рассказать немного о существующих интерфейсах в DOM и о том, как они могут быть доступны. <h3>Интерфейсы и объекты (Interfaces and objects)</h3> Многие объекты реализуют действия из нескольких интерфейсов. Объект таблицы, например, реализует специальный , который включает такие методы как createCaption и insertRow . Но так как это таблица - это ещё и HTML-элемент, table реализует интерфейс Element , описанный в разделе . Наконец, так как HTML-элемент (в смысле DOM) - это узел (node) в дереве, которое составляет <a href="https://bar812.ru/ko/osnovy-raboty-s-dom-v-javascript-rabota-s-dom-modelyu-obektnaya-model-dom.html">объектную модель</a> для HTML- или XML-страницы, табличный элемент также реализует более общий интерфейс Node , из которого происходит Element . Var table = document.getElementById("table"); var tableAttrs = table.attributes; // Node/Element interface for (var i = 0; i < tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border"; <h3>Основные интерфейсы в DOM (Core interfaces in the DOM)</h3> Этот раздел перечисляет несколько самых распространенных интерфейсов в DOM. Идея не в том чтобы описать, что делают эти <a href="https://bar812.ru/ko/metod-api-chto-chto-takoe-api-api-kak-sposob-obsluzhivaniya-klientov.html">методы API</a>, но в том чтобы дать вам несколько мыслей насчет видов методов и свойств, которые вы будете часто видеть, используя DOM. Эти распространенные части API использованы в большинстве примеров раздела в конце этой справки. Document, window - это объекты, чьи интерфейсы вы, как правило, очень часто используете в программировании DOM. Говоря <a href="https://bar812.ru/ko/dhcp-klient-mozhno-li-otklyuchit-na-kompyutere-dhcp-chto-eto-takoe-prostymi.html">простыми словами</a>, объект window представляет что-то вроде браузера, а объект document - корень самого документа. Element наследуется от общего интерфейса Node , и эти интерфейсы вместе предоставляют много методов и свойств, которые можно применять у отдельных элементов. Эти элементы также могут иметь отдельные интерфейсы для работы с типами данных, которые эти элементы содержат, как в примере с объектом table в предыдущем случае. Ниже представлен краткий список распространненых членов API, используемых в программировании веб- и XML-страниц с использованием DOM: <ul><li>parentNode.appendChild (node)</li> </ul><h2>Тестирование DOM API</h2> Этот документ содержит примеры для каждого интерфейса, который вы можете использовать в своей разработке. В некоторых случаях примеры - полноценные веб-страницы с доступом к DOM в элементе <script>, также перечислены элементы, необходимые чтобы запустить скрипт в форме, и HTML-элементы, над которыми будут производиться операции DOM. Когда встречается такой случай, можно просто копировать и вставить пример в новый HTML-документ, сохранить и запустить его в браузере. Есть случаи, однако, где примеры более лаконичные. Чтобы запустить примеры, которые лишь демонстрируют основы взаимодействия интерфейсов с HTML-элементами, вы можете подготовить тестовую страницу, в которую будете помещать функции внутрь скриптов. Следующая очень простая веб-страница содержит элемент <script> в заголовке, в который вы можете поместить функции, чтобы протестировать интерфейс. Страница содержит несколько элементов с атрибутами, которые можно возвращать, устанавливать или, другими словами, манипулировать и содержит <a href="https://bar812.ru/ko/programma-dlya-emulyacii-elektricheskih-shem-radiolyubitelskie.html">пользовательский интерфейс</a>, необходимый, чтобы вызывать <a href="https://bar812.ru/ko/zachem-nuzhny-funkcii-v-programmirovanii-funkcii-v-yazyke.html">нужные функции</a> из браузера. Вы можете использовать эту тестовую страницу или похожую для проверки интерфейсов DOM, которые вас интересуют и просмотра того, как они работают в браузерах. Вы можете обновить содержмое функции test() при необходимости, создать <a href="https://bar812.ru/ko/telefon-s-bolshimi-knopkami-i-knopkoi-sos-mobilnye-telefony-dlya-pozhilyh.html">больше кнопок</a> или добавить элементы при необходимости. < html > < head > < title > DOM Tests</ title > < script type = " application/javascript" > function setBodyAttr (attr, value) { if (document. body) eval ("document.body." + attr+ "="" + value+ """ ) ; else notSupported () ; } </ script > </ head > < body > < div style =" margin : .5 in; height : 400 ; " > > > < tt > text</ tt > > > < form > < select onChange = " setBodyAttr(" text" , this.options.value);" > < option value = " black" > black < option value = " darkblue" > darkblue </ select > > > < tt > bgColor</ tt > > > < select onChange = " setBodyAttr(" bgColor" , this.options.value);" > < option value = " white" > white < option value = " lightgrey" > gray </ select > > > < tt > link</ tt > > > < select onChange = " setBodyAttr(" link" , this.options.value);" > < option value = " blue" > blue < option value = " green" > green </ select > > < a href = " http://www.brownhen.com/dom_api_top.html" id = " sample" > (sample link)</ a > > > </ form > < form > < input type = " button" value = " version" onclick = " ver()" /> </ form > </ div > </ body > </ html > Чтобы протестировать много интерфейсов на одной странице, набор свойств, которые изменяют цвета веб-страницы, можно создать похожую веб-страницу с целой "консолью" кнопок, текстовых полей и других элементов. Следующий скриншот даёт идею, как интерфейсы могут быть сгруппированы вместе для тестирования В этом примере выпадающее меню динамически обновляет доступные из DOM части веб-страницы (например, фоновый цвет, цвет ссылок и цвет текста). Однако при разработке тестовых страниц, тестирование интерфейсов, как вы об этом прочитали, важная часть изучения эффективной работы с DOM. Модель DOM часто называют деревом DOM, поскольку она состоит из дерева объектов, называемых узлами. В вы узнали, что такое Document Object Model (DOM), как получить доступ к объекту document и изменить его свойства с помощью консоли, также мы разницу между исходным кодом HTML и DOM. В этом мануале вы найдете терминологию HTML, которая необходима для работы с JavaScript и DOM, узнаете, что такое дерево и <a href="https://bar812.ru/ko/sozdanie-dom-uzlov-s-pomoshchyu-js-udalit---kak-vstavit-element-posle-drugogo.html">узлы DOM</a>, и научитесь определять наиболее распространенные типы узлов. Также вы сможете создать программу JavaScript в консоли для интерактивного изменения DOM. <h2>Терминология HTML</h2> Понимание <a href="https://bar812.ru/ko/dlya-sozdaniya-zagolovka-veb-stranicy-ispolzuetsya-teg-kak.html">терминов HTML</a> и JavaScript критически необходимо для работы с DOM. Давайте вкратце рассмотрим основные термины. Посмотрите на этот элемент HTML: Home В нем присутствует анкор, который является ссылкой на index.html. <ul><li>a – тег</li> <li>href – атрибут</li> <li>html – значение атрибута</li> <li>Home – текст.</li> </ul>Все, что находится между открывающимся и закрывающимся тегами, составляет HTML-элемент. Вернемся к файлу index.html из предыдущего мануала: <!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM

Document Object Model

Самый простой способ доступа к элементу с JavaScript – это атрибут id. Давайте добавим указанную выше ссылку в файл index.html с id=»nav».

...

Document Object Model

Home

...

Загрузите (или обновите) страницу в окне браузера и посмотрите на DOM, чтобы убедиться, что код был обновлен.

Затем используйте метод getElementById() для доступа ко всему элементу. В консоли введите следующее:

document.getElementById("nav");
Home

Метод getElementById() извлечет весь элемент. Теперь вместо того, чтобы вводить этот объект и метод каждый раз, когда вам нужно получить доступ к ссылке nav, вы можете поместить элемент в переменную, чтобы с ним было проще работать.

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

Переменная navLink содержит анкор. Здесь можно легко изменять атрибуты и значения. Например, чтобы изменить место ссылки, измените атрибут href:

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

Также можно изменить текст, переназначив свойство textContent:

navLink.textContent = "Navigate to Wikipedia";

Теперь, просмотрев этот элемент в консоли или проверив тег Elements, вы увидите, как он обновился.

navLink;
Navigate to Wikipedia

Изменения отобразятся и на фронт-энде.

Обновление страницы вернет все исходные значения.

На этом этапе вы должны понимать, как использовать метод document для доступа к элементу, как присвоить элемент переменной и как изменить свойства и значения в элементе.

Дерево и узлы DOM

Все элементы в DOM определяются как узлы. Существует множество типов узлов, но есть три основных, с которыми вы будете работать чаще всего:

Узел элемента
Текстовый узел
Узел комментария

Когда элемент HTML является элементом в DOM, он называется узлом элемента. Любой одиночный текст вне элемента является текстовым узлом, а комментарий HTML – узлом комментария. Помимо этих трех типов узлов, сам объект document – это узел документа, который является корневым узлом всех остальных узлов.

DOM состоит из древовидной структуры вложенных узлов, которая часто называется деревом DOM. Вы наверняка знаете, что собой представляет генеалогическое дерево – это схематичное представление родственных связей, которое состоит из родителей, детей и ближайших родственников. Узлы в DOM также называются родительскими и дочерними в зависимости от их отношения к другим узлам.

Для примера создайте файл nodes.html. добавьте в него текстовый узел, а также узлы комментария и элемента.

Learning About Nodes

An element node

A text node.

Узел элемента html является родительским. head и body – дочерние узлы html. body содержит три дочерних узла, и все они находятся на одном уровне – тип узла не влияет на уровень вложения.

Примечание : При работе с DOM, сгенерированным HTML, отступы исходного кода HTML создают много пустых текстовых узлов, которые не будут видны во вкладке DevTools Elements. Больше об этом по ссылке .

Определение типа узла

Каждый узел в документе имеет тип, доступ к которому осуществляется через свойство nodeType. В Mozilla Developer Network имеется обновленный список всех констант типов узлов. Ниже приведена таблица наиболее распространенных типов узлов.

Во вкладке Elements в Developer Tools вы можете заметить, что всякий раз, когда вы нажимаете и выделяете любую строку в DOM, рядом с ней появляется значение == $0. Это очень удобный способ получить доступ к текущему активному элементу.

В консоли node.html нажмите на первый элемент в body (h1).

С помощью консоли узнайте тип выбранного узла с помощью свойства nodeType.

$0.nodeType;
1

Выбрав элемент h1, вы увидите 1 как вывод, который относится к ELEMENT_NODE. Сделайте то же самое с другими узлами, и они вернут 3 и 8 соответственно.

Зная, как получить доступ к элементу, вы можете увидеть тип узла, не выделяя элементы в DOM.

document.body.nodeType;
1

В дополнение к nodeType вы также можете использовать свойство nodeValue, чтобы узнать значение текстового узла или узла комментария, а nodeName – для получения тега элемента.

Изменение DOM с помощью событий

До сих пор вы видели, как изменять DOM в консоли, а такие изменения, как известно, временные; каждый раз, когда страница обновляется, все изменения теряются. В вы обновляли цвет фона страницы в консоли. Попробуйте объединить то, чему вы научились в этом мануале, с тем, что вы уже знаете, чтобы создать интерактивную кнопку, которая будет менять цвет фона.

Вернитесь в файл index.html и добавьте элемент button с id. Также нужно добавить ссылку на новый файл в новый js-каталог js/scripts.js.

Learning the DOM

Document Object Model

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

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

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

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

...

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

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

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

태그: ,

단지에 대해. 프로그램들. 철. 인터넷. 창

순수 JavaScript에서 DOM 조작. 소개 html과 dom의 충돌

이벤트 기본

이벤트에 대한 속성 테이블

getElementById 작업

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

예외: 클래스 및 속성

이것으로 작업

CSS 기초

DOM 쿼리

목록으로 작업하는 방법?

클래스 및 속성 추가

CSS 스타일 추가

DOM 변경

요소에 대한 메서드

새로운 콘텐츠

이벤트 핸들러

기본 작업 방지

계승

생기

우리만의 라이브러리 쓰기

DOM이란 무엇입니까?

DOM 노드

"중앙" > 제목

Document Object Model

Document Object Model

Дерево и узлы DOM

An element node

Определение типа узла

Изменение DOM с помощью событий

Document Object Model