DOM 객체 - 자바스크립트를 통한 html 문서 접근
자바스크립트로 html 에 접근할 때 무엇을 기준으로 접근하는지에 따라 접근하는 방법이 달라질 수 있다.
같은 element 에 접근하더라도 id 속성을 기준으로 접근할 수도 있고 태그 이름, 클래스 이름, name 속성 등을 기준으로도 접근할 수 있다.
우선 id 속성을 기준으로 접근해보자.
- index.html
<!DOCTYPE html>
<html lang="en">
<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">
<script src="./test.js"></script>
<title></title>
</head>
<body id="root">
<div class="title">
Hello, JS!
</div>
<div>
<form action="">
<input type="text" name="userid">
<input type="text" name="passwd">
<input type="submit">
</form>
</div>
<a href="#">site link</a>
<script src="./test.js"></script>
</body>
</html>
- style.css
.title{
font-weight: bold;
font-size: 30px;
}
- test.js
var var1 = document.getElementById("root");
console.log(var1);
위와 같이 코드를 작성한 후 Visual Studio Code 의 경우 Open Live Server 를 이용해 index.html 에 접속해보면 개발자 콘솔에서 index.html 문서의 body 태그 내용이 출력되어 있는 것을 확인할 수 있다.
이는 index.html 에서 body 태그에 id 값으로 root 를 준 다음, 자바스크립트에서 id 값으로 root 를 가진 태그에 접근했을 때 해당 id 값을 가진 태그의 내용이 반환된 것이다.
(해당 id 값을 가지고 있는 DOM 을 반환받은 것)
그런데 여기서 test.js 의 코드를 다음과 같이 바꿔보자.
var var1 = document.getElementById("root").innerHTML;이와 같이 작성할 경우 이번엔 body 태그까지 통째로 반환받은 이전과 달리, body 태그 내으 세부 내용만을 반환받게 된다.
만약 html 태그 없이 문서에서 특정 태그 내부에서 문자열 형태로 작성된 요소들을 반환받고 싶다면 다음과 같이 코드를 작성해 줄 수 있다.
var var1 = document.getElementById("root").innerText;즉, 자바스크립트를 통해 DOM 객체의 element 에 접근하는데 있어 무엇을 기준으로 접근하느냐에 따라 여러가지 방법이 나뉠수 있는데, 지금까지 작성한 코드들은 모두 id 속성을 기준으로 접근한 것이고
만약 이를 그대로 반환받을 경우 해당 속성값을 가지고 있는 DOM element 가 그대로 반환되지만, innerHTML, innerText 등 해당 element 를 이루고 있는 다른 요소들에도 접근이 가능하다.
이와 같이 접근하고 나면 이 값을 변경시켜 주는 것도 가능하다.(innerText)
var var1 = document.getElementById("root");
console.log(var1);
// 태그에 접근 한 이후 내부에 속해 있는 문자열 값들 변경
var1.innerText = "Hello 민철";
var1 = var1.innerText;
console.log(var1);innerHTML 값 또한 태그의 양식을 잘 맞춰서 작성해주면 변경 시켜줄 수 있다.
HTML 태그 내부 속성값 접근
이번엔 HTML 을 이루고 있는 태그 내부의 속성값에 접근하고, 해당 속성값을 변경해보자.
현재 index.html 파일의 a 태그 href 속성엔 아무런 값도 들어가 있지 않다.
그런데 만약 자바스크립트로 이 href 속성에 접근한 후 내용을 바꿔줄 수 있다면 a 태그의 링크가 활성화되어 해당 링크로 페이지를 이동시킬 수 있다.
다음과 같이 index.html 의 a 태그에 id 속성값을 부여해주자.
- index.html
<a id="goorm" href="#">site link</a>test.js 를 다음과 같이 작성해주면 id 값을 통해 a 태그에 접근 한 이후, 해당 태그에서 href 속성에 잘 접근하고 있는것을 확인할 수 있다.
var var1 = document.getElementById("goorm");
// getAttribute() 메소드 : 태그의 속성값에 접근
console.log(var1.getAttribute("href"));여기서 setAttribute 함수를 사용하면 접근한 속성의 값을 변경해 줄 수 있다.
// 속성값에 특정한 값을 세팅
var1.setAttribute("href", "https://github.com/HoJun-Seo");
console.log(var1.getAttribute("href"));이제 링크를 클릭하면 변경한 속성값에 해당 하는 링크를 따라 페이지가 이동하는 것을 확인할 수 있을 것이다.
프레임워크를 위한 JavaScript ES6 - 구름EDU
자바스크립트 기반 웹 프레임워크, 막상 시작했지만 너무 막연하게 느껴지나요? 자바스크립트로 프레임워크를 '잘' 사용하는 방법을 알아봅시다.
edu.goorm.io
'JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 - let, const 와 템플릿 리터럴 (0) | 2022.02.05 |
|---|---|
| 자바스크립트 - DOM 객체(2), 그리고 callback 함수 (0) | 2022.02.04 |
| 자바스크립트 - 변수 스코프와 바인딩, 그리고 this (0) | 2022.02.02 |
| 자바스크립트 - 자바스크립트 객체와 함수 (0) | 2022.02.02 |
| 자바스크립트 - 다양한 데이터 자료형과 연산 (0) | 2022.02.01 |
