Senaste uppdateringen: 1.11.2015

För att arbeta med DOM-strukturen i JavaScript, definieras dokumentobjektet i det globala fönsterobjektet. Dokumentobjektet tillhandahåller ett antal egenskaper och metoder för att manipulera sidelement.

Sök efter element

Följande metoder används för att söka efter element på en sida:

getElementById(value): väljer elementet vars id-attribut är lika med värde

getElementsByTagName(value) : väljer alla element vars tagg är lika med värde

getElementsByClassName(value) : väljer alla element som har klassvärde

querySelector(value): väljer det första elementet som matchar css-väljarvärdet

querySelectorAll(value) : väljer alla element som matchar css-väljarvärdet

Till exempel, hitta element efter id:

Block Header var headerElement = document.getElementById("header"); document.write("Rubriktext: " + headerElement.innerText);

Genom att anropa document.getElementById("header") hittar vi elementet med id="header". Och genom att använda innerText-egenskapen kan du få texten för det hittade elementet.

Sök efter specifik tagg:

rubrik

Första paragrafen

Andra stycket

var pElements = document.getElementsByTagName("p"); för (var i = 0; i< pElements.length; i++) { document.write("Текст параграфа: " + pElements[i].innerText + "
"); }

Genom att anropa document.getElementsByTagName("p") hittar vi alla styckeelement. Detta anrop returnerar en array av hittade element. Därför, för att få de individuella elementen i arrayen, är det nödvändigt att köra igenom dem i en slinga.

Om vi ​​bara behöver få det första elementet, kan vi komma åt det första elementet i den hittade samlingen av objekt:

VarpElement = document.getElementsByTagName("p"); document.write("Styckstext: " + pElement.innerText);

Få ett element efter klass:

Artikelrubrik

Första paragrafen

Andra stycket

var articleDiv = document.getElementsByClassName("artikel"); console.log(articleDiv); var textElems = document.getElementsByClassName("text"); för (var i = 0; i< textElems.length; i++) { console.log(textElems[i]); }

Val av css väljare:

Artikelabstrakt

Första paragrafen

Andra stycket

varelem = document.querySelector(".annotation p"); document.write("Väljartext: " + elem.innerText);

Uttrycket document.querySelector(".annotation p") hittar ett element som matchar selector.annotation p . Om det finns flera element på sidan som matchar väljaren, kommer metoden att välja det första av dem. Som ett resultat kommer webbläsaren att visa:

Artikelkommentar Första stycket Andra stycket Väljartext: Artikelkommentar

För att få alla element i en väljare kan du på liknande sätt använda metoden document.querySelectorAll, som returnerar en array av de hittade elementen:

Artikelabstrakt

Första paragrafen

Andra stycket

varelems = document.querySelectorAll(".text p"); för (var i = 0; i< elems.length; i++) { document.write("Текст селектора " + i + ": " + elems[i].innerText + "
"); }

Webbläsarutgång:

Artikelkommentar Första stycket Andra stycket Väljartext 0: Första stycket Väljartext 1: Andra stycket

JavaScript-dokumentet .querySelector()-metoden returnerar det första elementet i dokumentet (ett Element-objekt) som matchar den angivna väljaren, eller gruppen av väljare. Om ingen matchning hittas, returneras null.

Jag uppmärksammar dig på att det inte är tillåtet att använda CSS-pseudo-element som ett väljarvärde för att hitta element, i detta fall kommer returvärdet alltid att vara null .

Om du behöver en lista över alla element som matchar den eller de angivna väljaren, använd metoden querySelectorAll() för detta.

Metoden .querySelector() är också definierad på Element-objektet, vilket är anledningen till att den kan anropas på vilket element som helst, inte bara dokumentobjektet. Elementet som det anropas på kommer att användas som rotelement för sökningen.

Webbläsarstöd för JavaScript-syntax: document .querySelector( väljare) väljare- Strängspecifikationsväljare API nivå 1 parametervärden Parameter Beskrivning

väljare

Argumentet måste matcha en giltig väljarsträng som innehåller en eller flera väljare. När du anger flera väljare måste du separera värdena med kommatecken. I det här fallet kommer det först hittade elementet från de givna väljarna att väljas. Om du av någon anledning använder tecken i namnet på väljare som inte ingår i standardsyntaxen css, då måste sådana tecken escapes med ett snedstreck ( "\" ). Eftersom backslash är också speciell karaktär (fly) V JavaScript, då när du anger en bokstavlig sträng måste den escapes två gånger. Obligatorisk parameter.

Undantag Användningsexempel Använda JavaScripts document.querySelector()-metod Click Me First Block Second Block Third Block function myFunc() ( låt firstBlock = document .querySelector(".block "), // välj element med klassblocket först = document .querySelector( ".first, .block "), // hitta det första elementet från de givna väljarna andra = dokument .querySelector("div:nth-of-type(2) "), // välj varje div-element som är det andra underordnade av sitt eget överordnade element tredje = document .querySelector("div:last-of-type "); // hitta varje div-element som är det sista elementet i dess överordnade element firstBlock.style.background = "svart"; // ändra bakgrundsfärgen för elementet först.style.color = "röd"; andra.style.color = "grön"; // ändra textfärgen på elementet tredje.style.color = "blå"; // ändra textfärgen på elementet )

I det här exemplet använder vi onclick-händelseattributet när knappen klickas ( HTML-element) kallar vi funktionen myFunc() , som använder JavaScript Metoden document .querySelector() väljer följande element:

• Först element med klassblock i dokumentet och uppsättningen svart bakgrundsfärgen för det hittade elementet.
• Först element från de givna väljarna (element med klass först , element med klassblock ) och ställ in textfärgen för det hittade elementet till röd. I det här fallet kommer den att väljas först det hittade elementet från de givna väljarna.
• Elementet alltså andra underordnat element till dess överordnade element och inställt på hittat element grön text färg.
• Elementet som är det sista elementet i dess överordnade element och satt till det hittade elementet blå text färg.

Resultatet av vårt exempel.

Som ni vet, i utvecklingen av en stor JS-applikation som använder det mest populära jQuery-biblioteket, kommer det en tid då prestandaproblemet blir akut. Alla krafter rusar till profilerarens kryphål, varje samtal granskas noggrant, varje funktionellt laddad implementering nosas från alla håll och rätas ut. Men problemet kommer från fel sida, där 90% av utvecklarna förväntar sig det. Väljare - Hur många i detta ord.
Låt oss ta en titt på hur denna magi fungerar och varför DOM-elementuppslagningar kan få applikationsprestanda att sjunka.

Hur jQuery analyserar väljaren Biblioteket självt använder Sizzle-motorn för att hitta element, som har ett antal funktioner. Vi ska ta en titt på dem. querySelectorAll() Nya webbläsare har nu de utmärkta funktionerna querySelectorAll() och querySelector() som kan söka efter element med hjälp av webbläsarens funktioner (särskilt de som används när man visar CSS och tilldelar egenskaper till element) . Arbetar given funktion inte i alla webbläsare, utan bara i FF 3.1+ , IE8+ (endast i IE8 Standards Mode), Opera 9.5+ (?) och Safari 3.1+ . Så Sizzle upptäcker alltid närvaron av denna funktion och försöker utföra någon sökning genom den. Detta är dock inte utan överraskningar - för att framgångsrikt kunna använda querySelectorAll() måste vår väljare vara giltig.
Jag ska ge ett enkelt exempel:
De två väljare som visas är praktiskt taget desamma och kommer att returnera samma uppsättning element. Den första väljaren kommer dock att returnera resultatet av querySelectorAll(), och den andra kommer att returnera resultatet av normal filtrering efter element.
$("#my_form input")
$("#my_form input") Väljarens analys och sökning Om querySelectorAll() misslyckas, kommer Sizzle att försöka använda de normala webbläsarfunktionerna getElementById(), getElementsByName(), getElementsByTagName() och getElementByClass(). I de flesta fall räcker de, men (sic!) I IE< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
I allmänhet analyserar Sizzle väljaren från höger till vänster. Här är några exempel för att illustrera denna funktion:
$(".divs .my_class")
.my_class-element kommer att hittas först, och sedan kommer bara de som har .divs i sina föräldrar att filtreras bort. Som vi kan se är detta en ganska dyr operation, och användningen av sammanhanget löser inte problemet (vi kommer att prata om sammanhanget nedan).
Som jag sa - i de flesta fall kommer Sizzle att analysera väljaren från höger till vänster, men inte i fallet med att använda ett element med ett ID:
$("#divs .min_klass")
I det här fallet kommer väljaren att bete sig som förväntat och #divs-elementet tas omedelbart för användning som ett sammanhang Kontext Den andra parametern som skickas tillsammans med väljaren till $()-funktionen kallas kontexten. Den är utformad för att begränsa sökningen efter element. Men vid parsning kommer sammanhanget att kopplas till början av väljaren, vilket inte ger någon vinst alls. En vinnande kombination av att använda kontext är en giltig väljare för querySelectorAll(), eftersom den här funktionen kan tillämpas inte bara på uppdrag av dokumentet, utan även på elementet. Sedan förvandlas väljaren med kontexten bildligt till följande konstruktion:
$(".divs", document.getElementById("wrapper"));
document.getElementById("wrapper").querySelectorAll(".divs"); // använd querySelectorAll() om möjligt

I detta exempel om det inte är möjligt att använda querySelectorAll(), kommer Sizzle att filtrera elementen genom enkel iteration.
En anmärkning till om sammanhanget (inte om väljare) - om den andra parametern till väljaren för .live()-funktionen är ett jQuery-objekt, kommer händelsen att fångas på dokumentet (!), Och om DOM-objektet, då händelse kommer bara att dyka upp till detta element. Jag försöker att inte komma ihåg sådana finesser, utan använder .delegate() .

Filter och elementhierarki Du kan använda följande väljare för att söka efter kapslade element:
$(".root > .child")
Som vi vet tolkas väljaren och sökningen startar på alla .child-element på sidan (förutsatt att querySelectorAll() inte är tillgänglig). En sådan operation är ganska dyr och vi kan omvandla väljaren så här:
$(".child", $(".root")); // att använda sammanhang gör det inte lättare att hitta
$(".root").find(".child"); // varför måste vi iterera genom alla element inuti .root?
$(".root").children(".child"); // mest korrekta alternativet

Men om det finns ett behov av att använda filter på vissa attribut (:visible, :eq, etc.) och väljaren ser ut så här:
$(".some_images:visible")
då kommer filtret att appliceras sist - d.v.s. vi avviker återigen från höger-till-vänster-regeln.

Resultat

• När det är möjligt, använd korrekta väljare som matchar querySelectorAll()
• Ersätt underfrågor inuti väljare med underfrågor (.children(...) etc.)
• Förfina väljarkontext
• Filtrera en så liten färdig uppsättning element som möjligt

Snabbväljare till dig på det nya året! Allt i kommande!

Baserat på mästarklassen

För att skriptet ska fungera med något element på sidan måste detta element hittas först. Det finns flera sätt att göra detta i JavaScript. Det hittade elementet tilldelas vanligtvis en variabel, och senare, genom denna variabel, kommer skriptet åt elementet och utför några åtgärder med det.

Sök på id

Om elementet ges ett id-attribut i sidkoden, kan elementet hittas av id. Detta är det enklaste sättet. Elementet genomsöks med metoden getElementById() för dokumentets globala objekt.

document.getElementById(id)

Alternativ:

id - id för elementet som ska hittas. id är en sträng, så det måste stå inom citattecken.

Låt oss skapa en sida, lägga till ett element till den och ge den ett id , och hitta detta element i skriptet:

HTML-kod:

JavaScript:

var block = document.getElementById("block"); konsollogg(block);

Vi tilldelade det hittade elementet till blockvariabeln och visade variabeln i konsolen. Öppna webbläsarkonsolen, den ska innehålla elementet.

Eftersom att söka efter id är det enklaste och bekväm väg, använder det ofta. Om du behöver arbeta med något element i ett skript, så sätts id-attributet för detta element i sidkoden, även om det inte har ställts in tidigare. Och hitta elementet efter id.

Sök efter klass

Metoden getElementsByClassName() låter dig hitta alla element som tillhör en viss klass.

document.getElementsByClassName(class)

Alternativ:

klass - klass av element som ska hittas

Metoden returnerar en pseudo-array som innehåller de hittade elementen. Det kallas en pseudo-array eftersom många array-metoder inte fungerar för det. Men huvudegenskapen finns kvar - du kan referera till vilket element som helst i arrayen. Även om bara ett element hittas finns det fortfarande i arrayen.

Låt oss lägga till element på sidan och ge dem en klass. Några av elementen kommer att placeras inuti blocket som vi skapade tidigare. Den andra delen kommer att skapas utanför blocket. Innebörden av detta kommer att klargöras lite senare. Nu kommer sidan se ut så här:

HTML-kod:

JavaScript:

Nu hittas bara de element som finns i blocket.

Sök efter tagg

Metoden getElementsByTagName() hittar alla element med en specifik tagg. Den returnerar också en pseudo-array med de hittade elementen.

document.getElementsByTagName (tagg)

Alternativ:

tag - tagg för element som ska hittas

Låt oss hitta alla p-taggar som finns på sidan:

var p = document.getElementsByTagName("p"); konsollogg(p);

Denna metod kan också tillämpas inte på hela dokumentet, utan på ett specifikt element. Hitta alla p-taggar i blocket.

Sök med väljare

Det finns metoderna querySelector() och querySelectorAll() som hittar element som matchar en given väljare. Det vill säga att element kommer att hittas på vilka stilen skulle ha tillämpats om den hade specificerats för en sådan väljare. Samtidigt är närvaron av en sådan väljare i sidstilen inte alls nödvändig. Dessa metoder har inget med CSS att göra. Metoden querySelectorAll() hittar alla element som matchar väljaren. Och metoden querySelector() hittar ett element, vilket är det första elementet i sidkoden. Dessa metoder kan ersätta alla sätt att hitta element som diskuterats tidigare, eftersom det finns en id-väljare, en taggväljare och många andra.

document.querySelector(selector)

document.querySelectorAll(selector)

Väljare skrivs på samma sätt som i CSS, glöm bara inte att sätta citattecken.

Låt oss lägga till en lista på sidan och hitta den med väljaren. Vi letar bara efter ett element och vi vet med säkerhet att det kommer att bli det första, eftersom det är det enda på sidan. Därför, i det här fallet det är bekvämare att använda metoden querySelector() . Men när du använder den här metoden måste du ta hänsyn till att samma element kan läggas till sidan i framtiden. Detta gäller dock de flesta metoder.

HTML-kod:

Dessa metoder kan också söka efter element inte i hela dokumentet, utan inom ett enda element.

I exemplet använde vi bara väljare efter tagg. Försök att hitta sidelement med andra väljare.

Intilliggande element

För det hittade elementet kan du hitta grannar. Varje element är ett objekt, och angränsande element kan erhållas genom egenskaperna för detta objekt. Egenskapen previousElementSibling innehåller föregående element och egenskapen nextElementSibling innehåller nästa element.

element.previousElementSibling

element.nextElementSibling

Hitta elementet efter blocket:

Barnelement

Barnegendomen innehåller en rad barn.

element.barn

Hitta de underordnade elementen i blocket.

En uppgift som mycket ofta ställs inför av nybörjare Javascript-utvecklare är att välja ett element på en webbsida efter dess id-attribut.

Låt oss säga att vi har kod på en sida.

Blockera innehåll.

Hur kan jag välja ett element med id="elem" och utföra några åtgärder med det?

Det finns flera alternativ för att lösa problemet här. Låt oss ta en titt på dem nu.

Alternativ 1. Använd Javascript-metod getElementById.

Det finns ett sätt att komma åt ett element genom dess id med "ren" javascript-kod, utan att använda några tredjepartsbibliotek. Denna metod är att använda metoden ggetElementById("element_id"). Därför hänvisar vi till elementet vi behöver med dess id.

Låt oss se hur detta fungerar med ett enkelt exempel.

Blockera innehåll. alert(document.getElementById("elem").innerHTML);

Observera att dessa kodrader (skript) är under själva elementet. Detta är en förutsättning för driften av detta skript, eftersom. Javascript-kod körs när sidan laddas. Om vi ​​placerar koden ovan kommer vi att referera till ett element på sidan som ännu inte har laddats, dvs. det kommer inte att finnas i koden när skriptet körs. Det finns sätt att undvika detta, men det ligger utanför ramen för denna artikel.

Som ett resultat, om allt fungerar korrekt, kommer vi att få ett popup-fönster. Detta fönster kommer att visa texten som finns inuti div-blocket.

Låt oss nu se hur vi kan lösa detta problem på ett annat sätt.

Alternativ 2: Använda jquery-bibliotek.

Det andra alternativet för att välja ett element efter dess id är att använda Jquery-biblioteket. I praktiken, i moderna skript, används denna metod oftast. Det är mycket bekvämare och lättare att komma ihåg.

För att referera till ett element med dess id måste du använda konstruktionen:

$("#elem")

Här är elem namnet som finns i id-attributet.

Därför att Eftersom vi kommer att använda ett tredjeparts Javascript-bibliotek som heter Jquery, måste detta bibliotek först inkluderas.

Det läggs till i avsnittet, ett sätt att göra detta är att lägga till följande kodrad:

För att biblioteket ska kunna laddas måste det finnas en internetanslutning.

Blockera innehåll. alert($("#elem").html());

Själva skriptet, som i det föregående exemplet, bör ligga under koden för det element som du vill interagera med.

Därför har vi analyserat två sätt hur du kan välja ett element på en webbsida med dess id-attribut och interagera med det. Välj den metod som passar dig och använd den i praktiken.