JavaScript - 노드 선택

태그 선택하기

id로 태그 선택하기

document.getElementById('id');

• 존재하지 않는 아이디는 undefined가 아니라 null 이다.

class로 태그 선택하기

document.getElementsByClassName('className');

• className을 가진 요소들이 유사배열(HTML Collection)에 담겨 출력된다.
• HTML Collection은 대괄호로 접근이 가능하고 for of문, length등 사용 가능하지만 배열의 메서드는 사용할 수 없다.
• 배열에 담긴 순서는 태그의 깊이와 상관없이 위에서 아래로 출력된다.
• 요소가 하나인 클래스명에 접근해도 HTML Collection으로 조회된다.
• 존재하지 않는 클래스명에 접근시 비어있는 배열이 조회된다.( null이 아니고, length가 0인 배열이 조회된다.)

tag Name으로 태그 선택하기

document.getElementsByTagName('태그 이름');

• 태그도 여러개가 존재할 수 있으므로 HTML Collection이 리턴된다.

css 선택자로 태그 선택하기

document.querySelector(‘css’);
document.querySelector(‘#myColorDiv’);
document.querySelector(‘.color-btn’); // 가장첫번째 요소 1개만 선택됨.
document.querySelectorAll(‘.color-btn’); // NodeList를 리턴.

• 하나의 메서드로 여러 검색을 할 수 있어 활용도가 높으니, getElement 보다 query Selector를 추천한다.
• 존재하지 않는 선택자를 선택할 경우, Null을 리턴한다.

 

유사배열(Array-like Object)

• 배열과 유사한 객체를 유사배열이라 부른다.
• 내부 요소들을 배열처럼 다루되, 배열메서드의 사용을 막고싶거나 특별한 메서드를 제공하고 싶을 때 유사배열을 만들어 활용하기도 한다.
• 모든 유사배열이 for of문을 사용할 수 있는 것은 아니다.
• 모양만 비슷하다고 모두 유사배열이라고 부르지 않는다.

유사배열이 갖춰야할 조건은 다음과 같다.

• 숫자 형태의 indexing이 가능할 것.
• length프로퍼티가 있을 것
• 배열의 기본메서드는 사용 불가능.
• Array.isArray([유사배열]) = false

---

이벤트와 버튼 클릭

• 이벤트 핸들링 : 이벤트 발생 시 특정 동작을 하도록 이벤트를 다루는 것.
• 이벤트 핸들러(이벤트 리스너) : 구체적인 동작을 구현한 함수.

const btn = document.querySelector(‘#myBtn’);

Btn.onClick = function(){
	condole.log(‘Hello’);
}

---

window 객체

• 브라우저를 제어할 수 있다.
• 자바스크립트의 최상단 객체이다.
• 전역객체, global object라고 부른다.

window.innerWidth;
window.innerHeight;
window.open();
window.close();

---

dom

• Document Object Model
• 문서 객체 모델.
• 웹페이지에 나타나는 html문서 전체를 객체로 표현한 것.
• document객체가 문서의 최상단 객체이다.
• dom에 직접 접근하면 객체가 아니라 돔에 해당하는 htm이 출력된다.
• console.dir(document)를 하면 html형태가 아닌 객체형태로 돔을 출력할 수 있다.

 

domTree

• 요소노드 : 태그를 표현하는 노드
• 텍스트 노드 : 문자를 표현하는 노드. 자식요소를 가질 수 없고, leaf node(잎 노드)라고 부르기도 한다.
• 코멘트(주석) 노드
• 문서노드 : document node)

---

bom

• Browser Object Model
• 현재 웹페이지가 가리키고있는 url, 현재 브라우저가 표시하고 있는 페이지를 리로드하는 역할을 담당한다.
• window객체의 프로퍼티에 저장되어있다.

---

console.dir

• string, num, boolean타입의 데이터들은 console.dir을 할 경우, 모두 문자열 표시형식으로 출력된다.
• 객체의 속성을 자세히 출력할 수 있다.
• console.log와 다르게 여러개의 파라미터를 줄 수 없다.
• 값자체를 확일할 때에는 console.log를 사용하고 객체의 속성들을 살펴보고 싶다면 console.dir을 사용하면 좋을 듯 하다.

---

노드 선택하기

자식 요소 노드 선택하기

myTag.children[1]
myTag.firstElementChild
myTag.lastElementChild

부모 요소 노드 선택하기

myTag.parentElement

형제 요소 노드 선택하기

myTag.previousElementSibling 
myTag.nextElementsSibling

요소노드가 아닌 노드들을 이동하고 싶은 경우

node.childNodes : node의 자식 노드 모음(Node list)
node.firstChild :node의 첫번째 자식 노드 하나.
node.lastChild : node의 마지막 자식 노드 하나.
node.parentNode. : node의 부모 요소 하나.
node.prevousSibling : node의 이전 혹은 좌측 노드 하나
node.nextSibling : node의 다음 혹은 우측 노드 하나.

• 요소노드가 아닌 노드들을 이동하고 싶을 때 사용하는 property를 활용한다면 줄바꿈 혹은 공백등의 노드들도 텍스트노드로 표현될 수 있으므로 의도치 않은 결과를 만들어낼 가능성이 커진다.
• 그러니 요소노드를 다루는 property를 꼭 사용하도록 하자.

 

---

요소노드의 property

innerHTML

• 요소안의 HTML을 확인할 수 있다.
• 공백, 들여쓰기 모두 그대로 가져온다.
• 내부 HTML을 수정하는데에 더 많이 쓰인다.

myTag.innerHTML += ‘<li>Exotic</li>’;

outerHTML

• 해당요소를 포함한 전체 HTML코드를 문자열로 반환한다.
• 줄바꿈, 띄워쓰기 모두 그대로 가져온다.
• 새로운 값을 할당할 경우, 요소자체가 새로운 요소로 교체된다.
• 따라서 처음 선택한 요소는 사라지게된다.

textContent

• 요소안의 HTML을 제외한 텍스트만을 가져온다.
• 새로운 값을 할당할 경우 내부 텍스트를 완전히 수정시킨다.
• <li> 와 같은 특수문자를 넣어도 텍스트노드로 처리한다.

 myTag.textContent

---

요소노드 직접 생성

요소노드 만들기

document.createElement('li');

요소노드 꾸미기

first.textContent = '처음';

요소노드 추가하기

tomorrow.prepend(first); // 첫번째 자식 노드로 추가
tomorrow.append(first); // 마지막 자식노드로 추가
tomorrow.before(first); // 앞의 형제노드로 추가
tomorrow.after(first); // 뒤의 형제노드로 추가

• 파라미터를 여러개 주면 다같이 추가된다.

요소노드 삭제하기

node.remove(); // 전체삭제
node.children[2].remove(); // 두번째 자식요소 삭제

요소노드 이동시키기

today.append(tomorrow.children[1]); // 요소 이동
tomorrow.children[1].after(today.children[1]); // 요소 이동

---

태그의 속성 조회 추가 삭제

• 파라미터는 대소문자를 구분하지 않는다.

getAttribute(‘class’)
getAttribute(‘href’) // href는 *.href로 조회 못하는데 getAttribute 하면 조회된다.
setAttribute(‘class’,’list’) // 이미 존재하면 덮어쓴다.
removeAttribute(‘class’)

---

스타일 다루기

today.children[0].style.textDecoration = 'Line-thorough';

• style.*로 스타일에 접근해서 변경할 때에는 text-decoration이 아니라 textDecoration으로 접근한다.
• 이렇게 적용하면 태그 안에 인라인으로 스타일이 적용된다.
• 따라서 가장 높은 스타일 우선순위를 갖게된다.
• 다른 여러곳에서 이 스타일을 쓰려해도 불필요한 코드가 많아지기때문에 권장되는 방법은 아니다.

 

권장되는 방법은 아래와 같이 클래스를 바꾸는 방법이다.

class 속성값 전체 바꾸기

today.children[1].className = 'done';

classList로 일부 클래스 바꾸기

today.children[1].classList; // 클래스 목록 조회
Item.classList.add(‘done’); // 클래스 추가
Item.classListadd(‘done’, ‘other’); // 클래스 2개 추가

item.classLiost.toggle(‘done’); // 있으면 삭제, 없으면 추가시킨다.
item.classLiost.toggle(‘done’, true ); // add의 역할만 수행한다.(두번째 인자로 true를 주면)

---

비표준 속성

• css에서 아래와 같이 대괄호를 사용하면 해당 속성을 가진 태그들을 선택할 수 있다.

[속성이름] {
	color: red;
}

• 비표준속성을 준 이후, 해당 속성이 표준으로 등록되면 아마 내가 구상한 것과는 다르게 동작할 것이다.
• 그렇기때문에 비표준 속성을 사용할때에 이름을 data-* 로 짓는다.
• 꺼낼때에는 element.dataset.* 로 꺼내온다.

<p id=‘test’ data-status='stop'></p>

const result = document.querySelector(‘#test’);
const status = result.dataset.status;