data life

Js - Basics, Document 본문

Front-end/JavaScript

Js - Basics, Document

주술회전목마 2022. 10. 28. 01:27

React Native

: Js 만으로 안드로이드, iOS 앱 개발 가능

Electron

: CSS, HTML, Js로 데스크탑 앱 개발 가능

 

 

자바스크립트의 HTML 접근

document 객체

브라우저에 존재하는 object로,

console 창에서 작성한 html 문서를 가져옴

document 메소드

  • HTML element 선택
  • HTML element 생성
  • HTML 이벤트 핸들러 추가
  • HTML 객체 선택

* console.dir(document);

   : document 의 속성 확인

 

document.body head title 은 중요한 속성이므로 언제든 불러올 수 있으나

나머지 요소들은 다음과 같이 선택해서 불어와야함.

 

선택

document.getElementBy (TagName , Id , ClassName , Name)

: 해당값의 element 를 가져옴

 

document.querySelector() / SelectorAll()

: 해당 선택자로 선택되는 첫번째 요소를 선택함 / 해당 선택자로 선택되는 모든 요소들을 선택

: element를 CSS selector방식으로 검색

  • id(#)
  • class(.)

html

<body id="hello">
	<h1>Hello!</h1>
	<h1>Hello!!</h1>
	<h1>Hello!!!</h1>
</body>

javascript

const title = document.querySelector("#hello h1");
const title2 = document.getElementById("hello");

console.log(title);  //hello!
console.log(title2); //hello!

 

이벤트 헨들러 코드 추가 

document.getElementById.onclick = function(){}

: 마우스 클릭으로 연결할 이벤트 헨들러 코드 추가

or

addEventListener()       ➡️  이 방법을 더 선호하고 많이 사용 because, .removeEventListenerf를 통해 제거 가능

document.addEventListener(event, function, Capture)

: 이벤트 등록, 여러 이벤트 헨들러를 등록할 수 있다.

 

🔅이벤트 종류

click

mouseleave

mouseenter

mouseover

mouseout

mousedown

mouseup

mousemove

focus

blur

keypress

keydown

keyup

load

resize

scroll

unload

change

wifi online/offline

자세한 건 링크 참조!

window.event

const pageName = document.querySelector("div.hello h1");

function handleTitleClick(){
    pageName.style.color = "blue";
}

pageName.addEventListener("click", handleTitleClick);

// 또는 첫번재 방법

pageName.onclick = handleTitleClick;

const pageName = document.querySelector("div.hello h1");

function handleMouseEnter() {
    pageName.innerText = "Mouse is Here";
}
function handleMouseLeave() {
    pageName.innerText = "Mouse is Gone"
}

pageName.addEventListener("mouseenter", handleMouseEnter);
pageName.addEventListener("mouseleave", handleMouseLeave);

// 또는 첫번째 방법
pageName.onmouseenter = handleMouseEnter;
pageName.onmouseleave = handleMouseLeave;

객체 선택

mdn 참조

 

 

✨HTML에 항목들을 가져와 자바스크립트를 통해 변경 혹은 불러옴!!

 

 

'Front-end > JavaScript' 카테고리의 다른 글

JS - 표준 객체 Math  (0) 2022.11.03
JS - className(), classList()  (0) 2022.10.31
JS - 조건문  (0) 2022.10.27
JS - 입력함수, 데이터 타입 변환  (0) 2022.10.27
JS - Function(함수)  (0) 2022.10.27
'Front-end/JavaScript' Related Articles more