[ jS] HTML 태그 추가 / 클래스 관리

메타플랫폼대표

|2024. 4. 12. 10:54

## document.createElement (HTML 태그 추가)

-HTML에서만 HTML 요소를 만들 수 있는 것은 아니다.
-물론 해당 파일에서 생성하는 것이 가장 간단하기 때문에 대부분 HTML document에서 바로 요소를 생성한다.
물론 자바스크립트를 통해서도 요소를 생성하는 것이 가능하다.

-동적으로 특정 태그의 HTML 요소를 생성하려면 자바스크립트의 document.createElement() 메소드를 사용할 수 있다.
이 메소드는 요소의 태그 이름을 매개변수로 받아 해당 노드를 생성한다.

-document의 createElement메소드는 지정된 이름의 HTML요소를 만들어 반환한다.

document.createElement('div');

document.createElement('p');

document.createElement('a');

-위의 설정만으로 요소가 생성되지는 않는다.
-appendChild() 메소드는 DOM내 개별요소에 자식 요소를 추가할 때 사용하는 메서드이다.

예시)

const p = document.createElement("p");

document.body.appendChild(p);

    <body>
        <button id="push">클릭</button>
        <div id="area"></div>
        <script src="/javaScript/javaScriptEx5.js"></script>
    </body>

let count = 0;
// HTML에 저장된 값을 각각의 변수에 저장한다.
const button = document.getElementById("push");
const area = document.getElementById("area");

// 클릭이라는 동작이 이벤트가 생겼을 때 해당 함수를 싱행시키겠다.
button.addEventListener('click', function(){
    count += 1;
    console.log(`${count}번째 div가 생성되었습니다.`);
    // div 요소를 만들겠다.
    const newDiv = document.createElement("div");
    // id명이 area인 요소안에다가 DOM을 통해서 div를 만들겠다.
    area.appendChild(newDiv);
});

-버튼을 누를시에 생성되는 객체의 스타일, 클래스 생성, id 생성을 지정해줄 수 있다.

    const newDiv = document.createElement("div");
    newDiv.style.width = "100px";
    newDiv.style.height = "100px";
    newDiv.style.backgroundColor = "orange";
    newDiv.style.margin = "5px";
    newDiv.className = "newDivClass"
    newDiv.id = `newDiv${count}`
    area.appendChild(newDiv);

## Element.classList (클래스 관리)

-웹 요소(Element)로부터 클래스 컬랙션을 반환하는 읽기 전용 속성이다.

<p class="hello greet good">안녕하세요</p>

const p = document.querySelector('p');
console.log(p.classList);

<h1 class="h1 h1Class h1Tag">classList를 공부합니다.</h1>

const h1 = document.querySelector('h1');
const addBtn = document.querySelector('#add');
const removeBtn = document.querySelector('#remove');
const toggleBtn = document.querySelector('#toggle');

console.log(h1.classList);

# classList 메소드

-반환된 클래스 컬렉션은 유용한 메서드를 다수 포함하고 있다.

============================================================
| 메소드 | 기능 | 사용 예 |
============================================================
| add | 지정한 클래스 값 추가 | add("new_class"); |

<h1 class="h1 h1Class h1Tag">classList를 공부합니다.</h1>

const h1 = document.querySelector('h1');
const addBtn = document.querySelector('#add');

console.log(h1.classList);

addBtn.addEventListener('click', function(){
    h1.classList.add("text");
});

const h1 = document.querySelector('h1');
const toggleBtn = document.querySelector('#toggle');

console.log(h1.classList);

toggleBtn.addEventListener('click', function(){
    h1.classList.toggle("text");
});

-누르면 class가 생성되고 또 누르면 class가 사라진다.

-----------------------------------------------------------------------------------------------------
| replace | 기존 클래스를 새 클래스로 대체 | replace("old", "new"); |

-기존에 text class로 지정되어 있는 것을 image class로 변경하겠다.

replaceBtn.addEventListener('click', function(){
    h1.classList.replace("text", "image");
});

-이렇게 함수를 만들어, 매개변수를 넣어줘서 유연하게 클래스를 유연하게 추가시킬 수 있다.

function classAdd(el, className){
    el.classList.add(className);
};

classAdd(h1,"sorizilruba");

저작자표시

'javaScript↗' 카테고리의 다른 글

JavaScript JSON(제이슨) (1)	2024.06.11
JavaScript 정리 (0)	2024.06.10
javaScript 이벤트(event) (0)	2024.04.11
javaScript 함수(function) (0)	2024.04.11
javaScript 조건문(if-else), 반복문(for,while) (0)	2024.04.11