HTML의 외부 파일에서와 마찬가지로 마크업 구성은 스타일, 형식 및 동작과 별개입니다. JavaScript를 사용하면 요소나 텍스트의 스타일을 확실히 변경할 수 있지만 마크업이 배치되는 방식의 구성을 실제로 변경하는 것이 더 흥미롭습니다.
마크업은 조직과 프레임워크만 제공하며 성공을 향한 길에 있다는 점을 기억하세요. 조금 더 나아가면 브라우저가 어떻게 모든 텍스트 구성을 가져와 매우 흥미로운 것, 즉 각각 변경, 추가 또는 제거할 수 있는 개체 집합으로 바꾸는지 알 수 있습니다.
텍스트 마크업의 장점
웹 브라우저에 대해 논의하기 전에 왜 일반 텍스트가 HTML 저장을 위한 최선의 선택인지 생각해 보는 것이 좋습니다(자세한 내용은 마크업에 대한 다른 아이디어 참조). 장단점에 관계없이 페이지를 볼 때마다 HTML이 네트워크를 통해 웹 브라우저로 전송된다는 점을 기억하세요(간결함을 위해 캐시 등은 고려되지 않음). 실제로 텍스트를 전달하는 데 이보다 더 효율적인 방법은 없습니다. 바이너리 개체, 페이지의 그래픽 표현, 재구성된 마크업 블록 등은 모두 일반 텍스트 파일보다 네트워크를 통해 전달하기가 더 어렵습니다.
또한 브라우저도 영광을 더합니다. 오늘날의 브라우저에서는 사용자가 텍스트 크기 변경, 이미지 크기 조정, 페이지의 CSS 또는 JavaScript 다운로드(대부분의 경우) 등을 수행할 수 있습니다. 이는 페이지의 모든 종류의 그래픽 표현을 브라우저로 보내는 것을 완전히 불가능하게 합니다. 그러나 브라우저는 해당 작업을 처리하기 위해 브라우저를 신뢰하는 대신 브라우저의 페이지에 처리를 적용할 수 있도록 원시 HTML이 필요합니다. 마찬가지로 CSS를 JavaScript에서, CSS를 HTML 마크업에서 분리하려면 쉽게 분리할 수 있는 형식이 필요합니다. 다시 한 번 말씀드리지만, 텍스트 파일이 이 작업에 가장 적합한 방법입니다.
마지막으로, 새로운 표준(예: HTML 4.01, XHTML 1.0 및 1.1)은 콘텐츠(페이지의 데이터)를 프리젠테이션 및 스타일(일반적으로 CSS에 의해 적용됨)과 분리할 것을 약속한다는 점을 기억하십시오. 프로그래머가 CSS에서 HTML을 분리한 다음 브라우저가 페이지의 다양한 부분을 서로 연결하는 페이지 표현을 검색하도록 강제한다면 이러한 표준의 대부분의 이점을 잃게 됩니다. 브라우저에 도착할 때 이러한 부분을 별도로 유지하면 브라우저가 서버에서 HTML을 가져올 때 전례 없는 유연성을 얻을 수 있습니다.
마크업 일반 텍스트 편집에 대한 추가 생각
: 옳은가, 그른가?
일반 텍스트는 마크업을 저장하는 데 적합하지만 마크업 편집에는 적합하지 않습니다. 웹 페이지 마크업을 조작하기 위해 Macromedia DreamWeaver나 더욱 강력한 Microsoft® FrontPage®와 같은 IDE를 사용하는 것이 인기가 있습니다. 이러한 환경은 특히 CSS와 JavaScript를 사용할 때 웹 페이지 생성을 위한 바로 가기와 도움말을 제공하는 경우가 많습니다. 둘 다 실제 페이지 마크업이 아닌 파일에서 가져옵니다. 많은 사람들이 여전히 오래된 메모장이나 vi를 선호한다는 것은 중요하지 않습니다(저도 그 중 하나라는 것을 인정합니다). 어느 쪽이든 최종 결과는 마크업으로 가득 찬 텍스트 파일입니다.
웹상의 텍스트: 좋은 점은
텍스트가 웹을 통해 수천 번 전송되는 HTML이나 CSS와 같은 문서에 가장 적합한 매체라는 것입니다. 브라우저가 텍스트를 표현하기 어렵다는 것은 특히 사용자가 볼 수 있도록 텍스트를 시각적인 그래픽 페이지로 변환하는 것을 의미합니다. 이는 브라우저가 실제로 웹 브라우저에서 페이지를 검색하는 방법과 관련이 없으며 이 경우 텍스트가 여전히 최선의 선택입니다.
텍스트 마크업의 단점
텍스트 마크업이 디자이너와 페이지 작성자에게 놀라운 이점을 제공하는 것처럼 브라우저에도 상당히 놀라운 단점을 가지고 있습니다. 특히, 브라우저가 텍스트 마크업을 사용자에게 시각적으로 직접 표현하는 것은 어렵습니다(자세한 내용은 마크업에 대한 다른 아이디어 참조). 다음과 같은 일반적인 브라우저 작업을 고려하십시오.
·요소 유형, 클래스, ID 및 HTML 문서에서의 위치를 기반으로 마크업에 CSS 스타일(일반적으로 외부 파일의 여러 스타일 시트에서)을 적용합니다.
·JavaScript 코드(보통 외부 파일에 있음)를 기반으로 HTML 문서의 다양한 부분에 스타일과 서식을 적용합니다.
·JavaScript 코드를 기반으로 양식 필드 값을 변경합니다.
·JavaScript 코드를 기반으로 이미지 뒤집기, 이미지 스와핑 등의 시각적 효과를 지원합니다.
이러한 작업을 코딩하는 데에는 복잡성이 있는 것이 아니라 그 안에 있는 모든 것이 매우 쉽습니다. 복잡성은 요청된 작업을 실제로 구현하는 브라우저에서 발생합니다. 예를 들어, center-text 클래스의 p 요소에 텍스트(text-align: center)를 입력하려는 경우와 같이 마크업이 텍스트로 저장된 경우 이를 달성하는 방법은 무엇입니까?
·텍스트에 인라인 스타일을 추가하시겠습니까?
·브라우저에서 HTML 텍스트에 스타일을 적용하고 콘텐츠를 중앙에 유지할까요?
·스타일이 지정되지 않은 HTML을 적용한 다음 나중에 서식을 적용하시겠습니까?
이러한 매우 어려운 문제로 인해 오늘날 브라우저를 작성하는 사람이 거의 없습니다. (브라우저를 작성한 사람이 진심으로 감사를 표해야 합니다.)
페이지 마크업을 가져오는 데는 텍스트가 가장 좋은 솔루션이지만 일반 텍스트가 브라우저의 HTML을 저장하는 좋은 방법은 아니라는 점에는 의심의 여지가 없습니다. 페이지 구조를 변경하는 JavaScript의 기능을 추가하면 상황이 좀 더 미묘해집니다. 브라우저는 수정된 구조를 디스크에 다시 작성해야 합니까? 문서의 최신 버전을 어떻게 유지할 수 있나요?
물론 문자가 답은 아닙니다. 수정하기도 어렵고, 스타일과 동작을 적용하기도 어렵고, 근본적으로 오늘날 웹 페이지의 동적 특성과도 거리가 멀습니다.
트리 보기에 의지하는
문제에 대한 대답(적어도 오늘날의 웹 브라우저가 선택한 대답)은 트리 구조를 사용하여 HTML을 표현하는 것입니다. 이 기사의 마크업을 나타내는 매우 간단하고 지루한 HTML 페이지인 목록 1을 참조하십시오.
목록 1.텍스트 마크업의
간단한 HTML 페이지<html>
<머리>
<title>나무, 나무, 어디서나</title>
</head>
<본문>
<h1>나무, 나무, 어디서나</h1>
<p><em>정말</em> 지루한 페이지에 오신 것을 환영합니다.</p>
<div>
곧 다시 오세요.
<img src="come-again.gif" />
</div>
</body>
</html>
브라우저는 페이지를 승인하고 그림 1과 같이 트리 구조로 변환합니다.
이 기사를 계속 진행하기 위해 조금 단순화했습니다. DOM 또는 XML 전문가는 웹 브라우저의 트리 구조에서 문서의 텍스트가 표시되고 분류되는 방식에 공백이 미치는 영향을 인식할 것입니다. 피상적인 이해는 상황을 모호하게 만들 뿐입니다. 따라서 공백의 영향을 파악하고 싶다면 그것이 최선의 방법입니다. 그렇지 않다면 계속해서 읽고 그것에 대해 생각하지 마십시오. 문제가 발생하면 필요한 모든 것을 알게 될 것입니다.
실제 트리 배경을 제외하고 가장 먼저 눈에 띄는 것은 트리의 모든 것이 가장 바깥쪽 HTML 포함 요소인 html 요소로 시작한다는 것입니다. 트리의 비유를 사용하면 이를 루트 요소라고 합니다. 그래서 이것이 트리의 최하위 수준임에도 불구하고 트리를 보고 분석할 때 저는 보통 이것부터 시작합니다. 작동한다면 전체 트리를 거꾸로 뒤집을 수 있지만 이는 트리 비유를 약간 확장시킵니다.
루트에서 흐르는 선은 서로 다른 라벨이 붙은 부분 간의 관계를 나타냅니다. head 및 body 요소는 html 루트 요소의 하위 요소입니다. title은 head의 하위 요소이고 "나무, 나무, 모든 곳"이라는 텍스트는 title의 하위 요소입니다. 브라우저가 그림 1과 유사한 구조를 얻을 때까지 전체 트리는 이러한 방식으로 구성됩니다.
몇 가지 추가 용어
트리 비유를 유지하기 위해 머리와 몸을 HTML의 분기라고 합니다. 그들은 자신의 자녀가 있기 때문에 가지라고 불립니다. 트리의 끝에 도달하면 "나무, 나무, 모든 곳" 및 "정말"과 같은 주요 텍스트에 도달하게 됩니다. 이러한 용어를 모두 기억할 필요는 없습니다. 특정 용어가 무엇을 의미하는지 알아내려고 할 때 트리 구조를 상상하는 것이 훨씬 쉽습니다.
개체 값
이제 몇 가지 기본 용어를 이해했으므로 요소 이름과 텍스트가 포함된 작은 직사각형에 집중할 차례입니다(그림 1). 각 직사각형은 객체입니다. 브라우저는 그 안에 있는 일부 텍스트 문제를 해결합니다. 객체를 사용하여 HTML 문서의 각 부분을 나타내면 쉽게 구성을 변경하고, 스타일을 적용하고, JavaScript가 문서에 액세스하도록 허용하는 등의 작업을 수행할 수 있습니다.
개체 유형 및 속성
표시자 가능한 각 유형에는 고유한 개체 유형이 있습니다. 예를 들어 HTML의 요소는 Element 객체 유형으로 표시됩니다. 문서의 텍스트는 텍스트 유형으로 표시되고, 속성은 속성 유형으로 표시됩니다.
따라서 웹 브라우저는 개체 모델을 사용하여 문서를 나타낼 수 있을 뿐만 아니라(따라서 정적 텍스트를 처리할 필요가 없음) 개체 유형을 사용하여 내용이 무엇인지 즉시 알 수 있습니다. HTML 문서는 그림 1과 같이 구문 분석되어 객체 컬렉션으로 변환되며, 꺾쇠 괄호 및 이스케이프 시퀀스(예: <에는 < 사용, >에는 > 사용)는 더 이상 문제가 되지 않습니다. 이렇게 하면 브라우저 작업이(적어도 입력 HTML을 구문 분석한 후에는) 훨씬 쉬워집니다. 어떤 것이 요소인지 속성인지 파악하고 해당 유형의 개체를 처리하는 방법을 결정하는 것은 쉽습니다.
개체를 사용하면 웹 브라우저에서 이러한 개체의 속성을 변경할 수 있습니다. 예를 들어, 각 요소 개체에는 상위 요소와 하위 요소 목록이 있습니다. 따라서 새 하위 요소나 텍스트를 추가하면 해당 요소의 하위 요소 목록에 새 하위 요소가 추가됩니다. 이러한 개체에는 스타일 속성도 있으므로 요소나 텍스트 세그먼트의 스타일을 빠르게 변경하는 것은 매우 간단합니다. 예를 들어, JavaScript를 사용하여 div의 높이를 변경하려면 다음과 같이 하십시오:
someDiv.style.height = "300px"
즉, 웹 브라우저에서는 객체를 사용하여 트리의 모양과 구조를 매우 쉽게 변경할 수 있습니다. 속성. 페이지를 텍스트로 표시하기 위해 브라우저가 내부적으로 수행해야 하는 복잡한 작업과 비교해 보면 속성이나 구조가 변경될 때마다 브라우저는 정적 파일을 다시 작성하고 구문 분석한 후 화면에 다시 표시해야 합니다. 객체를 사용하면 이 모든 것이 해결됩니다.
이제 잠시 시간을 내어 일부 HTML 문서를 확장하고 트리로 개요를 살펴보겠습니다. 이는 특이한 요청처럼 보일 수 있지만(특히 코드가 너무 적은 이와 같은 기사의 경우) 이러한 트리를 조작할 수 있으려면 해당 구조에 대해 잘 알고 있어야 합니다.
그 과정에서 이상한 점을 발견할 수도 있습니다. 예를 들어 다음을 고려하십시오.
속성은 어떻게 됩니까?
·요소(예: em 및 b)로 분할된 텍스트는 어떻습니까?
·적절하게 구조화되지 않은 HTML(예: 닫는 p 태그가 누락된 경우)은 어떻게 됩니까?
이러한 문제에 익숙해지면 다음 섹션을 더 잘 이해할 수 있습니다.
엄격함은 때로는 좋은 일입니다.
방금 언급한 연습을 시도하면 표시된 트리 보기에서 몇 가지 잠재적인 문제를 발견할 수 있습니다(그렇지 않다면 제 말을 믿으십시오!). 실제로 Listing 1과 그림 1에서 몇 가지 문제를 발견할 수 있습니다. 먼저 p 요소가 어떻게 분해되는지 살펴보세요. 일반 웹 개발자에게 "p 요소의 텍스트 내용은 무엇입니까?"라고 묻는다면 가장 일반적인 대답은 "정말 지루한 웹 페이지에 오신 것을 환영합니다."입니다. 이것을 그림 1과 비교해 보면 이 대답은 (논리적이긴 하지만) 전혀 정확하지 않다는 것을 알 수 있습니다.
실제로 p 요소에는 세 가지 하위 개체가 있지만 그 중 어느 것도 "정말 지루한 웹 페이지에 오신 것을 환영합니다."라는 완전한 텍스트를 포함하지 않습니다. "환영합니다" 및 "지루한 웹 페이지"와 같은 텍스트의 일부를 찾을 수 있지만 전부는 아닙니다. 이를 이해하려면 마크업의 모든 항목을 특정 유형의 개체로 변환해야 한다는 점을 기억하세요.
그리고 순서는 상관없습니다! 브라우저가 올바른 개체를 표시했지만 HTML에서 제공한 순서와 다른 순서로 표시한다면 사용자가 웹 브라우저에 어떻게 반응할지 상상할 수 있습니까? 단락이 페이지 제목과 기사 제목 사이에 끼어 있는데 문서를 직접 구성하는 방법이 아닌 경우 어떻게 해야 합니까? 분명히 브라우저는 요소와 텍스트의 순서를 유지해야 합니다.
이 예에서 p 요소는 세 가지 다른 부분으로 구성됩니다.
· em 요소 앞의 텍스트 · em 요소 자체 · em 요소 뒤의 텍스트
이 순서를 어지럽히면 텍스트의 잘못된 부분에 초점을 맞출 수 있습니다. 모든 것을 순서대로 유지하기 위해 p 요소에는 목록 1의 HTML에 표시된 순서대로 세 개의 하위 개체가 있습니다. 게다가 핵심 텍스트 "really"는 p의 하위 요소가 아니라 p의 하위 요소인 em의 하위 요소입니다.
이 개념을 이해하는 것이 매우 중요합니다. "정말" 텍스트가 다른 p 요소 텍스트와 함께 나타날 가능성이 높지만 여전히 em 요소의 직계 자식입니다. 다른 p 텍스트와는 다른 형식을 가질 수 있으며 다른 텍스트와 독립적으로 이동할 수 있습니다.
이를 염두에 두려면 목록 2와 3의 HTML 다이어그램을 작성하여 텍스트가 최종적으로 화면에 어떻게 나타나는지에 관계없이 텍스트에 올바른 상위 요소가 있는지 확인하십시오.
목록 2. 영리한 요소 중첩을 사용한 마크업
<html>
<머리>
<title>조금 까다롭습니다</title>
</head>
<본문>
<h1>주의를 <u>자세히</u> 기울이세요, 그렇죠?</h1>
<div>
<p>이 p는 실제로 <em>필요</em>는 아니지만
<span id="bold-text">구조 <i>및</i> 조직</span>
페이지를 따라가기가 더 쉽습니다.</p>
</div>
</body>
</html>
목록 3. 더욱 영리한 요소 중첩
<html>
<머리>
<title>더 까다로운 중첩, 여전히</title>
</head>
<본문>
<div id="본문">
<div id="내용">
<테이블>
<tr><th>단계</th><th>프로세스</th></tr>
<tr><td>1</td><td><em>루트 요소</em>를 알아보세요.</td></tr>
<tr><td>2</td><td><span id="code">헤드</span>를 먼저 처리하고,
보통 쉽거든요.</td></tr>
<tr><td>3</td><td><span id="code">본문</span>을 통해 작업하세요.
<em>시간을 가지세요</em>.</td></tr>
</table>
</div>
<div id="닫는 중">
이 링크는 활성화되어 있지 <em>않습니다</em>. 만약 그렇다면 답변은
<a href="answers.html"><img src="exercise.gif" /></a>에 따르면
하지만 <em>어쨌든 운동을 하세요!</em>
</div>
</div>
</body>
</html>
이 기사 끝에 있는 GIF 파일(그림 2의 strict-solution.gif 및 그림 3의tricier-solution.gif)에서 이러한 연습에 대한 답을 찾을 수 있습니다. 엿보지 말고 먼저 자동으로 대답하는 시간을 가져보세요. 이는 트리를 구성할 때 규칙이 얼마나 엄격한지 이해하는 데 도움이 되며 HTML과 해당 트리 구조를 마스터하는 데 실제로 도움이 됩니다.
속성은 어떻습니까?
속성으로 무엇을 해야 할지 알아내려고 할 때 몇 가지 문제에 직면하고 있습니까? 앞에서 언급했듯이 속성은 자체 개체 유형을 갖지만 실제로는 이를 표시하는 요소의 하위 요소가 아닙니다. 중첩된 요소와 텍스트는 동일한 속성 "레벨"에 있지 않습니다. 목록 2와 3의 연습 문제에 대한 답변 속성이 표시되지 않습니다.
속성은 실제로 브라우저에서 사용하는 개체 모델에 저장되지만 몇 가지 특별한 경우가 있습니다. 각 요소에는 하위 개체 목록과 별개로 사용 가능한 속성 목록이 있습니다. 따라서 div 요소에는 "id" 속성과 다른 속성 "class"를 포함하는 목록이 있을 수 있습니다.
요소 속성에는 고유한 이름이 있어야 합니다. 즉, 요소는 두 개의 "id" 또는 두 개의 "class" 속성을 가질 수 없습니다. 이렇게 하면 목록을 쉽게 유지하고 액세스할 수 있습니다. 다음 기사에서 볼 수 있듯이 간단히 getAttribute("id")와 같은 메소드를 호출하여 이름으로 속성 값을 가져올 수 있습니다. 유사한 메서드 호출을 사용하여 속성을 추가하거나 기존 속성 값을 설정(재설정)할 수도 있습니다.
속성 이름의 고유성으로 인해 이 목록이 하위 개체 목록과 다르다는 점을 지적할 가치가 있습니다. p 요소에는 여러 개의 em 요소가 있을 수 있으므로 하위 개체 목록에는 여러 중복 항목이 포함될 수 있습니다. 하위 목록과 속성 목록은 비슷하게 작동하지만 하나는 중복 항목(객체의 하위 항목)을 포함할 수 있지만 하나는 포함할 수 없습니다(요소 객체의 속성). 마지막으로 요소에만 속성이 있으므로 텍스트 개체에는 속성을 저장하기 위한 추가 목록이 없습니다.
지저분한 HTML
브라우저가 마크업을 트리 표현으로 변환하는 방법을 살펴보기 전에 살펴볼 만한 또 다른 주제, 즉 브라우저가 제대로 구성되지 않은 마크업을 처리하는 방법이 있습니다. Well-formed는 XML에서 널리 사용되는 용어이며 두 가지 기본 의미를 갖습니다.
·모든 여는 태그에는 일치하는 닫는 태그가 있습니다. 따라서 문서의 모든 <p>는 </p>와 일치하고, 모든 <div>는 </div>와 일치하는 식입니다.
가장 안쪽 시작 태그는 가장 안쪽 끝 태그와 일치하고, 다음으로 가장 안쪽 시작 태그는 다음 가장 안쪽 끝 태그와 일치하는 식입니다. 따라서 <b><i>굵게 및 기울임꼴</b></i>은 가장 안쪽 여는 태그 <i>가 가장 안쪽 닫는 태그 <b>와 제대로 일치하지 않기 때문에 불법입니다. 올바른 형식으로 만들려면 여는 태그 순서나 닫는 태그 순서를 바꾸세요. (둘 다 전환해도 문제는 계속 발생합니다).
이 두 가지 규칙을 자세히 살펴보세요. 이 두 가지 규칙은 문서 구성을 단순화할 뿐만 아니라 불확실성도 제거합니다. 굵은 글씨를 먼저 적용한 다음 이탤릭체를 적용해야 합니까? 아니면 그 반대일까요? 이러한 순서와 불확실성이 큰 문제로 보이지 않는다면 CSS는 규칙이 다른 규칙을 재정의할 수 있도록 허용한다는 점을 명심하세요. 예를 들어 b 요소의 텍스트가 i 요소의 글꼴과 다른 글꼴을 갖는 경우 서식이 적용되는 순서가 변경됩니다. 따라서 HTML의 올바른 형식이 중요한 역할을 합니다.
브라우저가 형식이 잘못된 문서를 받으면 최선을 다할 것입니다. 결과 트리 구조는 기껏해야 작성자가 의도한 원본 페이지와 유사하며 최악의 경우 인식할 수 없습니다. 브라우저에 페이지를 로드했는데 완전히 예상치 못한 결과를 본 적이 있다면 아마도 브라우저 결과를 보고 구조가 어떻게 되어야 할지 추측하고 좌절감을 느끼며 작업을 계속했을 것입니다. 물론 이 문제를 해결하는 것은 매우 간단합니다. 문서의 형식이 올바른지 확인하세요! 표준화된 HTML을 작성하는 방법을 잘 모르는 경우 리소스에 문의하여 도움을 받으세요.
DOM 소개
지금까지 브라우저가 웹 페이지를 객체 표현으로 변환한다는 사실을 알고 있으며 객체 표현이 DOM 트리라고 추측했을 수도 있습니다. DOM은 문서 객체 모델(Document Object Model)을 의미하며 W3C(World Wide Web Consortium)에서 제공하는 사양입니다(참고자료에서 일부 DOM 관련 링크를 볼 수 있습니다).
그러나 더 중요한 것은 DOM이 객체의 유형과 속성을 정의하여 브라우저가 마크업을 나타낼 수 있도록 한다는 것입니다. (이 시리즈의 다음 기사에서는 JavaScript 및 Ajax 코드에서 DOM을 사용하기 위한 사양을 다룹니다.)
문서 객체
먼저 객체 모델 자체에 액세스해야 합니다. 웹 페이지에서 실행되는 JavaScript 코드에서 내장 문서 변수를 사용하는 것은 매우 쉽습니다.
var domTree = document
물론 이 코드 자체는 쓸모가 없지만 모든 웹 페이지에서 브라우저는 JavaScript 코드에서 객체를 사용할 수 있는 문서를 만들고 객체 표현 마크업의 전체 트리를 보여줍니다(그림 1).
각 항목은 노드입니다
. 분명히 문서 개체가 중요하지만 이는 시작에 불과합니다. 더 진행하기 전에 배워야 할 또 다른 용어가 있습니다: 노드. 마크업의 모든 부분이 객체로 표현된다는 것을 이미 알고 있지만 이는 단순한 객체가 아니라 특정 유형의 객체인 DOM 노드입니다. 텍스트, 요소 및 속성과 같은 보다 구체적인 유형은 모두 이 기본 노드 유형에서 상속됩니다. 따라서 텍스트 노드, 요소 노드 및 속성 노드가 있을 수 있습니다.
이미 JavaScript 프로그래밍 경험이 많다면 아마도 이미 DOM 코드로 작업하고 있을 것입니다. 지금까지 이 Ajax 시리즈를 따라왔다면 한동안 DOM 코드 작업을 해왔을 것입니다. 예를 들어, var number = document.getElementById("phone").value; 코드 줄은 DOM을 사용하여 특정 요소를 찾은 다음 해당 요소의 값(이 경우 양식 필드)을 검색합니다. 따라서 여러분이 깨닫지 못하더라도 JavaScript 코드에 문서를 입력할 때마다 DOM을 사용하고 있는 것입니다.
이미 배운 용어를 좀 더 자세히 설명하자면 DOM 트리는 객체의 트리이지만, 더 구체적으로는 노드 객체의 트리입니다. Ajax 애플리케이션 또는 기타 JavaScript에서는 이러한 노드를 사용하여 요소 및 해당 내용 제거, 특정 텍스트 강조 표시 또는 새 이미지 요소 추가와 같은 효과를 생성할 수 있습니다. 이러한 효과는 모두 클라이언트 측(웹 브라우저에서 실행되는 코드)에서 발생하므로 이러한 효과는 서버와 통신하지 않고 즉시 발생합니다. 최종 결과는 요청이 서버로 전달되고 응답이 해석되는 동안 긴 일시 중지 없이 웹 페이지의 콘텐츠가 변경되기 때문에 애플리케이션의 반응성이 더 좋아지는 경우가 많습니다.
대부분의 프로그래밍 언어에서는 각 노드 유형의 실제 개체 이름을 배우고, 사용 가능한 속성을 배우고, 유형과 캐스트를 파악해야 하지만 JavaScript에서는 이것이 필요하지 않습니다. 변수를 생성하고 원하는 개체에 할당하면 됩니다(이미 본 것처럼).
var domTree = document;
varphoneNumberElement = document.getElementById("phone");
varphoneNumber =phoneNumberElement.value;
유형이 없으며 JavaScript는 필요에 따라 변수를 생성하고 올바른 유형을 할당합니다. 결과적으로 JavaScript에서 DOM을 사용하는 작업은 간단해집니다(향후 기사에서는 XML과 관련된 DOM에 대해 집중적으로 다루게 될 것이며 이는 훨씬 더 독창적이 될 것입니다).
마지막
으로여기서 약간의 긴장감을 말씀드리고 싶습니다. 분명히 이것은 DOM에 대한 완전한 설명이 아니며 실제로 이 기사는 DOM에 대한 소개일 뿐입니다. DOM에는 제가 오늘 소개한 것보다 훨씬 더 많은 것들이 있습니다!
이 시리즈의 다음 기사에서는 이러한 아이디어를 확장하고 JavaScript에서 DOM을 사용하여 웹 페이지를 업데이트하고, HTML을 빠르게 변경하고, 사용자를 위한 보다 상호 작용적인 경험을 만드는 방법을 자세히 알아볼 것입니다. Ajax 요청에서 XML을 사용하는 방법을 다루는 이후 기사에서 다시 DOM에 대해 다루겠습니다. 따라서 Ajax 애플리케이션의 주요 부분인 DOM에 익숙해지십시오.
이 시점에서 DOM 트리를 이동하는 방법, 요소와 텍스트의 값을 가져오는 방법, 노드 목록을 반복하는 방법 등을 자세히 설명하는 것처럼 DOM을 깊이 이해하는 것은 매우 간단합니다. DOM이 코드에 관한 것이라는 인상을 받았지만 사실은 그렇지 않습니다.
다음 기사를 읽기 전에 트리 구조에 대해 생각해보고 웹 브라우저가 HTML을 마크업의 트리 보기로 변환하는 방법을 알아보기 위해 자신만의 HTML을 사용해 보십시오. 또한 DOM 트리의 구성에 대해 생각하고 이 기사에 소개된 특수한 경우인 속성, 요소가 혼합된 텍스트, 텍스트 콘텐츠가 없는 요소(예: img 요소)를 통해 이를 연습해 보세요.
이러한 개념을 확실하게 이해하고 JavaScript 및 DOM(다음 기사)의 구문을 배우면 응답이 훨씬 쉬워집니다.
그리고 샘플 코드와 함께 목록 2와 3에 대한 답변이 있다는 것을 잊지 마세요!