문서

문서 개체는 현재 페이지를 나타냅니다. HTML은 브라우저에서 DOM 형태의 트리 구조로 표현되므로 문서 객체는 전체 DOM 트리의 루트 노드입니다.

문서의 제목 속성은 HTML 문서의 <title>xxx</title>에서 읽혀지지만 동적으로 변경할 수 있습니다.

<html>
<head>
    <script>
        'use strict';
        document.title = '努力学习JavaScript!';
    </script>
</head>
<body>
</body>
</html>

브라우저 창의 변경 사항을 관찰하세요. 제목.

DOM 트리에서 노드를 찾으려면 문서 개체에서 검색을 시작해야 합니다. 가장 일반적으로 사용되는 검색은 ID와 태그 이름을 기반으로 합니다.

먼저 HTML 데이터를 준비합니다.

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
</dl>

문서 객체에서 제공하는 getElementById() 및 getElementsByTagName()을 사용하여 ID별로 DOM 노드를 가져오고 태그별로 DOM 노드 그룹을 가져올 수 있습니다. 이름:

'use strict';
var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i, s, menu, drinks;
menu = document.getElementById('drink-menu');
menu.tagName; // 'DL'
drinks = document.getElementsByTagName('dt');
s = '提供的饮料有:';
for (i=0; i<drinks.length; i++) {
    s = s + drinks[i].innerHTML + ',';
}
alert(s);

모카

핫 모카 커피

요거트

베이징 올드 요거트

주스

갓 짜낸 사과 주스

<html>
<head>
    <script>
        'use strict';
        var menu = document.getElementById('drink-menu');
        var drinks = document.getElementsByTagName('dt');
        var i, s, menu, drinks;
        menu = document.getElementById('drink-menu');
        menu.tagName; // 'DL'
        drinks = document.getElementsByTagName('dt');
        s = '提供的饮料有:';
        for (i=0; i<drinks.length; i++) {
            s = s + drinks[i].innerHTML + ',';
        }
        alert(s);
    </script>
</head>
<body>
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
    <dt>摩卡</dt>
    <dd>热摩卡咖啡</dd>
    <dt>酸奶</dt>
    <dd>北京老酸奶</dd>
    <dt>果汁</dt>
    <dd>鲜榨苹果汁</dd>
</dl>
</body>
</html>

지속적인 학습

새로운 파일

<html> <head> <script> 'use strict'; var menu = document.getElementById('drink-menu'); var drinks = document.getElementsByTagName('dt'); var i, s, menu, drinks; menu = document.getElementById('drink-menu'); menu.tagName; // 'DL' drinks = document.getElementsByTagName('dt'); s = '提供的饮料有:'; for (i=0; i<drinks.length; i++) { s = s + drinks[i].innerHTML + ','; } alert(s); </script> </head> <body> <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;"> <dt>摩卡</dt> <dd>热摩卡咖啡</dd> <dt>酸奶</dt> <dd>北京老酸奶</dd> <dt>果汁</dt> <dd>鲜榨苹果汁</dd> </dl> </body> </html>

제출하다 코드 재설정

자동운전