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

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

本质上，我试图做的是当页面加载时，它关注页面上的第一个表单字段，这样用户就可以直接输入数据，而无需单击框或下拉列表。我需要用纯JS编写逻辑（请不要使用JQuery解决方案），并考虑给定页面的第一个字段是输入框还是选择框

JSFiddle：

任何帮助都会很好

输入框的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>

标签1
这是一些额外的副本
这是一些额外的副本
这是一些额外的副本
标签2
这是一些额外的副本
这是一些额外的副本
这是一些额外的副本

选择框的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>

标签1
选择1
选择2
选择3
这是一些额外的副本
这是一些额外的副本
这是一些额外的副本
标签2
这是一些额外的副本
这是一些额外的副本
这是一些额外的副本

在页面底部或加载后的脚本中包含以下内容：

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

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