// DOM API - 매우중요
// ★★★ element(= tag) 접근 방법
<body>
<ul id="u1" class="findParentClass"> 이건 남아있니? -> 아니 다 지워져..
<li id="x1">하이하이</li>
<li class="x2">하이하이</li>
<li class="x2">하이하이</li>
<li class="x2">하이하이</li>
<li>하이하이</li>
</ul>
<ul id="u2">
<li class="x2">반갑반갑</li>
<li class="x2">반갑반갑</li>
<li class="x3">반갑반갑</li>
<li>반갑반갑</li>
<li class="x3">반갑반갑</li>
</ul>
<button onclick="test1()">테스트1</button>
<button onclick="test2()">테스트2</button>
<button onclick="test3()">테스트3</button>
<button onclick="test4()">테스트4</button>
<button onclick="test5()">테스트5</button>
<button onclick="test6()">테스트6</button>
<button onclick="test7()">테스트7</button>
<button onclick="test8()">테스트8</button>
// 1.id로 접근
// getElementById : 얘만 단수 (어차피 ID는 무조건 하나만 생성이니까 머..)
// ---> ID가 없을 때 : null리턴
// getElements... : 나머지는 복수 -> 리스트를 리턴해준다 (ex. getElementsByClassName)
// ---> class가 없을 때 : 배열을 리턴, 내용은 없으니까 반복문이 안돌아가겠지
function test1(){
// document.getElementById("pppp"); --> pppp라는 ID가 없으므로 null을 리턴하겠지
const getX1 = document.getElementById("x1");
getX1.innerText = "innerText는 거의 setter야. 글자를 바꿔주지!";
}
// 2. class로 접근
function test2(){
const getX2List = document.getElementsByClassName("x2");
// return이 복수 = 배열을 리턴하는거임 = 하지만 JS는 타입이 없으니까 그냥 변수 똑같이 쓰면 되겠지
// ---> 하지만 변수명은 s나 list를 써주는게 보기 좋겠찌?
for(getX2 of getX2List){
getX2.innerText = "클래스로 접근해서 글자 바꾸는중";
}
}
// 3. 특정 tag를 들어가서, 그 안에 요소들만 변경하고 싶을 때
function test3(){
const getU2 = document.getElementById("u2");
const getU2ElementList = getU2.getElementsByClassName("x2");
// --> 이러면 u2안에있는 x2클래스 전체를 가져오겠지. 그러니까 반복문필요
for(e of getU2ElementList){
e.innerText = "u2의 x2만 따로 바꿀 수 있겠지";
}
}// 3-1. 위에걸 좀 더 편하게 해보자 --> querySelector
// querySelector(-> 단수 리턴), querySelectorAll(-> list 리턴)
function test4(){
const selectX1 = document.querySelector("#x1");
const selectX2List = document.querySelector(".x2"); // class가 5개여도 맨 앞에 1개만 선택한다
selectX2List.innerText = "셀렉터 적용(이러면 첫번째 class만 선택됨)";
}
function test5(){
const selectX3List = document.querySelectorAll(".x3");
for(e of selectX3List){
e.innerText = "셀렉터 all 적용";
}
const qqqq = document.querySelectorAll("#u2 > .x2");
for(e of qqqq){
e.innerText = "셀렉터 all 활요요요요용";
}
}
// 4. parent
function test6(){
const getIdX1 = document.getElementById("x1");
getIdX1.parentElement.innerText = "parentElement 활용"; // --> ID x1의 부모를 따라가서, 그 전체의 내용을 ~~이렇게 바꾸겠따
// getIdX1.parentElement.parentElement.innerText = "이렇게 따라서 계속 올라가면 다지워져 ㅠ";
}
// 5. child (단수) / children (복수)
function test7(){
const getIdU1 = document.getElementById("u1");
for(e of getIdU1.children){
e.innerText = "u1의 child전체를 바꾸는중";
}
}
// 6. 특정 parents찾기 (--> 계속 따라올라가는거 말고!)
// ** querySelector의 반대 경우라고 생각하면 편하징?
function test8(){
// "클릭" 버튼을 선택합니다.
var targetButton = document.getElementById("target");
// closest 메서드를 사용하여 가장 가까운 id가 "parent"인 조상 요소를 찾습니다.
var parentElement = targetButton.closest("#grandparent");
// 결과를 콘솔에 출력합니다.
console.log(parentElement);
}// closest(선택요소) :
// 선택한 요소를 포함한 상위 요소 중에서 지정한 선택자에 해당하는 요소 중
// 바깥으로 나가면서 가장 첫 번째 요소를 선택한다.
// 이 메소드가 요소의 탐색을 방식은 .parents() 메소드와 비슷하지만,
// 해당 요소의 상위 요소뿐만 아니라 해당 요소 자신까지도 포함하여 탐색한다는 점이 다르다.
'JavaScript > DAY 36 _ 23.10.13' 카테고리의 다른 글
| Element의 생성 / 삭제 / 추가 (1) | 2023.10.16 |
|---|---|
| DOM element 조작 (0) | 2023.10.16 |
| DOM Basic (0) | 2023.10.13 |