요소 선택

getElementById

console.log(document.getElementById('green'));
console.log(document.getElementById('red'));

getElementsByClassName

console.log(document.getElementsByClassName('pink'));
console.log(document.getElementsByClassName('pink')[0]);
console.log(document.getElementsByClassName('others'));
console.log(document.getElementsByClassName('others')[1]);

getElementsByTagName

console.log(document.getElementsByTagName('div'));
console.log(document.getElementsByTagName('div')[0]);

getElementsByName (name 속성값)

console.log(document.getElementsByName('id'));
console.log(document.getElementsByName('id')[0]);

querySelector('CSS 선택자')

console.log(document.querySelector('.pink'));
console.log(document.querySelector('#red'));
console.log(document.querySelector('#div'));
console.log(document.querySelector('input'));
console.log(document.querySelector("[name='id']"));

요소 다루기

태그 내부 내용- innerText, textContent, innerHTML

let div1 = document.getElementById('div1');
console.log(div1);

// 2칸 이상의 공백, 앞뒤 공백 제거
div1.innerText = '    여기는 <b>첫번째</b> 태그입니다. &hearts     /';      

console.log('innerText: ' + div1.innerText);
div1.innerHTML = '여기는 <b>첫번째</b> 태그입니다. &hearts;'

// 2칸 이상의 공백, 앞뒤 공백 살아있음
div1.textContent = '    여기는 <b>첫번째</b> 태그입니다. &hearts;     /'   
console.log('textContent: ' + div1.textContent);

속성에 접근- getAttribute(). setAttribute()

// beach, naver 아이디
let naver = document.getElementById('naver');
console.log(naver);
// naver.setAttribute('속성이름', '바꿔줄 속성값')
naver.setAttribute('href', '<https://www.google.com>');

console.log(naver.href);
console.log(naver.getAttribute('href'));

naver.textContent = '구글로 이동';

console.log(document.querySelector('#beach').src);
document.querySelector('#beach').alt = '바다 사진';