DOM(Document Object Model)요소 정리

김해김씨가오리·2022년 12월 6일
0

JAVASCRIPT

목록 보기
28/36

DOM요소들..

document.querySelectorAll();

지정된 셀렉터 그룹에 일치하는 document element list를 나타내는
정적 NodeList를 반환

document.querySelector();

제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 element를 반환
일치하는 요소가 없으면 null반환

document.getElementsByClassName();

주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환

document.getElementById();

주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환

document.getElementsByTagName();

element의 HTMLCollection과 주어진 태그명을 반환

Element.className();

특정 element의 클래스 속성의 값을 가져오거나 설정할 수 있음

HTMLElement.style;

style 속성에 정의된 목록을 반환

Element.classList.add(oldClass, newClass);

지정한 클래스 값을 추가. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시

Element.classList.replace();

존재하는 클래스를 새로운 클래스로 교체

Element.classList.remove(String);

지정한 클래스 값을 제거.

Element.classList.toggle(String, [, force]);

하나의 인수만 있을 때: 클래스 값을 토글링.
즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환.
두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거.

Element.classList.contain(String);

지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인

Node.previousSibling;

현재 호출하는 노드가 속해 있는 부모의 childNodes 목록에서 호출하는 노드의 이전 노드를 리턴.
현재 호출하는 노드가 childNodes 목록의 첫번째 노드일 경우 Null값을 리턴

Node.nextSibling;

부모의 childNodes 목록에서 지정된 노드 바로 다음에 있는 노드를 반환.
지정된 노드가 해당 목록의 마지막 노드이면 null 값을 반환.

element.firstChild;

트리에서 노드의 첫 번째 자식이나 null(노드가 자식이 없으면)을 반환.

Element.children;

호출된 요소의 모든 하위 요소를 포함하는 실시간 HTMLCollection을 반환.

elStart.childNodes;

주어진 요소의 자식 노드 모음( collection )을 반환

HTMLDataElement.value;

HTML 특성을 반영하는 문자열을 반환

Node.nodeValue;

현재 노드의 값을 반환하거나 설정

Node.removeChild(child);

하위 노드를 제거하고 제거된 노드를 반환

document.createElement(tagName);

지정한 tagName의 HTML 요소를 만들어 반환

document.createTextNode(data);

텍스트 노드를 생성

Node.appendChild(aChild);

한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임

Element.before();

요소 바로 앞에 있는 이 요소의 부모 자식 목록에 노드 또는 문자열 개체 집합을 삽입

Element.after();

Element 바로 뒤에 있는 Element의 부모 자식 목록에 Node 또는 문자열 개체 집합을 삽입

Element.prepend();

요소의 첫 번째 자식 앞에 노드 개체 또는 문자열 개체 집합을 삽입.
문자열 개체는 동등한 텍스트 노드로 삽입.

Element.append(param1);

요소의 마지막 자식 뒤에 노드 개체 또는 문자열 개체 집합을 삽입.
문자열 개체는 동등한 텍스트 노드로 삽입.

Element.hasAttribute();

지정된 요소에 지정된 속성이 있는지 여부를 나타내는 부울 값을 반환.

Element.getAttribute();

해당 요소에 지정된 값을 반환.
주어진 속성이 존재 하지 않는 다면, null 값이나 ""(빈문자열); 을 반환

Element.setAttribute();

지정된 요소의 특성 값을 설정.
특성이 이미 있으면 값이 업데이트되고, 그렇지 않으면 지정된 이름과 값으로 새 특성이 추가

Element.removeAttribute(attrName);

요소에서 주어진 이름의 특성을 제거

Element.innerHTML;

요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정

HTMLImageElement.src;

HTMLLimageElement 속성 src는 img 요소에 표시할 이미지를 지정

HTMLElement.focus();

포커스를 맞출 수 있는 경우 포커스를 지정한 요소에 설정.
초점 요소는 기본적으로 키보드 및 유사한 이벤트를 수신하는 요소.

checkForm.action;

form 요소의 작업.
form을 제출할 때 서버에서 실행되는 프로그램.

Node.textContent;

노드와 그 자손의 텍스트 콘텐츠를 표현

window.onsubmit;

현재 창에서 폼을 제출하는 이벤트를 다루는 이벤트 핸들러

HTMLElement.offsetWidth;

테두리, 패딩 및 수직 스크롤바(렌더된 경우)를 포함하여 요소의 레이아웃 너비를 정수로 반환

HTMLElement.offsetHeight;

테두리, 패딩 및 수평 스크롤바(렌더된 경우)를 포함하여 요소의 높이를 정수로 반환

HTMLElement.offsetTop;

가장 가까운 위치에 있는 상위 요소인 offsetParent의 위쪽의 내부 경계에 상대적인 현재 요소의 외부 경계 거리를 반환

HTMLElement.offsetLeft;

현재 요소의 왼쪽 상단 모서리가 HTMLelement.offsetParent 노드 내에서 왼쪽으로 오프셋된 픽셀 수를 반환

Element.onmouseenter;

마우스를 처음 이동할 때 해당 핫스팟이 이벤트가 발생한 요소 내에 있도록 요소에서 발생

Element.onmouseout;

마우스를 사용하여 커서를 요소 또는 요소 중 하나에 더 이상 포함되지 않도록 이동할 때 마우스 아웃 이벤트가 요소에서 발생

Element.onmouseover;

마우스를 사용하여 커서를 요소 또는 해당 하위 요소 중 하나로 이동할 때 요소에서 실행

onmouseenter와 onmouseover차이?

onmouseover : 직접 이벤트 걸지 않은 자식요소에 마우스 포인터가 와도 발생

onmouseenter : 이벤트 건 요소에게 마우스 포인터가 와야 발생

Element.className;

특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있음

HTMLElement.offsetParent;

가장 가까운 (포함 계층에서 가장 가까운) 위치가 정해진 포함하는 엘리먼트 객체에 대한 참조를 반환

Element.scrollHeight;

요소 콘텐츠의 총 높이를 나타내며, 바깥으로 넘쳐서 보이지 않는 콘텐츠도 포함.
요소의 안쪽 여백은 포함하고, 테두리와 바깥 여백, (존재하는 경우) 수평 스크롤바의 높이는 포함하지 않음.

String.prototype.replace();

어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환

출처 :
개발자를 위한 웹 기술
jQuery API - mouseenter(), 마우스 진입 감지 이벤트

profile
그냥 기록용!!!

0개의 댓글