브라우저에서의 자바스크립트 동작 알아보기.2

🍖 WELL-DONE Project/Javascript

브라우저에서의 자바스크립트 동작 알아보기.2

JJuice 2020. 12. 18. 13:50

바로 이전 포스트 브라우저에서의 자바스크립트 동작 알아보기.1에서

window 객체
document 객체
DOM과 DOM트리
DOM에서의 노드란 무엇이고 노드 종류와 관계
DOM에서의 노드 이동 / 노드 값에 접근해서 출려값을 알아보고 노드 값을 수정하는 프로퍼티

에 대해서 알아보았다.

이번 포스트에서는

새롭게 요소(element)노드를 자바스크립트에서 생성하는 법과 생성한 노드를 기존 요소노드에 추가해보기
요소(element)노드 삭제와 이동방법 알아보기
요소(element) 노드에 접근해 요소의 정규 속성(attribute)값을 자바스크립트로 추가해보기
자바스크립트 CSS 컨트롤 하는 방법
요소의 비정규 속성(attribue)값을 활용하는 방법
에 대해서 알아보자.

🔶예제 코드

<html>
<head>
    <title>JS 노드 접근해보기</title>
</head>
<body>
    <h1>캐릭터 알아보기</h1>
    <p>탱커 캐릭터</p>
    <ul id="tanker-list" >
        <li>라인하르트</li>
        <li>자리야</li>
        <li>시그마</li>
        <a href="https://bossanovajju.tistory.com/">탱커 캐릭터 보러가기</a>  
    </ul>
    <p>힐러 캐릭터</p>
    <ul id="healer-list" href="www.overwatch/healer">
        <li>아나</li>
        <li>메르시</li>
        <li>브리기테</li>
        <a href="https://bossanovajju.tistory.com/">힐러 캐릭터 보러가기</a>  
    </ul>
    <script src='index.js'></script>
</body>
</html>

1.새롭게 요소(element)노드를 자바스크립트에서 생성하는 법과 생성한 노드를 기존 요소 노드에 추가해보기

■ 요소 노드 생성하기

기존 #tanker-list에서 <li>레킹볼</li> 요소 노드를 추가하려고 한다.
물론 아래와 같이 기존 포스트에서 활용했던 innerHTML이나 outerHTML 프로퍼티를 활용해도 되지만 기존의 요소노드를 삭제하거나 수정하는 문제가 발생할 수 있다. 그래서 새로운 요소 노드를 추가할 경우 아래와 같이 createElement메소드를 사용해 주는게 좋다.

@createElement 메소드 사용해서 노드 생성

const newTanker = document.createElement('li');
newTanker.textContent = '레킹볼';

■ 요소 노드에 생성한 <li> 노드 추가하기

노드를 추가할 수 있는 메소드를 알아보자

prepend 메소드 : 해당 요소 가장 앞에 노드를 추가한다.
append 메소드 : 해당 요소 가장 뒤에 노드를 추가한다.
before 메소드 : 해당 요소 바로 앞에 노드를 추가한다
after 메소드 : 해당 요소 바로 뒤에 노드를 추가한다.

const tankerList = document.querySelector('#tanker-list');
tankerList.prepend(newTanker);

<ul id='tankerList'>의 자식 첫번째 <li>요소 노드가 추가된다.

아래 코드와 같이 여러개를 순서대로 요소 노드를 추가할 수 있는데 ⛔주의할점은 메소드 (요소1, 요소2) 를 넣어주면 실제 출력되는 순서는 요소2가 첫번째, 요소1이 두번째로 보여질거 같은데 실제로는 메소드 앞에 넣은 순서대로 출력이 된다.

const newTanker1 = document.createElement("li");
newTanker1.textContent = "레킹볼";
const newTanker2 = document.createElement("li");
newTanker2.textContent = "로드호그";


const tankerList = document.querySelector("#tanker-list");
tankerList.prepend(newTanker1,newTanker2);

그래서 위의 코드의 실제 출력된 모습은

레킹볼

로드호그

라인하르트 ..

순서로 보여지게 된다.

2.요소(element)노드 삭제와 이동방법 알아보기

■ 요소 노드 삭제하기

요소노드를 삭제하는 방법은 간단하다. remove메소드를 사용하면 된다.

const healerList = document.querySelector('#healer-list');
healerList.firstElementChild.remove(); //<li>아나</li>요소가 삭제된다.

■ 요소 노드 이동하기

요소 노드를 이동하는 방법은 앞에서 활용했던 append,prepend,before,afeter 메소드를 사용하면 된다.

const tankerList = document.querySelector('#tanker-list');
const healerList = document.querySelector('#healer-list');
tankerList.prepend(healerList.firstElementChild);

#healder-list의 첫번째 자식 <li>아나</li> 요소 노드가 삭제되면서 #tanker-list의 첫번째 자식으로 추가된다.

-아나

-라인하르트

3.요소(element) 노드에 접근해 요소의 정규 속성(attribute)값을 자바스크립트로 추가해보기

■ <a> 요소 노드의 href 속성값 가져오기

getAttribute 메소드 사용

const healerList = document.querySelector('#healer-list');
console.log(healerList.lastElementChild.getAttribute('href')); //outputs: https://bossanovajju.tistory.com/

위와 같이 요소의 표준 속성은 문제없이 가져올 수 있다.

그렇다면 비표준 속성이 있을 경우 어떨까?
아래와 같이 <ul> 요소 노드 안에 href="..." 맞지 않는 비표준 속성값이 있다고 가정해보자.

<ul id='healer-list' href='www.overwatch/healer'></ul>

똑같이 getAttribute 메소드를 이용해 값을 가져와 보자.

const healerList = document.querySelector('#healer-list');
console.log(healerList.getAttribute('href'); //outputs:www.overwatch/healer

여기서 나온 출력값처럼 요소 노드의 속성이 표준이든 비표준이든 getAttribute메소드를 사용하면 정상적으로 값이 출려되는 걸 알 수 있다.

■ <a> 요소 노드의 href 속성값 변경하기

setAttribute 메소드 사용

const tankerList = document.querySelector("#tanker-list");
tankerList.lastElementChild.setAttribute("href", "www.google.com");
console.log(tankerList.lastElementChild.getAttribute("href")); //outputs: www.google.com

4.자바스크립트 CSS 컨트롤 하는 방법

■ HTML 요소 노드 속성값으로 CSS style을 추가하는 방법

ex)내가 탱커 캐릭터 중 가장 잘 다루는 '자리야'인만큼 위의 HTML 예제에서 <li>자리야</li>부분의 백그라운드 색상을 pink로 텍스트를 굵게 변경하고 싶다.

const tankerList = document.querySelector('#tanker-list');
tankerList.children[1].style.backgroundColor = 'pink';
tankerList.children[1].style.fontWeight = 'bold';

위의 코드를 보면 해당노드요소:tankerList.children[1] . style프로퍼티:style . CSS속성:backgroundColor = 원하는 css속성값:pink 로 이루어져 있다.

⛔주의할점: style프로퍼티를 작성할때 기존의 background-color가 아닌 backgroundColor 처럼 카멜(Camel) 표기법으로 작성해야 한다.

자바스크립트에서 style프로퍼티를 이용해서 자유롭게 CSS를 컨트롤 할 수 있지만 조심해야 할 점은 아래와 같이 HTML 요소 노드 속성값으로 코드가 추가된다는 것이다. 간단한 CSS속성을 추가하는 건 모르겠지만 CSS코드가 복잡해진다면 HTML가독성 문제가 생길 수 있으니 조심해야 한다.

<li style="backgrond-color: pink; font-weight: bold;">
  자리야
</li>

■ className과 classList 프로퍼티를 사용하는 방법

앞에서 처럼 '자리야' 텍스트의 백그라운드 색상과 폰트 굵기를 변경하려고 한다.
원하는 스타일을 css에 class로 추가해주자.

.font-pinkBold {
    background-color: pink;
    font-weight : bold;
}

▷className 활용하기

const tankerList = document.querySelector('#tanker-list');
tankerList.children[1].className = 'font-pinkBold';

▷classList의 다양한 메소드 활용하기

classList.add('ex') : 해당 css 클래스를 추가할 수 있다.(여러개의 클래스도 가능)
classList.remove('ex') : 해당 css 클래스를 삭제한다.(여러개의 클래스도 가능)

classList.toggle('ex') : 해당 css 클래스가 있으면 제거하고 없으면 추가해준다.

const tankerList = document.querySelector('#tanker-list');
tankerList.children[1].classList.add('font-pinkBold');

요소(element) 노드 비표준 속성(attribute) 다루기

HTML에서 지원하는 요소 노드의 표준 속성이 아닌 사용자가 직접 입력한 속성과 속성값이 있다고 가정해보자. 아래의 예제를 통해 어떻게 다뤄야 하는지 알아보겠다.

🔶예제

예제img

여기 힌트를 보고 오버워치 캐릭터의 직업 카테고리가 무엇인지 맞춰보는 서비스가 있다고 가정하자.

<html>
<head>
  <title>JS 노드 접근해보기</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>오버워치 캐릭터 직업군 맞춰보기</h1>
    <p>
      특징: <b field="point"></b>
    </p>
    <p>
      궁극기: <b field="ultimate"></b>
    </p>
    <p>
        정답:직업군은 뭐죠?<b field="status"></b>
    </p>
  </div>
  <div>
    <button status="탱커">탱커</button>
    <button status="딜러">딜러</button>
    <button status="힐러">힐러</button>
  </div>
  <script src="index.js"></script>
</body>
</html>

/*style.css*/
[status] {
  margin: 10px;
  padding: 10px;
  color: white;
}

[status="탱커"] {
  background-color: indigo;
}

[status="딜러"] {
  background-color: magenta;
}

[status="힐러"] {

  background-color: green;
}

여기서 우리가 index.js에서 만들어야 할 기능은

1. 자바스크립트에서 힌트 정보가 담긴 데이터 obj를 하나 생성시킨다.

const dataObj = {
point: '스나이퍼 총',
ultimate: '나노강화제'
}

해당하는 요소 노드에 접근한 후생성된 obj의 속성키와 속성 값을 HTML에서 해당하는 요소 노드의 속성키와 속성값을 일치시켜 실제 화면에 보여지게 만든다.

const fields = document.querySelectorAll('[field]');
for(let fieldNode of fields) {
    const fieldAttribute = fieldNode.getAttribute('field');
    fieldNode.textContent = dataObj[fieldAttribute];
}

아래의 3개의 카테고리(탱커,딜러,지원가) button 이벤트리스너를 만들어 준 후.보여지는 힌트 내용을 보고 사용자 3개의 카테고리 중 하나를 클릭하면 '정답'란에 클릭된 버튼의 텍스트와 css스타일을 그대로 가져와 보여진다.

const buttons = document.querySelectorAll('[status]');
for(let buttonNode of buttons) {
  const buttonStatusAttribute = buttonNode.getAttribute('status');
  buttonNode.onclick = function () {
      fields[2].textContent = statusAttribute;
      fields[2].setAttribute('status', buttonStatusAttribute);
  }
}

여기서 status속성을 가진 버튼이 클릭 이벤트가 발생하면 fields[2].setAttribute('status',buttonStatusAttribute);는 실제적으로 <b field="status" 요소에 status="이벤트가 발생 된 해당 status값(탱커or딜러or힐러가 추가된다.

만약 '탱커'버튼을 클릭하게 된다면 실제적인 요소 노드 속성값이 <b class="" field="status" status="탱커">탱커</b>값이 되는 것이다.

//최종 index.js코드
const dataObj = {
  point: '스나이퍼 총',
  ultimate: '나노강화제'
}

const fields = document.querySelectorAll('[field]');
for(let fieldNode of fields) {
    const fieldAttribute = fieldNode.getAttribute('field');
    fieldNode.textContent = dataObj[fieldAttribute];
}

const buttons = document.querySelectorAll('[status]');
for(let buttonNode of buttons) {
    const buttonStatusAttribute = buttonNode.getAttribute('status');
    buttonNode.onclick = function () {
        fields[2].textContent = statusAttribute;
        fields[2].setAttribute('status', buttonStatusAttribute);
  }
}

최종 결과img

물론 위의 코드가 특별한 문제가 없는 건 아니지만 주의할 점이 한가지 있다.

⛔주의해야할점 : 위에서처럼 status라는 요소 노드의 속성을 내 마음대로 추가했는데 시간이 지나서 공식적으로 사용할 수 있는 똑같은 이름을 가진 status표준 속성이 나왔다면 문제가 발생한다.

그래서 사용자가 자유롭게 요소 노드에 속성값을 추가할 수 있게 만들 것이 data- 속성이다.

이 data-속성은 -뒤에 사용자가 원하는 모든 속성이름을 붙일 수 있다.
data-field , data-status 등 그리고 더 편리하게 값을 사용할 수 있도록 dataset이라는 프로퍼티를 지원한다.

위의 코드에서 적용시켜 본다면

const fields = document.querySelectorAll('[field]');
for(let fieldNode of fields) {
    const fieldAttribute = fieldNode.getAttribute('field');
    fieldNode.textContent = dataObj[fieldAttribute];
}

에서 getAttribute()메소드를 이용해서 속성값을 가져오는데, 만약 HTML에서
field속성이 아닌 data-filed속성으로 변경했다면

<p>
  특징:
  <b data-field="point"></b>
</p>
<p>
  궁극기:
  <b data-field="ultimate"></b>
</p>
<p class="">
    정답:직업군은 뭐죠?
    <b data-field="status"></b>
</p>

아래와 같이 fieldNode.getAttribute('field'); 코드 대신fieldNode.dataset.field로 변경이 가능하다.

const fields = document.querySelectorAll('[field]');
for(let fieldNode of fields) {
    const fieldAttribute = fieldNode.dataset.field;
    fieldNode.textContent = dataObj[fieldAttribute];
}

dataset을 사용할 수 있게 최종적으로 수정된 코드를 확인해보자.

<html>
<head>
  <title>JS 노드 접근해보기</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <h1>오버워치 캐릭터 직업군 맞춰보기</h1>
    <p>
      특징:
      <b data-field="point"></b>
    </p>
    <p>
      궁극기:
      <b data-field="ultimate"></b>
    </p>
    <p class="">
      정답:직업군은 뭐죠?
      <b data-field="status"></b>
    </p>
  </div>
  <div>
    <button data-status="탱커">탱커</button>
    <button data-status="딜러">딜러</button>
    <button data-status="힐러">힐러</button>
  </div>
  <script src="index.js"></script>
</body>
</html>

[data-status] {
  margin: 10px;
  padding: 10px;
  color: white;
}

[data-status="탱커"] {
  background-color: indigo;
}

[data-status="딜러"] {
  background-color: magenta;
}

[data-status="힐러"] {

  background-color: green;
}

const dataObj = {
  point: '스나이퍼 총',
  ultimate: '나노강화제'
}

const fields = document.querySelectorAll('[data-field]');
for(let fieldNode of fields) {
  const fieldAttribute = fieldNode.dataset.field;
  fieldNode.textContent = dataObj[fieldAttribute];
}


const buttons = document.querySelectorAll('[data-status]');
for(let buttonNode of buttons) {
  const statusAttribute = buttonNode.dataset.status;
  buttonNode.onclick = function () {
    fields[2].textContent = statusAttribute;
    fields[2].dataset.status = statusAttribute;
  }
}

저작자표시 변경금지 (새창열림)