JavaScript：查找表单输入的第一个子项是输入框还是选择下拉列表

Question

我正在尝试在HTML格式内搜索DD标记的表单上编写脚本。 当找到标签时我想检测DD标签中包含的第一个子项是输入框还是选择框，以及是否将焦点设置为它。 在一个页面上可能有多个DD标记，所以我只关心它的第一个实例。

本质上，我想要做的是当页面加载时，它关注页面上的第一个表单字段，以便用户可以直接输入数据而无需单击框或下拉列表。 我需要他的逻辑用纯JS编写（所以请不要使用JQuery解决方案）并且如果给定页面可能有一个输入框作为第一个字段或选择框作为第一个字段。

JSFiddle： http ： //jsfiddle.net/3UqSq/

任何帮助都会很棒！

输入框的HTML：

  <div class="container">
     <form class="myform">
       <fieldset>
          <dl>
            <dt><label for="input1">Label 1</label></dt>
            <dd>
               <input id="input1" type="text" value=""/>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
            <dt><label for="input2">Label 2</label></dt>
            <dd>
               <input id="input2" type="text" value=""/>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
         </dl>
       </fieldset>
     </form>
   </div>

选择框的HTML：

  <div class="container">
     <form class="myform">
       <fieldset>
          <dl>
            <dt><label for="input1">Label 1</label></dt>
            <dd>
               <select id="input1">
                 <option>Option 1</option>
                 <option>Option 2</option>
                 <option>Option 3</option>
               </select>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
            <dt><label for="input2">Label 2</label></dt>
            <dd>
               <input id="input2" type="text" value=""/>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
               <div>This is some extra DIV's for copy</div>
            </dd>
         </dl>
       </fieldset>
     </form>
   </div>

Answer 1

将其包含在页面底部的脚本中或加载后：

​var dd = document.getElementsByTagName('dd')[0];

if (dd.children[0].tagName.toLowerCase() == 'select' ||
    dd.children[0].tagName.toLowerCase() == 'input') {
    dd.children[0].focus();
}

见演示