javascript - 从输入控件中检索特定模式类型的子节点

Question

我有一个旧文档，其中包含一些基于架构的附加标签:

<td class="inputControl">
    <input id="OffsetAccountsRequired_R0" type="radio" name="OffsetAccountsRequired_N" value="Y" >Yes
        <tla:instruction type="unhide" value="OffSetAccountsApp1"></tla:instruction>
        <tla:instruction type="jscript" value="//Irrelevant JavaScript here"></tla:instruction>
    </input>
    <input id="OffsetAccountsRequired_R1" type="radio" name="OffsetAccountsRequired_N" value="N">No
        <tla:instruction type="hide" value="OffSetAccountsApp1~OffSetAccountsAppls1and2"></tla:instruction>
    </input>
    <input id="OffsetAccountsRequired_R2" type="radio" name="OffsetAccountsRequired_N" value="" checked="true" class="hiddenRadio" onclick="validate_js(this)">
        <tla:instruction type="hide" value="OffSetAccountsApp1~OffSetAccountsAppls1and2"></tla:instruction>
    </input>
</td>

以及一些由 validate_js(this) 事件调用的可怕的 JavaScript，这些事件适用于这些标签:

// Calling line - in this case 'obj' is the input control 'OffsetAccountsRequired_R2'
tlaInstructions = getInstructionTags(obj, 'tla:instruction');

function getInstructionTags(inputID,tagType){
    var coltla;
    var coltlaArray = new Array();
    tagType = tagType.toUpperCase();

        var tlaFinished = false;
        coltla = inputID.parentNode.childNodes;
        for(var i=0;i<coltla.length;i++){
            if(coltla[i].nodeName.toUpperCase() == 'INPUT' && coltla[i].id == inputID.id){
                for(var j=i;j<coltla.length;j++){
                    if(coltla[j].nodeName.toUpperCase() == tagType){
                        coltlaArray[coltlaArray.length] = coltla[j];
                    }

                    if(coltla[j].nodeName.toUpperCase() == '/INPUT'){
                        tlaFinished = true;
                        break;
                    }
                }
            }

            if(tlaFinished){
                break;
            }
        }

        return coltlaArray;
    }
}

我的任务是使这个 JavaScript 符合规范，以便它可以在 IE9 中工作(它以前只在 vb6 Web 浏览器控件中使用过)。

据我所知，以我有限的 JavaScript 技能，代码的目的是从输入元素中检索所有 tla:instruction 节点。它使用行 coltla = inputID.parentNode.childNodes

来完成此操作

这看起来很奇怪，因为它上升了一个级别，然后又下降了一个级别。我认为它这样做是因为如果您仅使用 coltla = inputID.getElementsByTagName('tla:instruction')，检索 tla:instruction 元素不会检索节点。

是否有更简单的方法从输入控件中检索特定类型的元素数组？

Answer 1

根据 HTML 规范 input标签不能有任何内容。

Start tag: required, End tag: forbidden

因此，它们附加到输入元素的父元素，这就是为什么 inputID.parentNode.childNodes

这是使用 nextSibling 的简化版本

function getInstructionTags(inputID,tagType){
  var coltla;
  var coltlaArray = [];
  tagType = tagType.toUpperCase();

  var tlaFinished = false;
  var next = inputID;
  while ( !tlaFinished ) {
    var next = next.nextSibling;
    tlaFinished = next == null;
    if ( !tlaFinished ) {
      var nodeName = next.nodeName.toUpperCase();
      if ( nodeName == tagType ) {
        coltlaArray.push(next);        
      } else {
        tlaFinished = (nodeName != '#TEXT');
      }
    }
  }
  return coltlaArray;
}