문서 객체 모델(DOM)은 HTML과 XML 문서에 대한 어플리케이션 프로그래밍 인터페이스이다. DOM은 문서를 노드의 계층 구조 트리로 표현하며 개발자는 이를 통해 페이지 각 부분을 추가, 제거, 수정한다.
Document 타입에서 제공하는 메소드 (제어 대상 찾기)
- getElementById()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
getElementById()
id를 사용해 속성을 제어한다. id는 객체로 가져온다. {} 객체가 없으면 null값이 return된다. id만 가져올 수 있다고 명시되어 있어 선택자에 id구분자#를 넣지 않는다.
여러 객체를 가져올땐 배열로 가져온다고 하고 하나의 객체를 가져올땐 객체로 가져온다고 한다.
<body>
<ol>
<li>WEB</li>
<li>HTML</li>
<li>CSS</li>
<li id="javascript">Javascript</li>
<li>SAPUI5</li>
</ol>
<script>
function changecolor() { //원하는때 원하는 속성 넣어줌
var oJavascriptli = document.getElementById("javascript");
oJavascriptli.style.color = "red";
}
setTimeout(changecolor, 3000);
</script>
</body>기능을 좀 추가해 3초뒤에 빨간색으로 색깔을 변하게 해봤다.
getElementByTagName()
태그로 제어한다. 항상 태그네임은 데이터가 몇개든지 배열의 모양으로 가져오기때문에 배열의 인덱스로 접근한다. [인덱스 번호]
이렇게 배열로 접근하는 메소드를 사용할때는, 조회된 데이터가 없다면 []로 표시하고 데이터가 하나라고 해도 객체{}가 아닌 [{}] 로 가져와야 한다. tag로 명시되어 있어 구분자는 넣지않는다.
<script>
var oLiList = document.getElementsByTagName("li"); //여러개라 elements
for (var i = 0; i < oLiList.length; i++) {
oLiList[i].style.color = "red";
}
</script>태그로 하면 li가 여러개기 때문에 여러개를 가져오고, 배열로 가져온다. 그래서 리터럴 []을 사용한다.
이렇게 되면 모든 li 태그의 색을 바꾸게된다. 특정 li의 색만 바꾸고 싶을때는 어떻게 해야할까?
부모태그를 사용해 어떤 li를 가져올건지 지정할 수 있다. 부모태그를 가져오면 그 밑에 딸린 자식 태그들도 가져오기 때문에 부모태그를 지정해주면 된다.
<body>
<ol>
<li>WEB</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>SAPUI5</li>
</ol>
<ul>
<li>WEB2</li>
<li>HTML2</li>
<li>CSS2</li>
<li>Javascript2</li>
<li>SAPUI52</li>
</ul>
<script>
var oUl = document.getElementsByTagName("ul")[0]; //부모태그
var aLiList = oUl.getElementsByTagName("li");
for( var i=0; i<aLiList.length; i++ ){
aLiList[i].style.color = "red";
}
</script>
</body>짝수행엔 파란색, 홀수행은 빨간색으로?
나머지 연산자 %를 사용한다. 나머지가 0일때는 짝수이고 0이 아닐때는 홀수가 된다.
<script>
var oLiList = document.getElementsByTagName("li");
for (var i = 0; i < oLiList.length; i++) {
if (i % 2 === 0) {
oLiList[i].style.color = "blue";
} else if (i % 2 !== 0) {
oLiList[i].style.color = "red";
}
}
</script>querySelector()
배열이 아닌 하나의 객체만 가져오는데, 조건에 맞는 첫번째 데이터를 객체로 가져온다. 객체가 없으면 null값이 return된다. 선택자에 구분자를 넣어줘야 한다.
<body>
<ol>
<li>WEB</li>
<li>HTML</li>
<li style="color:blue">CSS</li>
<li id="javascript">Javascript</li>
<li class="sapui5">SAPUI5</li>
</ol>
<ul>
<li>WEB</li>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
<li>SAPUI5</li>
</ul>
<script>
var oLi = document.querySelector("li");
oLi.style.color = "red";
var oJavascriptLi = document.querySelector("#javascript"); //id
oJavascriptLi.style.color = "orange";
var oSapui5Li = document.querySelector(".sapui5"); //class
oSapui5Li.style.color = "gray";
</script>
</body>
querySelectorAll()
하나만 가져오는 querySelector 말고 여러개를 가져올때 사용한다.
<body>
<ol>
<li>WEB</li>
<li>HTML</li>
<li style="color:blue">CSS</li>
<li id="javascript">Javascript</li>
<li class="sapui5">SAPUI5</li>
</ol>
<ul>
<li>WEB2</li>
<li>HTML2</li>
<li>CSS2</li>
<li>Javascript2</li>
<li>SAPUI52</li>
</ul>
<script>
var oLiList = document.querySelectorAll("li"); //tagname은 대소문자 구분x, 나중에 가져올때만 대문자로 리턴
for( var i=0; i<oLiList.length; i++ ) {
oLiList[i].style.color = "red";
}
var oJavascriptLi = document.querySelector("#javascript");
oJavascriptLi.style.color = "skyblue";
</script>
</body>querySelectorAll("li") 여기서 가져오는 tagname은 대소문자 구분하지 않는다. 값을 가져와서 보여줄때는 대문자로 리턴한다.
'Fiori > UI5' 카테고리의 다른 글
| [JavaScript] Element 속성 (0) | 2023.03.07 |
|---|---|
| [JavaScript] Element 식별자 (0) | 2023.03.06 |
| [JavaScript] Date (0) | 2023.03.06 |
| [JavaScript] 배열 Array 2 (0) | 2023.03.06 |
| [JavaScript] 배열 Array (0) | 2023.03.06 |
댓글