Question

假设我们有这个HTML场景：

请注意：

有意省略表单“action”和“method”属性。 “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>

Answer 1

要获取文本输入元素的值，我们可以使用文本输入对象的value属性：text_val = oText.value;

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

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

我们可以像这样访问元素的值：

name = oForm.elements["name"].value;

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

oText = oForm.elements["text_element_name"];或

oText = oForm.elements[index];

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

oForm = document.forms[index];

Answer 2

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

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

Answer 3

使用jQuery可以轻松实现。您可以使用：

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

获取搜索字段。

Answer 4

你可以使用var y = document.getElementsByTagName（“input”）;

Answer 5

一种可能性如下：

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);
    }
}

JS Fiddle demo

这确实假设 n ^th input与 n ^{th <之间存在直接关系/ sup> a元素。}

我也不再使用内联事件处理程序，以便使维护更容易（而且JavaScript不那么突兀）。对callFunction()的第一次调用给出了所有a元素（并且可以指定父/祖先将索引限制为仅给定祖先节点/元素中的那些a元素），和后续调用使用生成的data-index属性（而不是重新生成索引）。

参考文献：

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

5 个答案: