728x90
반응형
엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용된다.
객체를 만들어줄때 property에 조회,생성,변경,삭제 등을 세팅해줄 수 있다.
tagName
조회만 가능하게 하는 property이다. 변경되지않는다.
<body>
<ol>
<li id="javascript">Javascript</li>
</ol>
<script>
var sTagName = document.querySelector("#javascript").tagName
document.write(sTagName + "<br/>"); //LI, 대문자로 리턴
document.querySelector("#javascript").tagName = "a" ; //tagname a로 수정했지만
document.write(document.querySelector("#javascript").tagName); //a로 출력되지않고 LI로 출력
</script>
</body>현재 javascript의 tagName은 "javascript"인데 "a"로 변경하려고 한다.
이때
""안에 오는 선택자는 항상 문자열이어야한다.
마지막 write를 보면 이름이 변하지않고 그대로 LI로 출력되는데, 변경되지 않는다는걸 알수 있다.
id
변경이 가능한 property이다.
<body>
<ol>
<li id="javascript">Javascript</li>
</ol>
<script>
var oJavascriptTag = document.querySelector("#javascript");
document.write(oJavascriptTag.id + "<br/>"); //javascript
oJavascriptTag.id = "script";
document.write(oJavascriptTag.id); //script
</script>
</body>브라우저에서 f12를 눌러서 elements에서 보면 <li id="script">로 변경되있는걸 확인해볼 수 있다.
className
변경이 가능한 property이다.
<body>
<ol>
<li id="sapui5" class="important">SAPUI5</li>
</ol>
<script>
var oSapui5Tag = document.querySelector("#sapui5");
document.write(oSapui5Tag.className + "<br/>"); //important
oSapui5Tag.className = "read";
document.write(oSapui5Tag.className + "<br/>"); //read
oSapui5Tag.className = oSapui5Tag.className + "important";
document.write(oSapui5Tag.className + " <br/>"); //read important
</script>
</body>브라우저에서 f12를 눌러서 elements에서 보면 <li id="sapui5" class="readimportant">로 변경되있는걸 확인해볼 수 있다.
classList
한 태그안에서 클래스를 하나만 쓰지않고 여러개를 사용할 수 있다. 그래서 classList는 클래스를 배열로 가지고 있다. 이때 배열을 제어할수 있으며 클래스를 추가하거나, 삭제하거나, 있으면 빼고 없으면 넣어줄수 있다.
<body>
<ol>
<li id="sapui5" class="important read">SAPUI5</li>
</ol>
<script>
var oSapui5Tag = document.querySelector("#sapui5");
document.write(oSapui5Tag.classList + "<br/>"); //important read
document.write(oSapui5Tag.classList[1] + "<br/>"); //read
oSapui5Tag.classList.add("bold"); //추가
document.write(oSapui5Tag.classList + "<br/>"); //important read bold
oSapui5Tag.classList.remove("bold"); //삭제
document.write(oSapui5Tag.classList + "<br/>"); //important read
oSapui5Tag.classList.toggle("bold"); //있으면빼주고 없으면넣어준다
document.write(oSapui5Tag.classList + "<br/>"); //important read bold
</script>
</body>브라우저에서 f12를 눌러서 elements에서 보면
- add의 경우
<li id="sapui5" class="important read bold">로 bold가 추가되있는걸 확인해볼 수 있다. - remove의 경우
<li id="sapui5" class="important read">로 bold가 삭제되있는걸 확인해볼 수 있다. - toggle의 경우
앞에서 bold를 remove로 제거 해줬기때문에 현재 클래스에는 bold가 없다. 없으면 새로 추가해주기 때문에<li id="sapui5" class="important read bold">로 bold가 다시 추가되있는걸 확인해볼 수 있다.
toggle을 사용해 각 버튼을 누르면 글씨 크기가 커지고, 색이 변하고, 굵기가 달라지게 해본다. 다시 누르면 원래대로 돌아갈수도 있게 한다.
<head>
<meta charset="utf-8">
<title></title>
<style>
.important {
font-size: 40px;
}
.read {
color: red;
}
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<ol>
<li id="css">CSS</li>
</ol>
<button onclick="toggleImportant();">Important</button>
<button onclick="toggleReadClass();">Read</button>
<button onclick="toggleBoldClass();">Bold</button>
<script>
function toggleReadClass () {
var oRead = document.querySelector("#css")
// oRead.style.color = "red";
oRead.classList.toggle("read");
};
function toggleBoldClass () {
var oBold = document.querySelector("#css")
oBold.classList.toggle("bold");
};
function toggleImportant () {
document.querySelector("#css").classList.toggle("important");
};
</script>
</body>728x90
반응형
'Fiori > UI5' 카테고리의 다른 글
| [JavaScript] 이벤트 (0) | 2023.03.07 |
|---|---|
| [JavaScript] Element 속성 (0) | 2023.03.07 |
| [JavaScript] 문서 객체 모델(DOM) 접근 (0) | 2023.03.06 |
| [JavaScript] Date (0) | 2023.03.06 |
| [JavaScript] 배열 Array 2 (0) | 2023.03.06 |
댓글