DOM 속성 멤버와 문서 흐름을 완전히 마스터하세요.-JS 튜토리얼-php.cn

DOM 속성 멤버와 문서 흐름을 완전히 마스터하세요.

WBOY

풀어 주다： 2022-08-05 15:36:50

원래의

1515명이 탐색했습니다.

이 글은 javascript에 대한 관련 지식을 제공합니다. 주로 DOM 속성 멤버 및 문서 흐름과 관련된 문제를 소개합니다. 양식은 위에서 아래로 행으로 나누어져 있으며, 각 행에서는 왼쪽에서 오른쪽으로 순서대로 요소를 정렬합니다. 문서 흐름을 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다.

DOM 속성 멤버와 문서 흐름을 완전히 마스터하세요.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end】

문서 흐름:

양식을 위에서 아래로 행으로 나누고, 각 행에서 왼쪽에서 오른쪽으로 버튼을 누릅니다. 2차 방출 요소는 일반적인 흐름/문서 흐름입니다.

텍스트 흐름:

문서를 읽고 출력하는 순서. 우리가 일반적으로 보는 왼쪽에서 오른쪽, 위에서 아래로 읽고 출력하는 형태입니다.

문서 흐름에서 벗어나는 상황:

1. float float

Float는 문서 흐름에서 벗어나지만 텍스트 흐름에서는 그렇지 않습니다. > ; 둘러싸기

2. 위치: 절대/고정 절대 위치 지정

절대 위치 지정을 사용하면 요소가 문서 흐름과 텍스트 흐름에서 분리됩니다.

문서 흐름과 텍스트 흐름은 웹 페이지를 조작하기 위한 위치 지정/포지셔닝

DOM

JavaScript을 위한 인터페이스로 이해되며, 정식 이름은 "Document Object Model"(Document Object Model)입니다.

몇 가지 개념이 있습니다: 문서, 요소, 노드

전체 문서는 문서 노드입니다.

각 레이블은 요소 노드입니다.

요소에 포함된 텍스트는 텍스트 노드입니다.

각 속성은 속성 노드입니다.

주석은 주석 노드에 속합니다

DOM 트리:

DOM 트리는 구조입니다

소위 계층 구조는 요소와 요소 사이의 관계를 나타냅니다.

아버지와 아들, 형제

파서의 트리 출력은 다음과 같습니다. DOM 요소와 속성 노드로 구성

으로 구성 트리에 DOM 노드가 포함되어 있다는 것은 트리가 DOM 인터페이스를 구현하는 요소로 구성되어 있음을 의미합니다. 이러한 구현에는 브라우저에서 내부적으로 필요한 다른 속성이 포함됩니다.

문서 흐름을 떠난 후에도 계층 구조 관계는 변경되지 않습니다.

html DOM 속성

속성은 노드(HTML 요소)의 값으로 가져오거나 설정할 수 있습니다.

프로그래밍 인터페이스

는 JavaScript(및 기타 프로그래밍 언어)를 통해 HTML DOM에 대한 액세스를 제공합니다.

모든 HTML 요소는 객체로 정의되며 프로그래밍 인터페이스는 객체 메서드 및 객체 속성입니다.

메서드는 수행할 수 있는 작업(예: 요소 추가 또는 수정)입니다.

속성은 가져오거나 설정할 수 있는 값(예: 노드의 이름 또는 콘텐츠)입니다.

innerHTML 속성

요소의 콘텐츠를 가져오는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것입니다.

innerHTML 속성은 HTML 요소의 콘텐츠를 가져오거나 바꾸는 데 유용합니다.

예

다음 코드는 id="intro"인

요소의 innerHTML을 가져옵니다.

<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>

로그인 후 복사

출력 결과:

DOM 속성 멤버와 문서 흐름을 완전히 마스터하세요.

위 예에서 getElementById는 메소드이고 innerHTML은 속성입니다.

innerHTML 속성은 및 를 포함한 모든 HTML 요소를 가져오거나 변경하는 데 사용할 수 있습니다.

nodeName 속성

nodeName 속성은 노드의 이름을 지정합니다.

nodeName은 읽기 전용입니다.

요소 노드의 nodeName은 라벨 이름과 동일합니다.
속성 노드의 nodeName은 속성 이름과 동일합니다.
텍스트의 nodeName node는 항상 문서의 #text
입니다. nodeName은 항상 #document

입니다. 참고: nodeName에는 항상 HTML 요소의 대문자 태그 이름이 포함됩니다.

nodeValue 속성

nodeValue 속성은 노드의 값을 지정합니다.

요소 노드의 nodeValue가 정의되지 않았거나 null입니다
텍스트 노드의 nodeValue가 텍스트 자체입니다
속성 노드의 nodeValue가 속성 값입니다

값 가져오기

예는 다음과 같습니다.

태그의 텍스트 노드 값 검색:

인스턴스

<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>

로그인 후 복사

출력 결과:

DOM 속성 멤버와 문서 흐름을 완전히 마스터하세요.