예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.3~11.4

11.3 HTML 요소 내용과 속성

11.3.1 요소 내용 가져오기

  자바스크립트에서 HTML 요소의 내용을 가져오는 데는 innerHTML과 innerText 프로퍼티를 이용한다. 먼저 innerHTML을 이용해서 목록 <ul> 요소의 내용을 가져오는 다음의 예를 살펴보자.

예제 11-10. innerHTML로 요소의 내용 가져오기

get_html.html

코드 원문

<p id="p1">
    <span style="color:red">안녕</span>
</p>
<script>
    const x = document.getElementById("p1");
    alert(x.innerHTML)
</script>

예제 11-10. innerHTML로 요소의 내용 가져오기

get_html.html

코드 원문

<p id="p1">
    <span style="color:red">안녕</span>
</p>
<script>
    const x = document.getElementById("p1");
    alert(x.innerHTML)
    // x.innerHTML은 아이디 p1의 내용(HTML 코드 포함)을 가져온다.
    따라서 alert(x.innerHTML)은 그림 11-11에서와 같이 HTML 코드가
    모두 포함된 요소의 내용을 알림창에 출력한다. */
</script>

 

이번에는 앞 예제 11-10에서 사용된 innerHTML 속성 대신 innerText를 사용해서 HTML 요소의 내용을 가져온다.

예제 11-11. innerText로 요소의 내용 가져오기

get_text.html

코드 원문

<p id="p1">
    <span style="color:red">안녕</span>
</p>
<script>
    const x = document.getElementById("p1");
    alert(x.innerText);
</script>

예제 11-11. innerText로 요소의 내용 가져오기

get_text.html

코드 원문

<p id="p1">
    <span style="color:red">안녕</span>
</p>
<script>
    const x = document.getElementById("p1");
    alert(x.innerText);
    /* x.innerText는 아이디 p1 요소의 내용에서 순수한 텍스트만 가져온다. */
</script>

 

11.3.2 요소 내용 결정하기

  자바스크립트에서 HTML 요소의 내용을 설정하는 데에도 앞에서 사용한 DOM의 innerHTML과 inner Text 프로퍼티를 이용한다.

  다음 예제를 통해서 DOM의 innerHTML과 innerText 프로퍼티를 이용해서 HTML 요소의 내용을 설정하는 방법을 익혀보자.

예제 11-12. HTML 요소의 내용 설정하기

set_html.html

코드 원문

<ul>
    <li>항목1</li>
    <li>항목2</li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    const x = document.querySelectorAll("li");
    x[2].innerHTML = "<span style='color:red'>텍스트</span>";
    x[3].innerHTML = "텍스트2";
    x[4].innerHTML = "텍스트3";
</script>

예제 11-12. HTML 요소의 내용 설정하기

set_html.html

코드 원문

<ul>
    <li>항목1</li>
    <li>항목2</li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script>
    const x = document.querySelectorAll("li");
    // querySelectorAll()를 사용해서 요소 li를 선택한다.
    x[2].innerHTML = "<span style='color:red'>텍스트</span>";
    /* "<span style='color:red'>텍스트</span>" 코드를 이용해서
    x[2]의 요소에 텍스트1를 빨간색으로 변경하는 내용을 설정한다. */
    x[3].innerHTML = "텍스트2";
    /* x[1]에 요소에 "텍스트2"의 요소를 집어넣는다. */ 
    x[4].innerHTML = "텍스트3";
</script>

 

11.3.3 요소 속성 변경하기

  DOM에서 HTML 객체의 프로퍼티에 값을 설정함으로써 HTML 요소의 속성(attribute) 값을 변경할 수 있다.

  다음 예제에서는 이미지의 src, width, height 속성 값을 변경하기 위해서 DOM의 src, width, height 프로퍼티를 이용하고 있다.

예제 11-13. 이미지의 src, width, height 속성 값 변경하기

change_image.html

코드 원문

<img id="image" src="./img/fish1.jpg"><br>
<button type="button" onclick="changeImage()">이미지 변경</button>
<button type="button" onclick="changeSize()">크기 변경</button>
<script>
    function changeImage() {
        document.getElementById("image").src = "./img/image1.png";
    }
    function changeSize() {
        document.getElementById("image").width = "50";
        document.getElementById("image").height = "50";
    }
</script>

예제 11-13. 이미지의 src, width, height 속성 값 변경하기

change_image.html

코드 원문

<img id="image" src="./img/fish1.jpg"><br>
<button type="button" onclick="changeImage()">이미지 변경</button>
/* html <button> 태그를 설정한다. button을 누르면 changeImage()
메서드가 실행된다. 버튼 안에는 이미지 변경이라는 텍스트가 들어간다. */
<button type="button" onclick="changeSize()">크기 변경</button>
/* html <button> 태그를 설정한다. buttton을 누르면 changeImage()
메서드가 실행된다. 버튼 안에는 크기 변경이라는 텍스트가 들어간다. */
<script>
    function changeImage() {
    // 메서드 changeImage() 선언
        document.getElementById("image").src = "./img/image1.png";
        // getElementById로 가게 id image 입력 상대경로로 ./img/image1.png 설정
    }
    function changeSize() {
    // 메서드 changeSize() 선언
        document.getElementById("image").width = "50";
        document.getElementById("image").height = "50";
    }
</script>

 

11.3.4 요소 CSS 변경하기

  DOM에서 자바스크립트는 HTML 요소의 CSS 스타일을 적용할 수 있다. 다음 예제에서는 <p> 요소의 배경 색상, 텍스트 색상, 경계선을 설정하기 위해 DOM의 color, backgroundColor, border 프로퍼티가 적용된다.

예제 11-14. CSS 스타일 변경하기

change_css.html

코드 원문

<p id="p1">안녕</p>
<script>
    const x = document.getElementById("p1");
    x.style.color = "red";
    x.style.backgroundColor = "yellow";
    x.style.border = "solid 5px blue";
</script>

예제 11-14. CSS 스타일 변경하기

change_css.html

코드 원문

<p id="p1">안녕</p>
<script>
    const x = document.getElementById("p1");
    /* getElementById() 메서드를 사용해서 id의 p1이 가리키는 요소 태그 <p>를 불려오고
    변수 x와 연결한다. */
    x.style.color = "red";
    // 요소 x의 스타일 color를 "red"로 지정한다.
    x.style.backgroundColor = "yellow";
    x.style.border = "solid 5px blue";
</script>

 

11.4 Document 객체의 프로퍼티

  DOM에서 제공하는 Document 객체의 프로퍼티를 이용하면 HTML 문서의 URL과 제목, 그리고 문서 내에 있는 이미지, 링크, 폼 등에 접근하여 정보를 얻거나 해당 요소에 값을 설정할 수 있다. Document 객체에서 많이 사용되는 프로퍼티를 표로 정리하면 다음과 같다.

Document 객체의 주요 프로퍼티
프로퍼티	설명
URL	HTML 문서의 URL을 반환
title	HTML 문서의 제목을 설정하거나 반환
forms	HTML 문서에서 모든 <form> 요소의 콜렉션을 반환
links	HTML 문서에서 모든 <link> 요소의 콜렉션을 반환
images	HTML 문서에서 모든 <img> 요소의 콜렉션을 반환

 

11.4.1 URL 프로퍼티

Document 객체의 URL 프로퍼티는 문서의 URL 주소를 반환한다.

예제 11-15. URL 프로퍼티로 URL 주소 가져오기

document_url.html

코드 원문

<p id="show"></p>
<script>
    document.getElementById("show").innerHTML = document.URL;
</script>

예제 11-15. URL 프로퍼티로 URL 주소 가져오기

document_url.html

코드 원문

<p id="show"></p>
<script>
    document.getElementById("show").innerHTML = document.URL;
    /* HTML 문서의 URL를 반환한다. id값이 show인 p 태그에 출력한다. */
</script>

 

11.4.2 title 프로퍼티

Document 객체의 title 프로퍼티는 문서의 제목을 설명하거나 가져오는데 사용된다.

예제 11-16. title 프로퍼티로 문서의 제목 가져오기

document_title1.html

코드 원문

<title>문서 제목</title>
<body>
<p id="show"></p>
<script>
    document.getElementById("show").innerHTML = document.title;
</script>
</body>

예제 11-16. title 프로퍼티로 문서의 제목 가져오기

document_title1.html

코드 분석

<title>문서 제목</title>
<body>
<p id="show"></p>
<script>
    document.getElementById("show").innerHTML = document.title;
    /* title 프로퍼티를 이용해서 문서의 제목을 가져온다. */
</script>
</body>

 

다음은 title 프로퍼티를 이용해서 HTML 문서의 제목을 설정했다.

예제 11-17. title 프로퍼티로 문서의 제목 설정하기

document_title2.html

코드 원문

<script>
    document.title="새로운 문서 제목";
</script>

document.title에 '새로운 문서 제목'을 설정하면 상단 탭 버튼에 HTML 문서의 제목을 '새로운 문서 제목'으로 변경할 수 있다.

 

11.4.3 forms 프로퍼티

  Document 객체의 forms 프로퍼티는 문서의 모든 <form> 요소들을 저장한 HTMLCollection 객체를 반환한다.

HTMLCollection 객체는 문서의 요소에 대한 정보를 배열과 유사한 형태로 담고 있으며 인덱스를 통해서 객체에 접근할 수 있다.

  다음 예제에서는 forms 프로퍼티를 이용해서 HTML 문서에 있는 <form> 요소의 아이디(id)를 가져온다.

예제 11-18. forms 프로퍼티로 <form> 요소의 아이디 가져오기

document_forms.html

코드 원문

<form id="form_id1">
    이름 : <input type="text" name="name"><br>
    <button>확인</button>
</form>
<form id="form_id2">
    이메일 : <input type="text" name="email"><br>
    <button>확인</button>
</form>
<p id="show"></p>
<script>
    const x = document.forms[0].id;
    document.getElementById("show").innerHTML = x;
</script>

예제 11-18. forms 프로퍼티로 <form> 요소의 아이디 가져오기

document_forms.html

코드 분석

<form id="form_id1">
    이름 : <input type="text" name="name"><br>
    <button>확인</button>
</form>
<form id="form_id2">
    이메일 : <input type="text" name="email"><br>
    <button>확인</button>
</form>
<p id="show"></p>
<script>
    const x = document.forms[0].id;
    /* document.forms[0]은 <form> 요소를 선택한다. 따라서 document.forms[0].id는
    <form> 요소의 아이디(id)인 'form_id1'을 반환한다. */
    document.getElementById("show").innerHTML = x;
</script>

 

다음 예제에서는 forms 프로퍼티를 이용해서 <input> 요소에 사용자가 입력한 값을 가져온다.

예제 11-19. forms 프로퍼티로 <input> 요소 값 가져오기

document_forms2.html

코드 원문

<form name="form1">
    아이디 : <input type="text" name="id"><br>
    이름 : <input type=""text" name="name"><br>
    비밀번호 : <input type="password" name="pass"><br>
</form>
<button onclick="getInput()">확인</button>
<p id="show"></p>
<script>
    function getInput() {
        const x = document.forms["form1"];
        let text = "";
        for (let i=0; i<x.length; i++) {
            text += x.elements[i].value + "<br>";

        document.getElementById("show").innerHTML = text;
        }
    }
</script>

예제 11-19. forms 프로퍼티로 <input> 요소 값 가져오기

document_forms2.html

코드 원문

<form name="form1">
    아이디 : <input type="text" name="id"><br>
    /* <input> 태그 선언 텍스트 타입으로 입력 받는다. */
    이름 : <input type=""text" name="name"><br>
    비밀번호 : <input type="password" name="pass"><br>
</form>
<button onclick="getInput()">확인</button>
<p id="show"></p>
<script>
    function getInput() {
    /* 사용자 정의 함수 getInput()을 선언한다. */
        const x = document.forms["form1"];
        /* document.forms["forms1"]은 문서에서 'form1' 이름을 가진
        <form> 요소를 선택한다. */
        let text = "";
        for (let i=0; i<x.length; i++) {
            text += x.elements[i].value + "<br>";

        document.getElementById("show").innerHTML = text;
        }
    }
</script>

 

11.4.4 links 프로퍼티

  Document 객체의 links 프로퍼티는 문서에서 <a> 요소를 포함한 모든 링크 요소로 구성된 HTMLCollection 객체를 반환한다.

 

다음은 links 프로퍼티를 이용하여 HTML 문서 내 링크 요소의 개수를 파악하는 예이다.

예제 11-20. links 프로퍼티로 링크 요소의 갯수 알아보기

document_links.html

코드 원문

<ul>
    <li><a href="http://naver.com">네이버</a></li>
    <li><a href="https://daum.net">다음</a></li>
    <li><a href="https://google.com">구글</a></li>
</ul>
<p id="show"></p>
<script>
    const x = document.links.length;

    document.getElementById("show").innerHTML = "링크 수:" + x;
</script>

예제 11-20. links 프로퍼티로 링크 요소의 갯수 알아보기

document_links.html

코드 원문

<ul>
    <li><a href="http://naver.com">네이버</a></li>
    /* 네이버 글자와 링크 http://naver.com을 연결한다. */
    <li><a href="https://daum.net">다음</a></li>
    /* 다음 글자와 링크 https://daum.net을 연결한다. */
    <li><a href="https://google.com">구글</a></li>
    /* 구글 글자와 링크 https://google.com을 연결한다. */
</ul>
<p id="show"></p>
<script>
    const x = document.links.length;
    /* document.links는 웹 페이지 <a> 요소들의 콜렉션을 반환한다.
    document.links.length는 링크 요소의 개수를 나타낸다. */

    document.getElementById("show").innerHTML = "링크 수:" + x;
</script>

 

다음 예제에서는 links 프로퍼티를 이용해서 <a> 요소의 링크 주소, 즉 속성 href의 값을 가져온다.

예제 11-21. links 프로퍼티로 링크 요소의 갯수 알아보기

document_links2.html

코드 원문

<ul>
    <li><a href="https://naver.com">네이버</a></li>
    <li><a href="https://daum.net">다음</a></li>
    <li><a href="https://google.com">구글</a></li>
</ul>
<p id="show"></p>
<script>
    const link = document.links;
    let text = "";
    for (let i=0; i<link.length; i++)
        text += link[i].href + "<br>";
    document.getElementById("show").innerHTML = text;
</script>

예제 11-21. links 프로퍼티로 링크 요소의 갯수 알아보기

document_links2.html

코드 원문

<ul>
    <li><a href="https://naver.com">네이버</a></li>
    // 하이퍼링크 태그 선언
    <li><a href="https://daum.net">다음</a></li>
    <li><a href="https://google.com">구글</a></li>
</ul>
<p id="show"></p>
// p태그  선언 id값은 "show"
<script>
    const link = document.links;
    /* document 객체의 links 프로퍼티를 사용해서 <a> 요소의 링크 주소
    속성 href의 값을 가져온다. */
    let text = "";
    for (let i=0; i<link.length; i++)
        text += link[i].href + "<br>";
        // link[i].href는 문서에서 n번째 <a> 요소의 href 값이다.
    document.getElementById("show").innerHTML = text;
</script>

 

11.4.5 images 프로퍼티
  Document 객체의 images 프로퍼티는 문서에서 모든 <img> 요소의 콜렉션을 HTMLCollection 객체로 반환한다.

예제 11-22. images 프로퍼티로 속성 값 가져오기

document_images.html

코드 원문

<img src="./img/cat1.jpg" width="200">
<img src="./img/cat2.jpg" width="200">
<p id="show"></p>
<script>
    const image = document.images;
    document.getElementById("show").innerHTML = image[0].src;
</script>

예제 11-22. images 프로퍼티로 속성 값 가져오기

document_images.html

코드 원문

<img src="./img/cat1.jpg" width="200">
<img src="./img/cat2.jpg" width="200">
<p id="show"></p>
<script>
    const image = document.images;
    // document에서 images의 프로퍼티를 변수 image에 연결한다.
    document.getElementById("show").innerHTML = image[0].src;
    // image[0].src를 사용해서 image[0]의 속성 src 값을 반환한다.
</script>