javascript, dom - select의 자식 노드가 매 2 번으로 번호가 매겨진 이유

이상한 문제가 있습니다. 선택의 자식 노드를 통해 가고 싶습니다. 간단한 권리?javascript, dom - select의 자식 노드가 매 2 번으로 번호가 매겨진 이유

<select multiple="multiple" id="selectBoxOne" size="5" class="selectListBox"> 
      <option value="0" id="multiple0" {MULTIPSEL0}>0</option> 
      <option value="1" id="multiple1" {MULTIPSEL1}>1</option> 
      <option value="2" id="multiple2" {MULTIPSEL2}>2</option> 
      <option value="3" id="multiple3" {MULTIPSEL3}>3</option> 
      <option value="4" id="multiple4" {MULTIPSEL4}>4</option> 
      <option value="5" id="multiple5" {MULTIPSEL5}>5</option> 
    </select>

것은 그 DOM은 다음과 같습니다이다 : 그래서 내 HTML입니다 enter image description here

그래서 문제는 내가 가지고있다가 실제 노드 사이의 빈 노드. 실제 노드는 1,2,3,4,5 대신 1,3,5,7,9,11입니다. 그래서 내가 뭔가를 사용한다면 :

 alert(document.getElementById('selectBoxOne').childNodes[2].innerHTML);

얻을 수 없습니다.

저는이 스크립트를 여러 곳에서 사용하기 때문에 홀수 만 읽을 수는 없습니다. (다른 곳은 보통이므로 빈 사이에는 아무 것도 없습니다.)

왜 이런 일이 있었는지 또는 어떻게 해결할 수 있습니까? 시간 내 주셔서 감사합니다.

참고 : {MULTIPSEL4} -> 템플릿 변수입니다. 이 경우 empy입니다. 다른 경우에는 select = "selected"입니까?

JS :

for (i = 1; i <= optionNumber; i++) 
{ 
    selectOptions[i-1] = document.getElementById('selectBoxOne').childNodes[i].innerHTML;  
} 
alert(selectOptions);

결과 : 당신이 길을 잘못하고있는

enter image description here

출처

2011-08-31 zozo

옵션 요소 사이에 공백이 있습니다. 파서가 각각의 텍스트 노드를 생성하고 있습니다.

HTML 인식 DOM API를 사용하는 경우 일반 DOM에서는 .childNodes 대신 getElementsByTagName('option')을 사용하거나 .options을 사용하십시오.

출처

2011-08-31 08:22:21 Quentin

참고 : 텍스트 노드와 요소 노드를 구별하기 위해 [Node.nodeType] (https://developer.mozilla.org/En/DOM/Node.nodeType)을 확인할 수도 있습니다. 또는 단순히 Node.childNodes 대신 [Element.children] (https://developer.mozilla.org/en/DOM/Element.children)을 사용하십시오. –

반복 옵션을 드롭 다운하는 올바른 방법은 다음과 같습니다

var oDDL = document.getElementById("selectBoxOne"); 
for (var i = 0; i < oDDL.options.length; i++) { 
    var option = oDDL.options[i]; 
    if (option.selected) { 
     alert("option with value " + option.value + " is selected"); 
    } 
}

그 텍스트 노드는이 때문에 당신이 option 요소들 사이의 줄 바꿈과 공백 문자를 HTML 소스입니다. 당신이 항목을 반복하는 더 좋은 방법이 있기 때문에 필요 없어함으로써

<select multiple="multiple" id="selectBoxOne" size="5" class="selectListBox"><option value="0" id="multiple0" {MULTIPSEL0}>0</option><option value="1" id="multiple1" {MULTIPSEL1}>1</option><option value="2" id="multiple2" {MULTIPSEL2}>2</option><option value="3" id="multiple3" {MULTIPSEL3}>3</option><option value="4" id="multiple4" {MULTIPSEL4}>4</option><option value="5" id="multiple5" {MULTIPSEL5}>5</option></select>

: 당신은 하여이를 방지 할 수 있습니다.

출처

2011-08-31 08:21:49

무엇이 잘못 되었나요? 코드가 올바르게 순환되지만 chileds 2,4,6,8,10,12에 대해서는 정의되지 않았습니다. 왜냐하면 그들은 존재해서는 안되기 때문입니다. 또한 나는 이미 코드가 다른 선택을 위해 잘 작동한다고 말했다. 볼 자바 스크립트를 추가했습니다. – zozo

왜 나쁜 연습 코드를 사용하라고 주장합니까? 어쨌든 나는 초기 접근법에 잘못된 점을 추가했습니다. –

몇 가지 이유 때문에 .options이 작동하지 않습니다 (일부 동료와 일부 동료가 아닌 나를 위해 작동하지만 7 가지 요소로 인해 그 이유를 알 수 없습니다). 나는 공백을 제거하고 괜찮습니다 ... 여전히 ... 다른 페이지에 대해 왜 작동 했습니까? (거기에도 빈 공간이 있습니다.) – zozo

javascript, dom - select의 자식 노드가 매 2 번으로 번호가 매겨진 이유

답변

관련 문제