위치 기반의 자바 스크립트 요소를 기반으로 요소 노드 얻기

Question

노드를 위치에 넣는 Javascript 기능을 실험하고 있습니다. appendChild(document.getElementById("foo"))과 같은 것입니다. 그러나 주변 코드를 완전히 제어 할 수 없으며 일부 요소가 동일한 ID를 가질 가능성이 큽니다. 다음 고려 : 대부분의 브라우저에서

<div id="foo"> 
<span id = "bar">456</span> 
<script type="text/javascript">document.write(document.getElementById("bar").innerText);</script> 
</div> 

<hr> 

<div id="foo"> 
<span id = "bar">123</span> 
<script type="text/javascript">document.write(document.getElementById("bar").innerText);</script> 
</div> 

을 출력 될 것입니다 :이 결과는 나에게 전혀 놀랍지

456 456 
123 123 

인

456 456 
123 456 

아니라, 내가 원하는 것보다; 왜 이런 일이 일어나는 지 이해합니다. 내가 더 내가 스크립트 태그의 내용을 제외하고 아무것도 통제가없는 가정

document.write(myscriptnode.parent.childnodes['bar'].innerText) 

같은 자바 스크립트 호출을 할 수있는 기대했다,이 작업을 수행하는 방법은 무엇입니까?

Answer 1

jQuery와 같은 JavaScript 라이브러리를 사용하면 getElementById에서 CSS 선택기와 유사한 구문을 작성할 수 있으며 parent()와 같은 유용한 헬퍼 메소드도 사용할 수 있습니다.

http://jquery.com/

Answer 2

다음은이 문제를 해결하기 위해 매우 끔찍한 방법 : 오히려 현재 노드를 얻으려고 노력보다, 완료되면 다음 삭제, 임의의 ID로 새로운 노드를 작성합니다.

<div id="foo"> 
<span id = "bar">456</span> 
<script type="text/javascript"> 
    document.write('<span id = "bfrogtmp"></span>'); 
    var y = document.getElementById("bfrogtmp"); 
    document.write(y.parentNode.children['bar'].innerHTML); 
    y.parentNode.removeChild(y); 
</script> 
</div> 

<hr> 

<div id="foo"> 
<span id = "bar">123</span> 
<script type="text/javascript"> 
    document.write('<span id = "bfrogtmp"></span>'); 
    var y = document.getElementById("bfrogtmp"); 
    document.write(y.parentNode.children['bar'].innerHTML); 
    y.parentNode.removeChild(y); 
</script> 
</div>