getElementsByClassname 또는 getElementsByTagName에 의해 생성 된 노드 목록이 값을 문자열로 표시 할 수있는 방법

getElementsByClassName/getElementsByTagName에 대해 알고있는 것은 해당 요소의 노드 목록을 작성하고 노드 목록 요소를 객체로 처리한다는 것입니다. nodelist 내부 요소의 innerHTML을 표시하고 싶지만 객체이기 때문에 불가능한 것처럼 보입니다.getElementsByClassname 또는 getElementsByTagName에 의해 생성 된 노드 목록이 값을 문자열로 표시 할 수있는 방법

예 :

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
    <script src="javascript.js"></script> 
</head> 
    <body> 
     <p id="pp"></p> 
     <button onclick="test()">push to test</button> 
     <p>dog</p> 
     <p>cat</p> 
     <p>snake</p> 
    </body>

//javascript.js이 파일은

function test() { 
    var paragraph = document.getElementsByTagName("p"), 
     para1 = paragraph[0].innerHTML, 
     ansBox = document.getElementById("pp"); 
    ansBox.innerHTML = para1; 
}

이 더 긴 코드의 압축 된 버전입니다. 나는 para1 변수가 문자열이어야하고 할당 문은 그 문자열을 ansBox.innerHTML에 할당해야한다고 생각하지만, 대신 나는 아무것도 얻지 못한다. 나는이 코드의 여러 버전을 수정하지 않았다. ansBox에 노드리스트의 텍스트 요소를 표시하려면 어떻게해야합니까?

출처

2017-05-07 JaMe

위의 예에서 HTML 열기 및 닫기 태그를 추가하는 것을 잊었습니다. 죄송합니다. – JaMe

스크립트가로드하지만 DOM이로드되지 않은 아직 당신이

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
</head> 
    <body> 
     <p id="pp"></p> 
     <button onclick="test()">push to test</button> 
     <p>dog</p> 
     <p>cat</p> 
     <p>snake</p> 
     <script src="javascript.js"></script> <!-- load it here --> 
    </body>

또한

paragraph[0] 및 ansBox처럼 head 내부에 스크립트를로드하는 경우 HTMLParagraphElement 그냥 그렇게 당신이하지 않는 알고 같은 DOM 참조 내부 (처음에는 비어 있음)

출처

2017-05-07 03:24:27 Dummy

머리글에 스크립트를 넣으면 문서로드 프로세스가 지연 될 수 있지만 스크립트 자체는로드됩니다. 버튼의 클릭 이벤트까지 실행되지 않아야합니다. 또한 단락 [0]과 ansBox는 다른 p 태그를 참조합니다. 단락 [0]은 getElementByTagId 메소드의 일부이므로 노드 목록 객체이며 ansBox는 유일한 태그 인 getElementById와 함께 할당됩니다. getElementById는 ID가 할당 된 유일한 태그이므로 다른 태그에는 포함되지 않습니다. 예 ansBox는 빈 상태로 할당되었지만 우연히 다시 할당됩니다. – JaMe

@JaMe ** 단락은 HTMLCollection입니다. ** paragraph [0] **는 문서의 ** 처음 **'p' 태그입니다. ** 같은 요소는 ansBox에 의해 참조 된 ***, 그래서 귀하의 코드는 자기 할당, 당신은 여전히 API에 대해 혼란 스러울 것 같아 귀하의 연구 [Element.getElementsByTagName()] (https : // developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName) – Dummy

Dummy, (사용자 이름을 읽는 것만으로) 감사합니다. 문제는 첫 번째 단락에 ID를 할당하여 '정상'p 태그를 사용하여 해당 단락을 효과적으로 제거했지만 여전히 0으로 색인화 된 것입니다. 또한 분명히 노드리스트의 차이를 알지 못합니다. 및 HTMLCollection. 나는 갈 길이 멀다! – JaMe

위의 JavaScript 코드에서 빈 요소 내부에서 HTML을 가져 와서 그 내용을 자체에 할당하고 물론 빈 값을 얻습니다.

출처

2017-05-07 03:38:06

빈 HTML 요소를 가져 와서 노드 목록 요소 para1에 단락 변수에서 노드 목록 요소를 할당했습니다. getElementsByTag 메소드로 인해 HTML 콜렉션이 지정되었습니다. 그것의 다른 것들 – JaMe

아마 당신은 틀린,'paragraph' 변수는 [HTMLCollection] (https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName)을 반환합니다. 변수'para1'은'HTMLCollection'이 아닙니다. 위의 코드에서'paragraph [0]'은'HTMLParagraphElement (https://developer.mozilla.org/en-US/docs/Web/API/HTMLParagraphElement)를 반환하는데, 이것은' HTMLCollection', 즉 위의 코드에서 id가 "pp"인 요소 p. –

고마워, 티엔 커피. 당신 말이 맞아요. ID 태그를 사용하면 getElementByTag 메서드가 해당 태그를 건너 뛸 수 있다고 생각했습니다. 아니! 그것은 여전히 카운트하고 스스로에게 빈 태그를 할당 할 수있었습니다 :) 도와 주셔서 감사합니다. – JaMe

getElementsByClassname 또는 getElementsByTagName에 의해 생성 된 노드 목록이 값을 문자열로 표시 할 수있는 방법

답변

관련 문제