Heim > Artikel > Web-Frontend > So greifen Sie über getElementsByName in js auf das Namenssammlungsobjekt zu

So greifen Sie über getElementsByName in js auf das Namenssammlungsobjekt zu

高洛峰Original: 2016-12-08 13:24:501640Durchsuche

1. Alle Elemente mit einem bestimmten Namensattribut finden. Diese Methode gibt eine Knotensammlung zurück, die auch als Objektsammlung bezeichnet werden kann.

2. Diese Sammlung kann als Array behandelt werden und der Wert des Längenattributs stellt die Anzahl der Sammlungen dar.

3. Da der Name ein Element in einer HTML-Seite nicht eindeutig bestimmen kann, lautet der Name der Methode getElementsByName anstelle von getElementByName

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
 
<body>
    <p>
        <input type="text" name="luck" value="我中奖了，中了一个亿" onclick="aa()" id="luck1" />
    </p>
    <p>
        <input type="text" name="luck" value="我交了女朋友" id="luck2" />
    </p>
    <p>
        <input type="text" name="luck" value="我升迁了" id="luck3" />
    </p>
    <p>
        <input type="text" name="luck" value="我买房了" id="luck4" />
    </p>
     
    <script>
        /*
        1、获取每一个文本框的值
        2、获取每一个文本框的类型
        3、为每一个文本框增加点击事件
        */
         
        /*
            第一步 获取name属性为luck值得对象数组(节点数组)
        */
        var luckElements = document.getElementsByName("luck");
         
        /*
            第二步 遍历节点数组
        */
        for(var i=0;i<luckElements.length;i++){
            //获取元素的value值
            alert(luckElements[i].value);
            //获取元素的type值
            alert(luckElements[i].type);
            //为每一个元素的onclick属性赋值即为文本框增加点击事件
            luckElements[i].onclick=function(){
                alert(this.value);
            }
        }
    </script>
</body>
</html>

3. Da der Name auf der HTML-Seite ein Element nicht eindeutig bestimmen kann, lautet der Name der Methode getElementsByName anstelle von getElementByName

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine kurze Analyse der Verwendung von JavaScript-EreignissenNächster Artikel：Eine kurze Analyse der Verwendung von JavaScript-Ereignissen

In Verbindung stehende Artikel

Mehr sehen