728x90
반응형
<DOM 탐색 메서드>
1. element의 id로 탐색: element 하나 선택(중복불가) - 반환: 값 하나(node)
※id: 유일한 하나
- document.querySelector("#test");
-document.getElementById("test");
2. element의 name으로 탐색: element 여러개를 선택 - 반환: 배열(nodelist)
※id를 제외한 다른 요소들은 모두 elements(복수)로 받는다.
3. element의 태그 이름으로 탐색: element 여러개를 선택 - 반환: 배열(nodelist)
- document.querySelectorAll("#test");
- document.getElementByTagName("p");
- document.getElementByName("test02");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function searchQS(){
//var doc = document.querySelector("#test"); //node
//doc.innerHTML = "querySelector('css 표현식')";
var doc = document.querySelectorAll("#test"); //nodeList
doc[0].innerHTML = "querySelectorALL('css 표현식')";
}
function searchID(){
var doc = document.getElementById("test");
doc.innerHTML = "id로 탐색합니다.";
doc.style.color = "green";
}
function searchName(){
// nodeList 리턴
var doc = document.getElementsByName("test02");
doc[1].value = "name 속성으로 엘리먼트 탐색";
alert(doc + " : " + typeof doc); //디버그 할때, 잘하고 있는지 궁금할 때
alert(doc[1] + " : " + typeof doc[1]);
console.log(doc);
}
function searchTagName(){
var doc = document.getElementsByTagName("p");
//tagName으로 탐색합니다. 색상 purple으로 바꾸자
doc[3].innerHTML = "tagName으로 탐색합니다.";
doc[3].style.color = "violet";
}
</script>
</head>
<body>
<p onclick="searchQS();">DOM 탐색 메서드</p>
<p id="test" onclick="searchID();">
1. element의 id로 탐색: 엘리먼트 하나 선택(중복불가!!) - 반환: 값 하나</p>
<p onclick="searchName();">
2.element의 name으로 탐색: 엘리먼트 여러개를 선택 - 반환:배열(nodeList)<br/>
<input type="text" name="test02"/><br/>
<input type="text" name="test02"/><br/>
<input type="text" name="test02"/>
</p>
<p onclick="searchTagName();">
3. element의 태그 이름으로 탐색: element 여러개를 선택 - 반환 : 배열(nodeList)</p>
</body>
</html>
728x90
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JS]object (0) | 2020.07.28 |
|---|---|
| [JS]node, nodelist (0) | 2020.07.28 |
| [JS]rolling (0) | 2020.07.28 |
| [JS]closure (0) | 2020.07.28 |
| [JS]함수function_02 (0) | 2020.07.28 |
