JS로 텍스트 값을 바꾸는 2가지 방법

2020-04-01

⏱ 6 min.

jquery

오늘 면접을 한 곳 보고왔는데, 이 때 받은 손코딩 문제중에 하나를 기억하고자 남기려고 한다. 사실 코딩 테스트라고 하기엔 좀 쉬운 문제였는데, 긴장을 해서인지 이것조차 못풀고온게 찝찝해서 정리해본다.

<html>
  <head>
    <meta charset="UTF-8">
    <title>quiz1</title>
  </head>
  <body>
    이거슨 당신이 자바스크립트를 다뤄봤는지를 묻는 테스트입니다.<br>
    아래 문장에서 java를 javascript로 바꿔보시죠.<br>
    <p>
      당신이 공부하는 언어는 <span class="quiz-text">Java</span>입니까?
    </p>
    <button id="jqueryBtn" type="button" onclick="changeByjQuery()">Run by jQuery</button>
    <button id="jsBtn" type="button" onclick="changeByJS()">Run by JS</button>
  </body>
</html>

정확한 코드는 아니고 대충 비슷한 상황을 만들어봤다.
자바스크립트 코드를 이용해서 class가 할당된 html 텍스트 하나를 다른 텍스트로 변경해보는 문제였다. jQuery로 풀어도 되는줄 모르고 순수 자바스크립트로만 접근하다 결국 못풀었지만, 여기에 정리하는 방법은 jQuery를 쓰는것과 순수자바스크립트로 해결하는 것 두가지 모두 정리해보았다.

* 작동하는 코드가 실행되는 화면은 아래 code.pen으로 확인할 수 있다. *

jQuery 사용해서 해결

$("#jqueryBtn").click(function(){
   $(".quiz-text").text("Javascript");
   $(".quiz-text").css('color', 'blue');
});

id="jqueryBtn"이 클릭되면 함수가 작동되도록 비동기로 작성한 코드이다. element 셀렉트를 jQuery($)를 이용하기만 하면 된다. 심플하기도 하고, 직관적이어서 별로 설명이 필요없다.
* 작동하는 코드가 실행되는 화면은 아래 code.pen으로 확인할 수 있다. *

순수 자바스크립트로 해결

jQuery를 사용하면 저렇게 쉽게 풀리는 문제였지만, 멍청하게도 jquery 라이브러리를 호출한 코드가 안보인다는 이유로 순수 자바스크립트로 접근했다. 그런데 document.getElementById()외엔 생각나지 않아서 결국 못쓰고 나왔다. 문제 속 텍스트는 class로만 명시되어 있었고 id가 명시되지 않았었다. 그래서 StackOverflow에서 찾아봤다. 순수자바스크립트로 풀수 있는 방법을..

StackOverflow에서 찾은 보고 좀 당황했었다.. 그냥 찍기라도 쓸걸 그랬나 싶을만큼…ㅋㅋㅋ document.getElementsByClassName()을 하면 element를 잡을 수 있었던 것이다… (젠장)

function changeByJS() {
   let x = document.getElementsByClassName("quiz-text")[0];
   x.innerText="Javascript"; 
   x.style.color="red";
}

여기서 특이했던건 element를 선택할 때 getElement가 아니라 getElements로 작성한것이다. 그리고 마지막에 [0]을 붙인건데, StackOverflow에서 답변한 사람의 의견을 해석하자면, id처럼 단일요소가 아닌 다중요소가 될 수 있는 class를 선택하는 것이므로 Element가 아니라 Elements이라고 한다. "quiz-text"의 이름을 갖는 클래스중 몇번째 클래스를 의미하는건지 명시하기 위해 배열처럼 [0]을 선언한 것이다.

code.pen으로 작성한 코드. 버튼을 클릭하면 각각의 방법으로 단어를 변경한다.

See the Pen YzXgOBe by DevAndy (@youngjinmo) on CodePen.

참고문서 : Changing content os class using Javascript

DevJavaScript

jQuery 사용해서 해결

순수 자바스크립트로 해결