[Javascript] Html 요소(element)의 속성(attribute)을 추가, 삭제 그리고 수정하는 방법
Study/Javascript, Jquery, CSS 2020. 3. 23. 23:43
안녕하세요. 명월입니다.
이 글은 Javascript에서 Html 요소(element)의 속성(attribute)을 추가, 삭제 그리고 수정하는 방법에 대한 글입니다.
Html 요소에서 데이터 값을 설정하고 취득하는 방법은 꼭 value의 속성이 아니더라도 설정이 가능합니다. 다만 class와 id, style 속성에 관해서는 브라우저의 탐색과 랜더링이 달라질 수 있습니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 예제 요소 -->
<input type="text" id="test">
<script>
// id가 test인 요소를 선택한다.
var $item = document.getElementById("test");
// 요소의 data-value 속성에 hello world를 설정한다.
$item.setAttribute("data-value", "hello world");
// 요소의 value 속성에 test를 설정한다.
$item.setAttribute("value", "test");
// 요소의 data-value 속성을 취득해서 html 작성한다.
document.write("<br />" + $item.getAttribute("data-value"));
// 요소의 value 속성을 취득해서 html 작성한다.
document.write("<br />" +$item.getAttribute("value"));
</script>
</body>
</html>
먼저 textbox의 data-value속성과 value속성을 설정했습니다.
data-value속성은 html 랜더링에는 영향이 가지 않지만 value의 속성에는 textbox 안에 text가 들어가게 됩니다. 결과를 보면 textbox안에 test의 값이 들어가 있습니다.
setAttribute로 속성을 설정을 하는데 속성이 없으면 추가하고 있으면 수정합니다. 그리고 getAttribute로 속성의 값을 취득할 수 있습니다.
여기서 class와 id와 style속성도 물론 setAttribute로 설정이 가능합니다만, 따로 값을 넣을 수 있는 프로퍼티가 있습니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<style>
/* test1 class 스타일 설정*/
.test1 {
border: 5px solid pink;
}
/* test2 class 스타일 설정*/
.test2 {
color: white;
}
</style>
<!-- 예제 요소 -->
<input type="text" id="test">
<script>
// id가 test인 요소를 선택한다.
var $item = document.getElementById("test");
// 요소의 id을 취득해서 html 작성한다.
document.write("<br />" + $item.id);
// 요소의 id 속성 값을 변경
$item.id = "changeID";
// class를 추가한다.
$item.classList.add("test1");
$item.classList.add("test2");
// class의 값을 html 작성한다.
document.write("<br />" + $item.classList.value);
// 요소의 value값을 설정한다.
$item.value = "hello world";
// 요소의 style를 설정한다.
// style의 경우는 모든 style 설정이 프로퍼티로 있고, 설정이 가능합니다.
$item.style.background = "black";
</script>
</body>
</html>
속성을 설정하고 취득하는 방법에 설명했습니다. 이번에는 속성을 제거하는 방법에 대한 함수입니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 예제 요소 -->
<input type="text" id="test" class="test1 test2" data-value="hello world">
<script>
// id가 test인 요소를 선택한다.
var $item = document.getElementById("test");
// id 속성을 제거한다.
$item.removeAttribute("id");
// class 속성을 제거한다.
$item.removeAttribute("class");
// data-value 속성을 제거한다.
$item.removeAttribute("data-value");
</script>
</body>
</html>
input 요소의 id, class와 data-value 속성이 전부 제거되었습니다.
여기까지 Javascript에서 Html 요소(element)의 속성(attribute)을 추가, 삭제 그리고 수정하는 방법에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [Javascript] 타이머 함수(setTimeout, setInterval) (0) | 2020.03.26 |
|---|---|
| [Javascript] 익명함수, 람다식, 클로저 그리고 callback (DOMContentLoadedd와 load이벤트 예제) (0) | 2020.03.25 |
| [Javascript] 브라우저에서 Javascript 프로그래밍 디버깅하는 방법 (0) | 2020.03.25 |
| [Javascript] Html 요소(element)의 이벤트(Event)를 추가하는 방법 (0) | 2020.03.24 |
| [Javascript] Html 요소(element)의 생성(CreateElement), 추가(appendChild)하는 방법 (2) | 2020.03.23 |
| [Javascript] Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...) (0) | 2020.03.23 |
| [Javascript] 변수 선언, 제어문, 함수 사용법 (0) | 2020.03.23 |
| [CSS] 브라우저에서 CSS를 개발하는 방법(브라우저 개발 모드) (0) | 2020.03.13 |