1. Description
| querySelectorAll("*") |
| 부모 Element하위에 있는 모든 자식 Element를 찾는다. |
2. Example
#1버튼을 클릭하면 <div id="_1q74-example">태그 하위의 모든 Element를 찾아서, 태그이름과 텍스트를 표시한다.
document.getElementById("_1q74-example").querySelectorAll("*")This is a box in yellow
box1
This is a box in green
box2
All Elements
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<title>[1q74.tistory.com] javascript/native/selector/all</title>
<meta charset="utf-8">
<style>
.box, .box1, .box2 {
width:200px;
height:25px;
}
.box1 {
background-color:yellow;
}
.box2 {
background-color:green;
}
</style>
</head>
<body>
<div id="_1q74-example">
<p>This is a box in yellow</p>
<div class="box1">box1</div>
<br/>
<p>This is a box in green</p>
<div class="box2">box2</div>
<hr/>
</div>
<div id="_1q74-example-bottom">
<h4>All Elements</h4>
<div id="query-selector-all-result">
</div>
<br/>
<br/>
<button name="btn-find">#1. document.getElementById("_1q74-example").querySelectorAll("*")</button>
</div>
<script>
const elements = document.getElementById("_1q74-example").querySelectorAll("*");
const result = document.getElementById("query-selector-all-result");
const btnFind = document.getElementsByName("btn-find")[0];
btnFind.addEventListener("click", function() {
result.innerHTML = "";
for(let i = 0; i < elements.length; i++) {
let tagNames = "";
if(i > 0) tagNames += "<br/>";
tagNames += elements[i].tagName + " : " + elements[i].textContent;
result.innerHTML += tagNames;
}
});
</script>
<style>
#_1q74-example-bottom button {
background: lightgray;
border: 5px outset;
min-height: 40px;
}
#_1q74-example-bottom button:active {
border: 2px inset;
min-height: 40px;
}
</style>
</body>
</html>4. File
[javascript][native][selector]all.html
0.00MB
5. See also
【jQuery/Selector #1】All Selector (“*”)
1. Description 부모 Element하위에 있는 모든 자식 Element를 찾는다. [EX-1] 하위의 모든 Element찾는다. $("*") [EX-2] id가 _1q74-example인 Element의 하위에 있는 모든 Element를 찾는다. $("#_1q74-example *") 2. Example #1버
1q74.tistory.com
6. Reference
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll