Visual Studio code dom 활용한 예제 - 1

1. 본문내용

    <h2>오늘은 4월 11일 화요일</h2>
    <h3>오늘은 35일</h3>
    <div id="id1"></div>
    <div id="id2"></div>

 

 

2. 예제

• 1. button을 클릭했을 때 fun1함수를 호출하고 h2태그의 innerText값을 콘솔에 출력 
• 2. button을 클릭했을 때 fun2함수를 호출하고 h3태그의 innerText값을 alert으로 출력
• 3. button을 클릭했을 때 fun3함수를 호출하고 h2, h3태그의 innerText값을 id1이 적용된 div의 innerText값으로 적용하여 화면에 보이게
• 4. button을 클릭했을 때 fun4함수를 호출하고 id2가 적용된 div에 아래 ex id가 적용된 태그처럼 ul, li를 이용하여 1부터 10까지 출력하는 내용을 만들기

 

2 - 1 1번 예제

<button class="button_01" onclick="fun1()">버튼1</button>

    const fun1 = () => {
      const h2all = document.getElementsByTagName("h2");
      console.log(h2all[0].innerText);
    };

버튼1번을 누르면 fun1() 메소드를 이용해서 dom을 이용해 h2all에 담고 innerText로 출력했다.

 

 

 

2 - 2 2번 예제

<button class="button_02" onclick="fun2()">버튼2</button>

    const fun2 = () => {
      const h3all = document.getElementsByTagName("h3");
      alert(h3all[0].innerHTML);
    };

버튼2번을 누르면 fun2() 메소드를 이용해서 dom을 이용해 h3all에 담고 alert로 출력했다.

 

 

 

2 - 3 3번 예제

<button class="button_03" onclick="fun3()">버튼3</button>

    const fun3 = () => {
      const h2i = document.getElementsByTagName("h2")[0].innerText;
      const h3i = document.getElementsByTagName("h3")[0].innerText;
      const div1 = document.getElementById("id1");
      div1.innerText = h2i + h3i;
    };

      #id1 {
        background-color: yellow;
        color: violet;
      }

버튼3번을 누르면 fun3() 메소드를 이용해서 dom을 이용해 각각 h2i , h3i에 담고 div1의 값을 수정했다.

 

 

2 - 4 4번 예제

<button class="button_04" onclick="fun4()">버튼4</button>

1번

      const div = document.getElementById("id2");
        const div2 = document.querySelector("#id2");
        let ul = "<ul>";
        for (let i = 1; i <= 100; i++) {
          ul += "<li>" + i + "</li>";
        }
        ul += "</ul>";
        div.innerHTML = ul;
      };

2번

    const fun4 = () => {
      const div = document.getElementById("id2");
      const ul = document.createElement("ul");
      console.log(ul);
      // 특정 요소에 자식 요소로 추가하기
      div.appendChild(ul);

      for (let i = 1; i <= 10; i++) {
        // li 태그 생성
        const li = document.createElement("li");
        // li 시작 종료 태그 사이에 i로 만들어진 숫자 텍스트 추가
        li.appendChild(document.createTextNode(i));
        // 만들어진 li를 ul의 자식 태그로 추가
        ul.appendChild(li);
      }
    };

javascript method를 활용하여 풀이하였다.