将 InnerHTML 文本的获取结果转换为元素

Question

我有一些代码：

<table>
<tbody>
<tr>
<td id='myTdId'>
<input type='text' value='some value' />
</td>
</tr>
...
</tbody>
<table>

我想获取 td 元素myTdId内部 HTML 并获取文本输入的值。可能吗？

例如：

var tdInnerHTML = document.getElementById('myTdId').innerHTML;
// convert this to element operation and access to value of it ... 
console.log(tdInnerHTML.value); // :(

请帮助我，谢谢...

编辑：我无法访问输入文本！

Answer 1

使用子节点进行导航怎么样？

它是一个包含包含元素节点的数组。

在您的情况下...

var tdInputVal = document.getElementById('myTdId').childNodes[0].value;
console.log(tdInputVal ); // :(

Answer 2

你能在输入本身上添加 Id 吗？

<table>
<tbody>
<tr>
<td id='myTdId'>
<input type='text' value='some value' id="myInput" />
</td>
</tr>
...
</tbody>
<table>

然后通过以下方式访问它

var input = document.getElementById('myInput').value;

或通过标签访问它

var input = document.getElementsByTagName("input")[0].value;

Answer 3

另一种明确的方法是在你的HTML上id或class，这样你就可以很容易地获得内部value。

例如

.HTML：

<input id="text-input" value="">

爪哇语

var inputValue = document.getElementById('text-input').value;
console.log(inputValue);

j查询版本

var inputValue = $('#text-input').val();

希望这有帮助。

Answer 4

我认为你不需要在该元素上调用innerHTML。您需要获取 id 为 "myTdId" 的 td 元素的子元素。为此，您可以使用

var tdElement = document.getElementById('myTdId');
console.log(tdElement.children[0].value);

这应该会让你得到 td 元素的值，而无需为 td 元素设置 id 或类。

我假设您在 td 中只有一个元素;

我没有测试代码，但它应该可以工作。

Answer 5

使用 getElementById 比在结果对象上使用也getElementBy_XXX . 如果使用 getElementsByClassName 或 TagName，您将获得子元素数组。

//ELEMENT
var tdElement = document.getElementById('myTdId');
// INNER HTML
var tdInnerHTML = document.getElementById('myTdId').innerHTML;
var childElement = tdElement.getElementsByTagName("input");
//if td is only and always first element than we can use  : 
//childElement[0]
alert(childElement[0].value)

<table>
<tbody>
<tr>
<td id='myTdId'>
<input type='text' value='some value' />
</td>
</tr>

</tbody>
<table>

<script>

//  I dont use this function but you can if you want
function getElementInsideElement(baseElement, wantedElementID) {
var elementToReturn;
for (var i = 0; i < baseElement.childNodes.length; i++) {
elementToReturn = baseElement.childNodes[i];
if (elementToReturn.id == wantedElementID) {
return elementToReturn;
} else {
return getElementInsideElement(elementToReturn, wantedElementID);
}
}
}

</script>

Answer 6

// Use querySelector
var input = document.querySelector('#myTdId input');
var val = input.value;