* 웹브라우저의 제어
- querySelector() 함수를 사용할 경우
1. 제어할 태그 선택하기
var a = document.querySelector('선택자');
//'선택자' 자리에는 태그 선택자, 클래스 선택자, ID선택자가 들어간다.2. 선택한 선택자에 css 속성을 추가하기
var a = document.querySelector("#apple") //apple이라는 이름을 가진 클래스 선택자 선택
a.style.color("green"); //apple이라는 클래스에 속한 모든 태그의 텍스트 색깔을 초록색으로 바꿈- getElementByID() / getElementsByClassName() / getElementsByTagName() 함수를 사용할 경우
getElementByID() : ID를 통해 선택자 하나만 가져오는 경우
getElementsByClassName : Class를 통해 공통된 Class를 가진 모든 선택자를 배열로 가져오는 경우
getElementsByTagName : Tag이름을 통해 해당 태그의 모든 element를 배열로 가져오는 경우
<html>
<body>
<a id="link1" rel="https://">링크1</a>
<div class="article">
<p>Hello World!</p>
<a id="link2" rel="https://">링크2</a>
</div>
<script>
console.log(document.getElementById("link1")); //링크1
console.log(document.getElementsByClassName("article").children);
// .article div에 속한 p와 a태그의 리스트(배열과 비슷)
console.log(document.getElementsByTagName("a")); //a태그 리스트
</script>
</body>
</html>'WEB기초 > JavaScript' 카테고리의 다른 글
| JavaScript의 기초1 (이벤트, 콘솔, 데이터타입, 변수) (0) | 2020.05.21 |
|---|