javascript - Javascript：检索具有ID的元素内的隐藏字段值

Question

猜我有这个

<td id="c1s2a"><input type="hidden" name="allow_move" value="1"></td>

如何访问带有 id c1s2a 的元素“allow_move”？有很多 allow_move 命名输入，所以我不能使用 document.getElementsByName("allow_move")。

我试过这个：document.getElementById("c1s2a").allow_move=0;但它没有用。 （是的，我想改变它的值）

Answer 1

如果您在 td 中确实只有输入标签（没有其他文本、空格或标签），您可以简单地使用以下内容来获取对该元素的引用：

document.getElementById("c1s2a").firstChild;

要设置它的值：

document.getElementById("c1s2a").firstChild.value = 0;

还有一个叫做 的属性firstElementChild，它会忽略文本节点和注释节点，但遗憾的是在 9 版之前的 IE 中不支持。

---

现代浏览器上的另一个选项是document.querySelector，它采用 CSS 选择器并返回一个 DOM 节点。支持表说是 IE8+，但听说 IE8 存在一些兼容性问题。

例子：

document.querySelector("#c1s2a input").value = 0;

或者

document.querySelector("#c1s2a input[name='allow_move']").value = 0;

Answer 2

如果您不能依赖输入作为第一个孩子，请尝试以下操作：

document.getElementById("c1s2a").children["allow_move"]

见http://jsfiddle.net/KemmU/

Answer 3

我会发誓

document.getElementById("c1s2a").getElementsByName("allow_move")[0].value=0

会起作用，但正如这个小提琴所示，它为 cell.getElementsByName 提供了 Uncaught typeerror ！！！

这是我不太满意的替代方案

window.onload=function() {
  var inputs = document.getElementsByName("allow_move");
    for (var i=0, n=inputs.length;i<n;i++) {
        console.log(inputs[i].parentNode.id)
        if (inputs[i].parentNode.id=="c1s2a") {
            inputs[i].value=0;
        }    
    }
}

Answer 4

有多种方法可以做到这一点。有些比其他的更有效。

var allow_moves = document.getElementsByName("allow_move");
var index=0;
for(var j=allow_moves.length; index<=j; index++)
{
    if(allow_moves[index]&&allow_moves[index].parentNode.id=='c1s2a')break;
}
if(index<allow_moves.length)console.log(allow_moves[index].value);


console.log(document.getElementById("c1s2a").firstElementChild.value);


console.log(document.getElementById("c1s2a").childNodes[1].value);


console.log(document.getElementById("c1s2a").children["allow_move"].value);


//because I like being difficult, and because you never should, here is the regex way
//get the value
console.log(document.getElementById("c1s2a").innerHTML.replace(/([\s\S]*value=\")([^"]*)([\s\S]*)/g,"$2"));
//replace the value
document.getElementById("c1s2a").innerHTML = document.getElementById("c1s2a").innerHTML.replace(/([\s\S]*value=\")([^"]*)([\s\S]*)/g,"$1"+newValue+"$3");