Javascript 如何在没有getElementById的情况下获取元素的Id

假设我们得到了这个html场景：

请注意:

形式“动作”和“方法”属性故意省略。“form”标签就在这里，因为在我的实际项目中，我有一个类似的场景，在所有这些字段中使用表单可能有助于处理请求

<form id="form1">
    <div id="wrapperDiv">
        <div id="div1">
            <input type="text" id="searchField"/>
        </div>
        <div id="div2">
            <ul>
                <li><a href="javascript:void(0)" onclick="callFunction(this);">Hello</a></li>
            </ul>
        </div>
    </div>
</form>

<script type="text/javascript">
    function callFunction(x)
    {
         //When invoked this function sets the value of "searchField" to the respective link tag innerHTML
         //to set this you cant use something like:
         // var y = document.getElementById("searchField");
    }
</script>

函数调用函数（x）
{
//调用此函数时，将“searchField”的值设置为相应的链接标记innerHTML
//要设置此设置，您不能使用以下内容：
//var y=document.getElementById（“搜索字段”）；
}

如果您确定div中只有一个输入元素：

var parent = document.getElementById('div1');
var element = parent.GetElementsByTagName('input')[0];

---

要获取文本输入元素的值，可以使用文本输入对象的value属性：

text\u val=oText.value

例如，如果我们有以下文本输入元素：

<input type="text" name="name" id="txt_name" size="30" maxlength="70">

要获取对文本输入元素的引用，以下是一些示例代码：

oText=oForm.elements[“text\u element\u name”]或

oText = oForm.elements[index];

在上面的代码中，“index”是元素在基于0的元素数组中的位置，而oForm是使用document.forms集合获得的表单对象引用：

oForm = document.forms[index];

如果使用jQuery，您可以使它变得简单。您可以使用：

function callFunction(x) {
    var y = $(this).closest('form').find('input[type="text"]:first');
    y.val(this.innerHTML);
}

获取搜索字段。
您可以使用var y=document.getElementsByTagName（“输入”）
 一种可能性是：

function findIndex(el, container) {
    // we can't do anything without a node to work on
    if (!el) {
        return false;
    }
    else {
        // container must be a node, if no container is supplied the body is used
        container = container || document.body;
        // finds all elements of the same tagName as the node
        // (el) passed to the function that are within the container node
        var els = container.getElementsByTagName(el.tagName);
        // iterates through each of these nodes
        for (var i = 0, len = els.length; i < len; i++) {
            // sets the 'data-index' attribute to be equal to 'i'
            els[i].setAttribute('data-index', i);
        }
        // returns the generated index from the 'el' node passed into the function
        return el.getAttribute('data-index');
    }
}

function callFunction(el) {
    // if no el passed in, we stop here
    if (!el) {
        return false;
    }
    else {
        // sets the 'i' variable equal to the value of the 'data-index' attribute
        // if it exists, if it doesn't then we generate it
        var i = el.dataIndex ? el.getAttribute('data-index') : findIndex(el, document.forms.form1);
        // if an index is found (the 'i' variable) we set the value of
        // the 'input' with that index to be equal to the text contained
        // within the clicked link
        if (i) {
            document.getElementsByTagName('input')[i].value = (el.textContent || el.innerText);
        }
        // if no index is returned then we exit here
        else {
            return false;
        }
    }
}

var links = document.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].onclick = function(e) {
        e.preventDefault();
        callFunction(this);
    }
}​

函数findIndex（el，容器）{
//没有节点我们什么都做不了
如果（！el）{
返回false；
}
否则{
//容器必须是节点，如果未提供容器，则使用主体
container=container | | document.body；
//查找与节点相同的标记名的所有元素
//（el）传递给容器节点内的函数
var els=container.getElementsByTagName（el.tagName）；
//遍历这些节点中的每个节点
对于（变量i=0，len=els.length；i


这确实假设第n个
输入
和第n个
a
元素之间存在直接关系

我也不再使用在线事件处理程序，以使维护变得更容易（JavaScript也不那么突兀）。对
callFunction（）
的第一次调用给出了所有
a
元素（并且可以指定父级/父级，以将索引仅限于给定父级节点/元素中的那些
a
元素），随后的调用使用生成的
数据索引
属性（而不是重新生成索引）

参考资料：





您的标记结构可能会改变吗？您是否愿意使用jQuery？为什么要避免使用
getElementById
？请描述您的限制，以便我们能够给您一个正确的答案。@techfoobar是的，可以添加jQuery库。@AlexanderPavlov我正在制作一个jsf ui:组件。id是通过elvariables创建的，该组件应该是可重用的，因此我不能依赖getElmenentById。
a
和
输入元素之间是否始终存在1:1的关系（第一个
input
值将具有第一个
a
的文本，第二个
input
将具有第二个
a
的值）？感谢您的回答，但请注意我不能使用任何getElementById声明。这是我的限制。您可以尝试使用jquery var元素=$（“#div1 input”）；是的，但是您正在使用callFunction（x）获取表单的参数，实际上这是访问表单的方法之一。如果有多个输入怎么办？var y=document.getElementsByTagName（“*”），返回页面上的所有元素如何获取所有元素有用？
function findIndex(el, container) {
    // we can't do anything without a node to work on
    if (!el) {
        return false;
    }
    else {
        // container must be a node, if no container is supplied the body is used
        container = container || document.body;
        // finds all elements of the same tagName as the node
        // (el) passed to the function that are within the container node
        var els = container.getElementsByTagName(el.tagName);
        // iterates through each of these nodes
        for (var i = 0, len = els.length; i < len; i++) {
            // sets the 'data-index' attribute to be equal to 'i'
            els[i].setAttribute('data-index', i);
        }
        // returns the generated index from the 'el' node passed into the function
        return el.getAttribute('data-index');
    }
}

function callFunction(el) {
    // if no el passed in, we stop here
    if (!el) {
        return false;
    }
    else {
        // sets the 'i' variable equal to the value of the 'data-index' attribute
        // if it exists, if it doesn't then we generate it
        var i = el.dataIndex ? el.getAttribute('data-index') : findIndex(el, document.forms.form1);
        // if an index is found (the 'i' variable) we set the value of
        // the 'input' with that index to be equal to the text contained
        // within the clicked link
        if (i) {
            document.getElementsByTagName('input')[i].value = (el.textContent || el.innerText);
        }
        // if no index is returned then we exit here
        else {
            return false;
        }
    }
}

var links = document.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].onclick = function(e) {
        e.preventDefault();
        callFunction(this);
    }
}​