Daily Pogle

[Javascript 기초] Searching for elements 본문

Programming language/Javasript

[Javascript 기초] Searching for elements

pogles 2022. 12. 16. 10:46

javascript에서 HTML을 읽고 수정하기 위해 사용하는 객체가 document, 즉 document는 javascript에서 HTML을 의미한다.

 

document.getElementById("A") 는 의미 그대로 document(HTML)에서 ID가 A인 element를 가져오는 것을 의미한다.

 

HTML에서 특정 ID는 유일하므로 해당 ID가 있는 코드 전체을 전체 가져온다. 예를 들어

 

** index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>
<body>
    <h1 id="name">My name is<br>Pogle</h1>
    <script src="app.js"></script>
</body>
</html>    
** app.js
const getName = document.getElementById("name");
console.log(getName)
[console]

<h1 id="name">
    My name is<br>
    Pogle
</h1>

[Method 정리]

method function return
document.getElementById("id명") 해당 ID의 element 전체를 가져옴 one element
document.getElementByClassName("class명") 해당 Class를 가지고 있는 모든 element를 array로 가져옴 array
document.getElementByTagName("tag명") 해당 Tag를 array로 가져옴 array
document.querySelector("css형식") css 형식 조건에 맞는 첫번째 element 가져옴 one element
document.querySelectorAll("css형식") css 형식 조건에 맞는 모든 element를 배열로 가져옴 array

 

** document.querySlector / getElementById 를 많이 사용함.

 

'Programming language > Javasript' 카테고리의 다른 글

[Javascipt] To do list 기능구현  (0) 2022.12.19
[Javascript] Event - 기본  (0) 2022.12.17
[Javascript 기초] Toggle  (0) 2022.12.16
[Javascript 기초] Events  (0) 2022.12.16
[유의사항] Javascript 기초 - Variable  (0) 2022.12.15
'Programming language/Javasript' Related Articles more