요소

Question

에서 childNode에 얻기 나는 다음과 같은 코드가 있습니다

<div class="className" id="div-1" onClick="selPic(this.id);"> 
    <span>some text</span> 
</div> 
<div class="className" id="div-2" onClick="selPic(this.id);"> 
    <span>some text</span> 
</div> 
<div class="className" id="div-3" onClick="selPic(this.id);"> 
    <span>some text</span> 
</div> 

내가 클릭 된 요소의 범위를 몇 가지 스타일을 제공하고 싶지만 내가주는 것보다 참조를 위해 부모 요소의 ID를 사용하는 대신 원합니다을 각각은 ID도 포함합니다.

내가 이것을 시도했지만 작동하지 않습니다

function selPic(id) { 
    document.getElementById(id).childNone[0].style.opacity = "1"; 
} 

어떤 아이디어?

Answer 1

액세스 :

document.getElementById(id).childNodes[1].style.opacity = "1"; 

Answer 2

그냥 코드에서 오타를 수정 :

function selPic(id) { 
    document.getElementById(id).childNodes[0].style.opacity = "1"; 
} 

Answer 3

가 childNodes와 childNone를 교체합니다.

function selPic(id) { 
    document.getElementById(id).childNodes[0].style.opacity = "1"; 
} 

Answer 4

이되지 childNode에 childNodes에해야한다 :

function selPic(id) { 
    var ss = document.getElementById(id).childNodes[0].style.opacity = "1"; 
    return ss; 
} 

Answer 5

당신은 오류 코드

의 비트 :

function selPic(id) { 
    document.getElementById(id).childNodes[0].style.opacity = "1"; 
} 

또한

---

이 함수를 돌려 사용하는 길들

function selPic(id) { 
document.getElementById(id).childNodes[0].style.opacity = "1"; 
} 

Answer 6

색인 번호로 하위 노드를 선택하는 것은 일반적으로 작동하지 않습니다. 스팬 요소의 수를 확실히 알 수 없기 때문입니다. 리스트를 작성한 방법에 따라 관심있는 스팬 이전에 공백 텍스트 노드와 같은 보이지 않는 자식 노드가있을 수 있습니다. 그렇기 때문에 0보다 인덱스 값 1을 사용해야한다는 사실에 놀랐습니다.

더 강력한 방법은 부모 요소에 getElementsByTagName('span')을 호출하여 그 안에있는 모든 범위를 검색하는 것입니다. 그런 다음 반환 된 배열의 첫 번째 항목을 가져옵니다.

또한 함수에 대한 인수는 요소의 ID가 아니라 강조하려는 요소 여야합니다.

<div class="className" id="div-1" onClick="selectPicture(this);"> 
    <span>some text</span> 
</div> 
<div class="className" id="div-2" onClick="selectPicture(this);"> 
    <span>some text</span> 
</div> 
<div class="className" id="div-3" onClick="selectPicture(this);"> 
    <span>some text</span> 
</div> 

을 그리고 함수는 다음과 같습니다 : 당신이 내 제안을 따르는 경우에, 당신의 HTML은 다음과 같을 것이다

function selectPicture(container) { 
    container.getElementsByTagName('span')[0].style.opacity = 1; 
} 

className의를 수정하여 스타일 변경을 구현하기 위해 더 나은 것 span을 작성하고 적절한 CSS를 작성해야하지만, 나는 그 고려 사항들을 여러분에게 맡길 것입니다. 배열이 범위의 불투명도를 수정 childNodes에 (하지 childNode에)의 요소 1