DOM API - HTML element

HTML Element 속성

parentNode.children (IE9+) - 자식 '요소'만 가져옴. 읽기 전용 속성. 라이브로 업데이트 됨.

firstElementChild - 첫번째 자식 '요소'만 가져옴

lastElementChild - 마지막 자식 '요소'만 가져옴

nextElementSibling - 다음 형제 '요소'만 가져옴

previousElementSibling - 이전 형제 '요소'만 가져옴

attributes(이 속성을 통해 반환되는 유사 배열 집합은 라이브 상태, 즉 실시간으로 변경된다) - 해당 요소가 갖고 있는 속성을 알려줌

innerHTML - 해당요소 내부 html 코드를 가져옴. HTML 텍스트 코드를 실제 DOM 노드로 변환. 해당 속성은 무겁고 비싼 대가를 치루는 HTML 해석기를 호출하므로 사용에 주의가 요구된다.

outerHTML - 해당요소까지 html 코드를 가져옴

innerText - 내부 텍스트 컨텐츠를 반환. textContent와 달리 숨겨진 요소들의 텍스트는 반환하지 않는다.

textContent(IE9+) - 노드와 그 자손의 텍스트 내용을 표시. 단순히 텍스트로 출력. 모든 요소의 내용을 가져올 수 있다.

childElementCount(IE9+) - 자식 엘리먼트 갯수

classList(IE10+) \=- 

add()

remove()

contains()

toggle()

dataset(javascript 객체로 data-* 속성에 사용된 -은 모두 camelCase로 처리하여 사용)

HTML Element 메서드

getAttribute() - 속성값 가져오기

setAttribute() - 속성값 세팅하기

removeAttribute() - 속성 제거

hasAttribute() (요소 노드에 속성이 있으면 값이 없어도 true를 반환, boolean 속성 반환 값일 경우 상태 확인 가능) - 해당 속성을 가지고 있는지 확인

insertAdjacentHTML(position, htmlCode) - HTML 또는 XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. 이미 사용중인 element는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml과는 좀 다르다. innerHtml보다 작업이 덜 들기 때문에 빠르다.)

position -> beforebegin (element 앞에. previousSiblings) | afterbegin (element 안에 가장 첫번째 child. firstChild) | beforeend (element안에 가장 마지막 child. lastChild) | afterend (element 뒤에. nextSiblings)

insertAdjacentElement(position, element) (IE8+) element 추가

insertAdjacentText(position, element) text 추가

정규표현식 리터럴 //

/^\d/.test('dkfjskjsk')

new RegExp(''(^| ) + yamoo9 + ( |])"