[JavaScript] 원하는 HTML 요소(Element) 찾아가는 방법
- WEB
- 2021. 6. 29.
여러 방법으로 자바스크립트로 HTML의 요소(Element)를 가져올 수 있다. 요소를 가져오면 자바스크립트로 HTML의 값을 변경할 수 있다. 웹 페이지에 동적인 변화를 줄 수 있게 된다. 아래 예제는 버튼을 누르면 p 태그에 있는 글자의 색이 바뀌는 코드다.
- document.getElementById()
- document.querySelector()
- document.getElementsByTagName()
세 가지 방법으로 접근했다.
HTML
<html>
<head>
<title>test</title>
</head>
<body>
<p id="para">테스트</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>
document.getElementById("id");
function changeColor(newColor) {
var elem = document.getElementById('para');
elem.style.color = newColor;
}document.querySelector("selectors");
function changeColor(newColor) {
var elem = document.querySelector('#para');
elem.style.color = newColor;
}document.getElementsByTagName("tag name")
function changeColor(newColor) {
var elem = document.querySelector('p');
elem.style.color = newColor;
}반응형
'WEB' 카테고리의 다른 글
| [JavaScript] jQuery - 오픈 API로 일별 박스오피스 불러오기 (0) | 2021.07.03 |
|---|---|
| [JavaScript] jQuery - each() 메서드 | 반복해서 요소에 접근 (0) | 2021.07.01 |
| [JavaScript] 카카오 우편번호 API 간단하게 적용하기 (0) | 2021.06.28 |
| [JavaScript] .sort(function(a, b) { return a - b; })가 작동하는 원리? (2) | 2021.06.26 |
| [HTML / CSS] 복수 메뉴바 만들기 - float: left | overflow: hidden (0) | 2021.06.23 |