suchen
HeimWeb-Frontendjs-TutorialZusammenfassung der gängigen Methoden zur Verwendung von Raw-JS-Selektoren_Javascript-Kenntnissen

Gemeinsame getElementById, getElementsByName, getElementsByTagName. Aber Ausländer waren mit diesen APIs nicht zufrieden, also entwickelten sie nach und nach jQuery-Selektoren. Hier sprechen wir nur über die ursprüngliche js-Auswahl.

1.getElementById

Dies ist der am häufigsten verwendete Selektor, lokalisiert nach ID:

Beispiel:

var test=document.getElementById(" test ").value;//Erhalten Sie den Wert des Elements mit der Test-ID im Dokument und weisen Sie ihn der Testgesichtsänderung zu

2.getElementsByName

Beispiel:

var test= document.getElementByName("test");//Rufen Sie den Knoten des Elements mit dem Namen test im Dokument ab und weisen Sie ihn der Testvariablen zu. Zu diesem Zeitpunkt ist die Testvariable ein Array

3. getElementsByTagName

Beispiel:

var test=document.getElementsByTagName("test");//Den Knoten des Elements mit der Klasse test im Dokument abrufen und zu diesem Zeitpunkt dem Test zuweisen , die Testvariable ist ein Array und dieser Selektor kann in IE5, 6, 7, 8 nicht verwendet werden

4.getElementsByClassName

Dieser Selektor kann nicht in der js-API gefunden werden Wenn Sie es verwenden möchten, müssen Sie die Methode selbst definieren. Verwenden Sie zunächst getElementsByTagName("*"), um alle Elemente im Dokument abzurufen, und verwenden Sie dann reguläre Ausdrücke, um passende Elemente zu finden, und fügen Sie sie in ein Array ein gib sie zurück. Es gibt viele Programmierer im Internet, die diesen Selektor implementiert haben:

(1) Das von Robert Nyman verfasste Ultimate getElementsByClassName-Schema wurde 2005 implementiert. Es ist ersichtlich, dass viele Dinge von Ausländer wurden schon vor langer Zeit umgesetzt. Sehr weit weg.

Code kopieren Der Code lautet wie folgt:

// Drei Parameter sind erforderlich, finden Sie einen Es gibt 5007 Elemente mit dem Klassennamen „Zelle“ auf der Webseite. IE8 dauert 1828 bis 1844 Millisekunden,
//IE6 beträgt 4610 bis 6109 Millisekunden, FF3.5 beträgt 46 bis 48 Millisekunden und Opera10 beträgt 31 bis 32 Millisekunden , und Chrome beträgt 23–26 Millisekunden,
//safari4 beträgt 19–20 Millisekunden
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all )? oElm. all :
oElm.getElementsByTagName); var oRegExp = new RegExp("(^|\s)" strClassName "(\s|$)");
var oElement; {
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
return (arrReturnElements )
}


(2) bereitgestellt von Dustin Diaz (Autor von „JavaScript Design Patterns“), aber die Kompatibilität ist nicht so gut wie oben und unterstützt IE5 nicht.



Code kopieren
Der Code lautet wie folgt: //Die letzten beiden Parameter sind zuverlässig, Eine Webseite finden Es gibt 5007 Elemente mit dem Klassennamen „Zelle“. IE8 dauert 78 Millisekunden, IE6 dauert 125 ~ 171 Millisekunden // FF3.5 ist 42 ~ 48 Millisekunden, Opera10 ist 31 Millisekunden, Chrome ist 22 ~ 25 Millisekunden, Safari4 ist 18 ~ 19 Millisekunden var getElementsByClass = function(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*'; new RegExp(" (^|\s)" searchClass "(\s|$)");
for (i = 0, j = 0; i if ( Muster. test(els[i].className) ) {
classElements[j] = els[i];
j ;
}
return classElements;

----------------------------- ---- ---------------------------------------------- ---- ---------------------------------------------- ---- ----

Hinweis: Dies kann den Knoten des aktuellen Elements darstellen.

---------------- ------ -------------------------------------------- ------ -------------------------------------------- ------ --------

Im Folgenden sind einige häufig verwendete Methoden aufgeführt, um Wissenspunkte wie Ereignisse abzugleichen:



Code kopieren


Der Code lautet wie folgt:

//Senden Sie das Formular mit dem ID-Test

document.getElementById("test").submit();

//Legen Sie den Rand des Elements mit dem ID-Test fest bis 2 Pixel, durchgehend, rot

document.getElementById("test").style.border="2px durchgehend rot"

//Die Maus bewegt sich mit aus dem Element heraus ID-Test, Hintergrundfarbe ändern

function test(){
document.getElementById("test").onmouseover=function(){document.getElementById("test2").style.backgroundColor=" red"} ;
document.getElementById("test").onmouseout=function(){document.getElementById("test2").style.backgroundColor="blue"};
}

//Popup Die Anzahl der Elemente mit dem Namen test im Dokument

function test()
 {
 var test=document.getElementsByName("test");
 alert(test .length);
 }
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
css中id选择符的标识是什么css中id选择符的标识是什么Sep 22, 2022 pm 03:57 PM

在css中,id选择符的标识是“#”,可以为标有特定id属性值的HTML元素指定特定的样式,语法结构“#ID值 {属性 : 属性值;}”。ID属性在整个页面中是唯一不可重复的;ID属性值不要以数字开头,数字开头的ID在Mozilla/Firefox浏览器中不起作用。

css伪选择器学习之伪类选择器解析css伪选择器学习之伪类选择器解析Aug 03, 2022 am 11:26 AM

在之前的文章《css伪选择器学习之伪元素选择器解析​》中,我们学习了伪元素选择器,而今天我们详细了解一下伪类选择器,希望对大家有所帮助!

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式Nov 20, 2023 am 11:20 AM

使用:nth-child(n+3)伪类选择器选择位置大于等于3的子元素的样式,具体代码示例如下:HTML代码:<divid="container"><divclass="item">第一个子元素</div><divclass="item"&

javascript选择器失效怎么办javascript选择器失效怎么办Feb 10, 2023 am 10:15 AM

javascript选择器失效是因为代码不规范导致的,其解决办法:1、把引入的JS代码去掉,ID选择器方法即可有效;2、在引入“jquery.js”之前引入指定JS代码即可。

从入门到精通:掌握is与where选择器的使用技巧从入门到精通:掌握is与where选择器的使用技巧Sep 08, 2023 am 09:15 AM

从入门到精通:掌握is与where选择器的使用技巧引言:在进行数据处理和分析的过程中,选择器(selector)是一项非常重要的工具。通过选择器,我们可以按照特定的条件从数据集中提取所需的数据。本文将介绍is和where选择器的使用技巧,帮助读者快速掌握这两个选择器的强大功能。一、is选择器的使用is选择器是一种基本的选择器,它允许我们根据给定条件对数据集进

css中的选择器包括超文本标记选择器吗css中的选择器包括超文本标记选择器吗Sep 01, 2022 pm 05:25 PM

不包括。css选择器有:1、标签选择器,是通过HTML页面的元素名定位具体HTML元素;2、类选择器,是通过HTML元素的class属性的值定位具体HTML元素;3、ID选择器,是通过HTML元素的id属性的值定位具体HTML元素;4、通配符选择器“*”,可以指代所有类型的标签元素,包括自定义元素;5、属性选择器,是通过HTML元素已经存在属性名或属性值来定位具体HTML元素。

深度解析is与where选择器:提升CSS编程水平深度解析is与where选择器:提升CSS编程水平Sep 08, 2023 pm 08:22 PM

深度解析is与where选择器:提升CSS编程水平引言:在CSS编程过程中,选择器是必不可少的元素。它们允许我们根据特定的条件选择HTML文档中的元素并对其进行样式化。在这篇文章中,我们将深入探讨两个常用的选择器,即:is选择器和where选择器。通过了解它们的工作原理和使用场景,我们可以大大提升CSS编程的水平。一、is选择器is选择器是一个非常强大的选择

wxss选择器有哪些wxss选择器有哪些Sep 28, 2023 pm 04:27 PM

wxss选择器有元素选择器、类选择器、ID选择器、伪类选择器、子元素选择器、属性选择器、后代选择器和通配选择器等。详细介绍:1、元素选择器,使用元素名称作为选择器,选取匹配的元素,使用“view”选择器可以选取所有的“view”组件;2、类选择器,使用类名作为选择器,选取具有特定类名的元素,使用“.classname”选择器可以选取具有“.classname”类名的元素等等。

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung