좋아, 나는 전에 JavaScript를 봤다. 그러나 내가 작성한 가장 유용한 것은 CSS 스타일 스위처이다. 그래서 나는 이것에 다소 익숙하지 않습니다. 다음과 같은 HTML 코드가 있다고 가정 해 봅시다.
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
“Hello world!”를 어떻게 바꾸겠습니까? “안녕 세상에!” ? document.getElementByClass와 document.getElementById의 작동 방식을 알고 있지만 좀 더 구체적으로 설명하고 싶습니다. 이전에 요청한 경우 죄송합니다.
답변
먼저, 같은 기능을 가진 요소를 선택해야합니다 getElementById
.
var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
getElementById
하나의 노드 만 반환하지만 getElementsByClassName
노드 목록을 반환합니다. 해당 클래스 이름을 가진 요소는 하나뿐이므로 (내가 알 수있는 한) 첫 번째 요소 만 얻을 수 있습니다 (즉 [0]
, 배열과 같습니다).
그런 다음으로 HTML을 변경할 수 있습니다 .textContent
.
targetDiv.textContent = "Goodbye world!";
var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
답변
다음과 같이 할 수 있습니다 :
var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
list[0].innerHTML = "Goodbye world!";
}
또는 오류 검사를 줄이고보다 간결하게 작업을 수행하려는 경우 다음과 같이 한 줄로 수행 할 수 있습니다.
document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";
설명에서 :
- 으로 요소를 얻습니다
id="foo"
. - 그런 다음 해당 객체 내에 포함 된 객체를 찾습니다
class="bar"
. - 배열과 비슷한 nodeList를 반환하므로 해당 nodeList의 첫 번째 항목을 참조하십시오.
- 그런 다음
innerHTML
해당 항목을 설정하여 내용을 변경할 수 있습니다.
주의 사항 : 일부 이전 브라우저는 지원하지 않습니다 getElementsByClassName
(예 : 이전 버전의 IE). 이 기능은 누락 된 경우 제자리에 고정 될 수 있습니다.
여기에서는 브라우저 호환성을 걱정하지 않고 내장 CSS3 선택기 지원 기능이있는 라이브러리를 사용하는 것이 좋습니다 (다른 사람이 모든 작업을 수행하도록). 도서관에서 그렇게하고 싶다면 Sizzle가 잘 작동합니다. Sizzle에서는 다음과 같이 수행됩니다.
Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";
jQuery에는 Sizzle 라이브러리가 내장되어 있으며 jQuery에는 다음과 같습니다.
$("#foo .bar").html("Goodbye world!");
답변
이것이 IE 7 이하에서 작동 해야하는 경우 getElementsByClassName이 모든 브라우저에 존재하지는 않는다는 것을 기억해야합니다. 이 때문에 고유 한 getElementsByClassName을 작성하거나 시도 할 수 있습니다.
var fooDiv = document.getElementById("foo");
for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
childNode = fooDiv.childNodes[i];
if (/bar/.test(childNode.className)) {
childNode.innerHTML = "Goodbye world!";
}
}
답변
재귀 기능 :
function getElementInsideElement(baseElement, wantedElementID) {
var elementToReturn;
for (var i = 0; i < baseElement.childNodes.length; i++) {
elementToReturn = baseElement.childNodes[i];
if (elementToReturn.id == wantedElementID) {
return elementToReturn;
} else {
return getElementInsideElement(elementToReturn, wantedElementID);
}
}
}
답변
가장 쉬운 방법은 다음과 같습니다.
function findChild(idOfElement, idOfChild){
let element = document.getElementById(idOfElement);
return element.querySelector('[id=' + idOfChild + ']');
}
또는 더 잘 읽을 수 있습니다.
findChild = (idOfElement, idOfChild) => {
let element = document.getElementById(idOfElement);
return element.querySelector(`[id=${idOfChild}]`);
}
답변
document.getElementByID 는 클라이언트 측이 어떤 ID를 고정시키는 지 제어하기 때문에 작동 하지 않아야합니다 . 아래 예제와 같이 jquery를 사용해야합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
이것을 사용하십시오 :
$("[id^='foo']").find("[class^='bar']")
// do not forget to add script tags as above
편집 작업을 제거하려면 “.”만 추가하십시오. 뒤에 작업을 수행