Heim >Web-Frontend >js-Tutorial >Welche Möglichkeiten gibt es, Elemente in JavaScript abzurufen?
Welche Möglichkeiten gibt es, Elemente in JavaScript abzurufen?
- 醉折花枝作酒筹Original
- 2021-07-16 11:37:1518756Durchsuche
Die Methoden zum Abrufen von Elementen in JavaScript sind: 1. Elemente basierend auf der ID abrufen; 2. Elemente basierend auf dem Tag-Namen abrufen; 3. Elemente basierend auf dem Namen des Namens abrufen; 5. Holen Sie sich Elemente basierend auf dem Selektor. Holen Sie sich das Element.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
1. Elemente basierend auf der ID abrufen
document.getElementById("Wert des ID-Attributs");
2. Elemente basierend auf Tag-Namen abrufen
document.getElementsByTagName("Name des Tags");
3. Nach Name Holen Sie sich das Element anhand des Werts des Attributs
document.getElementsByName("der Wert des Namensattributs");
4 Holen Sie sich das Element basierend auf dem Namen des Klassenstils
document.getElementsByClassName(" der Name des Klassenstils");
5. Entsprechend der Auswahl das Element abrufen
1.document.querySelector("selector");
2.document.querySelectorAll("selector");
1. Holen Sie sich das Element basierend auf der ID.
document.getElementById("Der Wert des ID-Attributs");
Der Rückgabewert ist ein Elementobjekt auf dem Tag-Namen
document.getElementsByTagName("Name des Tags");
Der Rückgabewert ist ein Pseudo-Array
Fall: Klicken Sie auf die Schaltfläche, um den Textinhalt mehrerer p-Tags zu ändern
<body>
<input type="button" value="弹框" id="btn">
<script>
//根据id属性的值从文档中获取这个元素
var btnobj = document.getElementById("btn"); //为当前的这个按钮元素(对象),注册点击事件,添加事件处理函数(匿名函数)
btnobj.onclick = function () { //响应做的事情
alert("码仙");
};
</script>
</body>3 basierend auf dem Wert des Namensattributs
document.getElementsByName("Wert des Namensattributs");
Der Rückgabewert ist ein Pseudo-Array
Fall:Fall: Klicken Sie auf die Schaltfläche, um den Wert des Wertattributs im gesamten Text zu ändern Felder, deren Namensattributwert name1 ist
<body>
<input type="button" value="改变" id="btn">
<p id="dv">
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
<p>哈哈,我又变帅了</p>
</p>
<script>
//根据id获取按钮,注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//根据标签名字获取标签
var pObjs = document.getElementsByTagName("p");
//var pObjs=document.getElementById("dv1").getElementsByTagName("p");
//循环遍历这个数组
for (var i = 0; i < pObjs.length; i++) {
//每个p标签,设置文字
pObjs[i].innerText = "我们都是p";
}
};
</script>
</body>4. Elemente basierend auf dem Namen des Klassenstils abrufen
document.getElementsByClassName("Name des Klassenstils");
Der Rückgabewert ist ein Pseudo-Array
Case : Ändern Sie die Werte aller Textfelder -up
<body>
<input type="button" value="显示效果" id="btn"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name2"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name3"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<script>
//点击按钮,改变所有name属性值为name1的文本框中的value属性值
document.getElementById("btn").onclick = function () {
//通过name属性值获取元素-------表单的标签
var inputs = document.getElementsByName("name1");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "我很好";
}
};
</script>
</body>2.document.querySelectorAll("selector");
Der Rückgabewert ist ein Pseudo-Array
Fall: Ändern Sie die Werte aller Textfelder
<body>
<input type="button" value="修改文本框的值" id="btn"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/><br/>
<input type="text" value="" class="text"/>
<script>
//根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
//获取所有的文本框
//根据类样式的名字获取元素
var inputs = document.getElementsByClassName("text");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "码仙";
}
};
</script>
</body>[Empfohlenes Lernen: Javascript für Fortgeschrittene Tutorial
】Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Elemente in JavaScript abzurufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!