使用getElementsByTagName然后使用getElementById

时间:2016-09-14 14:26:18

标签: javascript jquery html

我试图从LI元素中带有ID的输入中获取值。

但是当我调用getElementsByTagName()[0].getElementsById()时,我得到错误numLi[i].getElementById is not a function是numLi一个带有LI元素的数组。这是我的整个js代码

$('form').submit(function()
{
    var headOne = document.getElementById('inputHead').value;
    var archive = document.getElementById('inputPara').value;
    var numLi = document.getElementById('uList').getElementsByTagName('li');
    var tagsToPost = '';
    for(i = 0;i<numLi.length;i++)
    {
        var ff = numLi[i].getElementById('tagOne');

       if(i<=numLi-1)
       {
            tagsToPost = tagsToPost + ff.value + ',';
       }
       else
       {
        tagsToPost = tagsToPost + ff.value;
       }
    }

});

我试图访问的部分

 <form action="javascript:void(0);">
<div class="col-md-3">

    <div id="enlacesList">
        <ul id="uList">

                <li class='listaLink'><input type="text" id="tagOne" class="tags" placeholder="Tags" autocomplete="off"></li>   
                <li class='listaLink'><input type="text" id="tagOne" class="tags" placeholder="Tags" autocomplete="off"></li>      

        </ul>
    </div>
     <button id="addgregador" type="button" autocomplete="off"><span class="glyphicon glyphicon-plus"></span></button><button id="desadd" type="button" autocomplete="off"><span class="glyphicon glyphicon-minus"></span></button>
</div>
<div class="col-md-9" id="containerTexto">
    <div id="textoPregunta">
        <div id="textHeading"><input type="text" name="headingOne" id="inputHead" placeholder="Titulo de la pregunta" autocomplete="off"></div>
        <div id="textContent"><textarea id="inputPara" rows="33" cols="84" placeholder="Respuesta, explicación..." autocomplete="off"></textarea></div>
        <input type="submit" id="editOk" value="Enviar" class="btn btn-primary" autocomplete="off"><input type="reset" id="editNot" value="Cancelar" class="btn btn-danger" autocomplete="off">
    </div>
</div>

程序在var ff = numLi[i].getElementById('tagOne');行中断。

3 个答案:

答案 0 :(得分:1)

getElementById函数仅在document上定义,而不是在DOM节点上定义。见其MDN article。这是因为ID在文档级别应该是唯一的,因此将其范围限定为单个元素是没有意义的。

首先,不要在一个文档中对多个元素使用相同的id。如果每个LI元素只有一个输入,请删除id属性并以此为例获取它们。

var ff = numLi[i].children[0];

答案 1 :(得分:1)

只需调用document.getElementById(“tagOne”)。value即可获取该值。

ID字段在html中也必须是唯一的,因此您需要将第二个字段重命名为tagTwo或其他内容。使用getElementById时,ID允许您直接使用它们。这是不正确的HTML,并且通常会让您有两个具有相同ID字段的元素的错误。 (按ID索引)

我认为你不能在文档以外的任何地方使用getElementById。自从我在加州大学圣地亚哥分校开设网络开发课以来,已经有一段时间了。

答案 2 :(得分:-1)

你想做的事情如下:  var x = getElementsByTagName()[0] .id document.getElementsById(x).innerHTML = ....?

这可以浓缩为:

document.getElementsById(document.getElementsByTagName("Example:Div")[0].id)