'JavaScript DOM 프로그래밍 아트' 읽기 노트 - JavaScript 그림 라이브러리_Javascript 기술

이미지의 src 속성을 변경하는 두 가지 방법:

1. setAttribute 메소드는 요소 노드의 모든 속성을 설정할 수 있는 "레벨 1 DOM"의 구성 요소입니다.

2, element.src = source; 이는 "레벨 1 DOM"이 출현하기 전의 방법이었으며 현재 작동합니다.

'레벨 1 DOM'의 장점은 이식성입니다. 이러한 기존 방법은 웹 문서에만 적용 가능한 반면 DOM은 모든 마크업 언어에 적용 가능합니다.

이벤트 핸들러 기능

링크를 클릭하면 다른 창으로 이동하지 않고 이 웹페이지에 머물고 싶습니다.

코드 복사 코드는 다음과 같습니다.

http://www.example.com" onclick="showPic(this); return false ;">클릭

이 링크를 클릭하면 onclick 이벤트 핸들러에 의해 트리거된 Javascript 코드가 false를 반환하므로 이 링크의 기본 동작이 트리거되지 않습니다.

childNodes 속성

childNodes 속성은 모든 요소의 모든 하위 요소를 가져오는 데 사용할 수 있습니다. childNodes 속성에 의해 반환된 배열에는 요소 노드뿐만 아니라 모든 유형의 노드가 포함됩니다. 실제로 문서의 거의 모든 것이 노드입니다. 공백과 줄 바꿈도 노드로 해석되며 모두 childNodes 속성이 반환하는 배열에 포함됩니다.

그러나 각 노드에는 nodeType 속성이 있습니다. nodeType 속성에는 총 12개의 가능한 값이 있지만 그 중 3개만 가치가 있습니다. 요소 노드의 nodeType 속성 값은 1, 속성 노드의 nodeType 속성 값은 2, 텍스트 노드의 nodeType 속성 값은 3입니다.

텍스트 노드의 값을 변경하려면 DOM에서 제공하는 nodeValue 속성을 사용하세요.

배열 요소 childNodes[0]에는 더 직관적이고 읽기 쉬운 동의어가 있으며, firstChild로 작성할 수 있습니다. DOM도 해당 lastChild 속성을 제공합니다.

예:

코드 복사 코드는 다음과 같습니다.

이미지 선택

먼저 저장할 변수를 만듭니다.

코드 복사 코드는 다음과 같습니다.

var 설명 = document.getElementById("description");

description.nodeValue의 반환 값이 null입니다.

요소 자체의 nodeValue 속성은 null 값입니다.

요소에 포함된 텍스트 값을 얻으려면 설명.childNodes[0].nodeValue를 사용하세요.