Question

＆＃13;

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

＆＃13;

选择我使用的输入元素：

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

问题是我试图将文本放在文本区域内，但是通过使用值我设置了值但文本字段仍为空。我怎么能用纯JavaScript来解决这个问题？

Answer 1

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 2

更安全

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

inputelement.value = 'your value';

Answer 3

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

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

所以完整的字符串＆＃39; div.uiInlineBlock.uiMenuHolder div输入[type = text]＆＃39;将选择包含在具有以下两个类的div中的div内的所有输入文本字段：uiInlineBlock uiMenuHolder。

因为querySelectorAll将返回一个列表，因为在您的情况下，您只有一个输入，您需要获取结果的第一个元素。

＆＃13;

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

＆＃13;

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

＆＃13;

纯Javascript将文本插入<input type =“text”/>，不带属性

3 个答案: