DOM①

11069 단어 JavaScript

DOM이란?


DOM은 Docoment Object Model의 약자로, JavaScript에서 HTML 및 CSS 데이터를 가져오는 구조입니다.
예를 들어 ID=box 스타일을 변경할 때

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<title>test</title>
</head>
<body>
<div id="box">This is box</div>

<script type="text/javascript">
window.onload = function() {
    // idがboxの要素を取得する
    var box = document.getElementById('box');

    //取得した要素の背景を赤にする
    box.style.backgroundColor = 'red';
};
</script>

</body>

id명에서 요소 가져오기


구체적으로 말하면
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<title>test</title>
</head>
<body>
<div id="box">This is box</div>


<script type="text/javascript">
window.onload = function() {
    // ここで取得するboxは文字列でなくオブジェクト
    var box = document.getElementById('box');

    // cssを変更する
    box.style.backgroundColor = 'red';
};
</script>
</body>
중요한 것은 이곳에서 얻은 box이 대상이고 이 대상에서 얻은 요소를 조작할 수 있는 각종 기능이 가마우지이다.
위의 예에서 얻은 후에 css이 바뀌었기 때문에 최종적으로 HTML<div id="box">This is box</div>의 내용은 내선에서<div id="box" style="background-color: red;">This is box</div>로 바뀌었다.↓

지정한 요소 이름의 모든 요소 가져오기


기술 방법은 다음과 같다.
document.getElementsByTagName(要素名)
나는 실제로 사용한 예를 한 번 써 보겠다.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div>element 1</div>
<div>element 2</div>    

<script type="text/javascript">
window.onload = function() {
    // div要素をすべて取得する
    var elems = document.getElementsByTagName('div');

    // 1番目のdiv要素
    console.log(elems[0]);
    // 2番目のdiv要素
    console.log(elems[1]);
};
</script>
</body>

주의해야 할 것은 getElementsByTagName와 Elements의 병법은 복수 형식(ID일 때Element과 단수 형식)이다.
또한 HTML을 찾는 순서가 순서대로 나옵니다.
따라서 특정 순서를 호출할 때'배열'처럼 사용[0]의 표현은 첫 번째[0], 두 번째[1]였다.

유명에서 요소를 얻다


class 이름에서 요소를 가져오는 함수입니다.다음과 같이 기술하다.
document.getElementsByClassName(class名);
다음 예는class명에서box 요소를 얻은 예입니다.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<div class="box">div element 1</div>
<div class="box">div element 2</div>
<p class="box">p element 1</p>
<script type="text/javascript">
window.onload = function() {
    // class名がboxの要素をすべて取得
    var elems = document.getElementsByClassName('box');

    // class名がboxである1番目のdiv要素
    console.log(elems[0]);
    // class名がboxである2番目のdiv要素
    console.log(elems[1]);
    // class名がboxである1番目のp要素
    console.log(elems[2]);
};
</script>

</body>
↓ 콘솔 로그 결과
React 애플리케이션에서 보호 라우팅 설정 방법
JavaScript에서 추적을 사용하여 얼굴 테스트를 수행합니다.js

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage