纯Java脚本将文本插入 <input type=“text”> 没有属性

Question

 <div style="top: 0px; left: 0px;" class="uiInlineBlock uiMenuHolder"> <div> <input type="text"> </div> </div> 

要选择我使用的输入元素：

inputelement = document.getElementsByClassName('uiInlineBlock uiMenuHolder')[0].children[0].children[0];

问题是我试图将文本放入文本区域内，但是通过使用值我设置了值，但文本字段仍然为空。 如何使用纯JavaScript修复此问题？

Answer 1

您可以使用querySelectorAll和级联选择器选择第一个div，因此选择第二个，最后选择输入，而不是从外部div开始逐步选择：

• div.uiInlineBlock.uiMenuHolder选择第一个div
• div选择子div
• input [type = text]选择子输入文本字段

因此，完整字符串'div.uiInlineBlock.uiMenuHolder div input [type = text]'将选择div中包含的div中具有以下两个类的所有输入文本字段：uiInlineBlock uiMenuHolder。

因为querySelectorAll将返回一个列表，并且由于您只有一个输入，所以您需要采用结果的第一个元素。

 window.onload=function() { var inputEle = document.querySelectorAll('div.uiInlineBlock.uiMenuHolder div input[type=text]'); inputEle[0].value = 'your value'; } 

 <div style="top: 0px; left: 0px;" class="uiInlineBlock uiMenuHolder"> <div> <input type="text"> </div> </div> 

Answer 2

 inputelement = document.getElementsByClassName('uiInlineBlock uiMenuHolder')[0].children[0].children[0] inputelement.value = 'your value'; 

 <div style="top: 0px; left: 0px;" class="uiInlineBlock uiMenuHolder"> <div> <input type="text"> </div> </div> 

Answer 3

更安全

inputelement = document.querySelector('.uiInlineBlock.iMenuHolder input');

inputelement.value = 'your value';