如何获取一个html结构元素下特定的子元素？

Question

<div  class="s-input s-input--small s-input--suffix" style="width: 350px;">
    <div class="s-input__wp">
         <input type="text" placeholder="请输入" class="s-input__inner"> 
     </div> 
</div>

结构是这样的，我能获取当前最外层元素el，如何能获取到最里层的input呢
比如已经知道input节点nodeName,假如input的层级嵌套很深，该怎么获取呢
层级嵌套里面只有一层，所以每个元素里只有一个子元素，我只想获取最里层时input的

Answer 1

为这个Input添加一个自定义的属性 data-xxx="xxx"

然后 document.querySelector('[data-xxx]');
或者el.querySelector('[data-xxx]');