[js]getElementByClassName,getElementsByTagName,querySelectorAll, classList, dataset,classList.contains, appendChild등등 DOM 조작 총 정리

안녕하세요 오늘은 html에 필요한 값을 js로 조작할때 쓰이는 용법들에 대해 총정리 하는 시간을 보내도록 하겠습니다. (즐겨찾기 추가해두고 필요할때마다 보면 어느덧 익혀진 나자신 발견)

 

id, class로 원하는 값 가져오기

getElementById, getelementsByClassName, getElementsByTagName

// getElementById
var element = document.getElementById('tag-id'); // returns a single element
element.getElementsByTagName('div');


// getElementsByClassName
var elements = document.getElementsByClassName('classname'); // returns a node list
elements.length;
elements[0];
elements[1];
elements[2];


// getElementsByTagName
var elements = element.getElementsByTagName('div'); // returns a node list
elements.length;
elements[0];
elements[1];
elements[2];

 

querySelector사용하기

querySelectorAll, querySelector(), parentElement

// querySelectorAll [Node List]
var elements = document.querySelectorAll('ul li'); // returns a node list
elements.length;
elements[0];
elements[1];
elements[2];


// querySelector
var element = document.querySelector('ul li'); // returns a single element
element.querySelector('li');


// parentElement
element.parentElement;


// children
var ulElement = document.querySelector('ul');
ulElement.children; // returns a node list
ulElement.children.length;
ulElement.children[0];
ulElement.children[1];
ulElement.children[2];

 

속성 변경하기 || 가져오기

setAttribute, getAttribute

// setAttribute, getAttribute
ulElement.setAttribute('hi', 'hi'); // <ul hi="hi"></ul>
ulElement.getAttribute('hi'); // "hi"

 

class 추가 삭제, 포함여부

classList.add, classList.remove, classList.contains

// classList
ulElement.classList; // object .length
ulElement.classList.add('classname'); // 'classname' 클래스 추가
ulElement.classList.remove('classname'); // 'classname' 클래스 제거
ulElement.classList.contains('classname'); // Boolean - true, false

 

dataset 사용법

dataset.something

// dataset
// <h1 data-vanilla="hello" data-no-vanilla="bye">hi</h1>
var headingElement = document.querySelector('h1');
headingElement.dataset; // object
headingElement.dataset.vanilla; // "hello"
headingElement.dataset.noVanilla; // "bye"

 

style property 조작

style.display, backgroundColor

// style property
headingElement.style; // object
headingElement.style.display; // 'block', 'inline-block', 'none'
headingElement.style.display = 'none';

headingElement.style.backgroundColor;
headingElement.style.backgroundColor = 'red';


// innerHTML
// <h1><span>hi,</span> vanilla</h1>
headingElement.innerHTML; // '<span>hi,</span> vanilla'
headingElement.innerHTML = 'hi, <span>vanilla</span>';


// textContent
// <h1>vanilla</h1>
headingElement.textContent; // 'vanilla'
headingElement.textContent = 'no vanilla'; // <h1>no vanilla</h1>



// createElement
var element = document.createElement('img');
element.textContent = 'sdfhusdfusdf';
element.src = 'https://fhsufh'


// appendChild
document.appendChild(element); // document의 맨 마지막 child로 추가


// prepend
document.prepend(element); // document의 첫번째 child로 추가