Bu derste, belge nesnesinin yöntemlerini, belge boyunca düğümlerin bir düğümünü veya toplanmasını aramak için tasarlanmış yöntemlerini göz önünde bulunduruyoruz. Benzer eylemler gerçekleştiren, ancak zaten bağlı ortaklıkları arasında olan Düğüm nesnesinin (düğüm) yöntemlerinin yanı sıra.

Ağaçtaki düğümlerin bir düğümünü veya koleksiyonunu aramak için tasarlanmış yöntemler

Önceki derste, ağacın etrafında hareket edebileceğimiz özellikleri gözden geçirdik ve ihtiyacımız olan düğümleri bulduk. Ancak, mülkleriyle birlikte düğümler arayışı çok zor ve etkili değil. Bu nedenle, bir ağaçta düğüm bulmak için, web geliştiricileri tipik olarak belge veya düğüm nesnesinin (düğüm) özel olarak tasarlanmış yöntemleri kullanır.

GetAlementbyid ()

GetElementByID yöntemi (ElementID), bir düğüm (düğüm) nesnesi olarak belirtilen tanımlayıcıya sahip bir belgeye (ID \u003d "Elementid") döndürür. Belirtilen tanımlayıcıya sahip öğe yoksa, bu yöntem boş değeri döndürür.

Standart'a uygun olarak, aynı kimlik niteliği değerine sahip birkaç elemana sahip olamazsınız, yani. Tanımlayıcı değeri bir belge içinde benzersiz olmalıdır. Ancak, belgedeki belirtilen kimliğe sahip birkaç öğeniz varsa, GetElembyID () yöntemi bulunan ilk öğeyi döndürür.

belge.getElementbyid (ElementID)

Bu yöntem, almak istediğiniz element kimliğinin öznitelik değerini içeren bir dize olan bir gerekli parametreye (ElementID) sahiptir.

Örneğin, ID \u003d "namearticie" olan öğenin metninin rengini değiştirin.

Makale başlığı

• 1 puan
• 2 puan
• 3 puan

Yöntem GetElementsbyClassName ()

GetElementsByClassName (ClassName) yöntemi, belgedeki tüm bulunan öğeleri (belge için) veya bir Nodelist nesnesi olarak belirtilen sınıf adı (Class \u003d "ClassName") ile alt düğümler (Düğüm için) arasından döndürür. Başka bir deyişle, bu yöntem, parametre yönteminde belirtilen sınıfın adına sahip olan bir öğe (düğümler) bir koleksiyon olan bir Nodelist nesnesini döndürür.

Bulunan düğüm sayısını elde etmek için, Nodelist uzunluğu özelliğini kullanmanız gerekir. Ve koleksiyondaki tüm düğümleri taşımak için aşağıdaki çevrimi kullanabilirsiniz:

Var elementsist \u003d document.getelementsbyclassname ("liste"); için (var i \u003d 0; ben

belge.getElementbyclassName (sınıf adı);
Düğüm (düğüm) .gelementbyclassname (sınıf adı);

Bu yöntem, almak istediğiniz öğelerin sınıfının adını içeren bir dize olan bir gerekli parametreye (sınıf adı) sahiptir. Belirtilen birkaç sınıfta öğeleri almak istiyorsanız, bir boşluk kullanarak bu yöntemin parametresine ayrılmalıdır. Örneğin, ClassL sınıfları ve sınıf2 olan bir düğüm koleksiyonunu alın:

Belge.getelementsbyclassname ("Classl Class2");

Örneğin, liste sınıfına sahip öğelerin arka planının rengini değiştirin:

Makale başlığı

• 1 puan
• 2 puan
• 3 puan

• 1 puan
• 2 puan

Örneğin, bir liste sınıfına sahip bir öğe (düğüm) koleksiyonunu elde etmek için. Bu koleksiyonda 2 knot elde etmek için yani, yani. Düğüm 1. Bundan sonra, elde edilen düğümün arka plan rengini değiştirin.

// VAR ExittersList \u003d document.getelementsbyclassname sınıfı ("liste") listesine sahip bir öğe koleksiyonunu alın. // Varnectlist Collection Collection'da 2 düğüm alın \u003d öğeler listesi; // secondlist.style.backgroundcolor \u003d "kırmızı" öğesinin arka plan rengini değiştirin;

Yöntem GetElementsByTagName ()

GetElementsbyTagName (TagName) yöntemi, belgedeki tüm bulunan öğeleri (belge için) veya alt düğümler (düğüm için), Nodelist nesnesi (düğümlerin toplanması) şeklinde belirtilen etiketle birlikte döndürür. Koleksiyonda belirli bir düğüm almak, dizin tarafından gerçekleştirilir. Koleksiyondaki sayma elemanları (düğümler) 0 ile başlar.

belge.getelementsbytagname (tagname);
Düğüm (düğüm) .gelementsbytagname (tagname);

Bu yöntem, büyük harflerle gösterilen etiketin adını içeren bir dize olan bir zorunlu parametreye (TagName) bulunur. Bir parametre olarak starrel ("*") içeren bir dize belirlerseniz, belgedeki tüm öğeleri (belge nesnesi için) veya düğümün tüm çocuk elemanlarını (Düğüm nesnesi için) alacağız.

Koleksiyonda bulunan düğüm sayısını elde etmek için, Nodelist uzunluğu özelliğini kullanmanız gerekir. Ve koleksiyondaki tüm düğümleri taşımak için aşağıdaki çevrimi kullanabilirsiniz:

Var elementsist \u003d document.getelementsbytagname ("li"); için (var i \u003d 0; ben

Örneğin, LI elemanlarının arka planının rengini değiştirin:

Makale başlığı

• 1 puan
• 2 puan
• 3 puan

Örneğin, ul elemanları koleksiyonu alın. Sonra, bu koleksiyonda 1 düğüm alın, yani. Düğüm 0. Bundan sonra, bu düğüm için Li'nin bağlı ortaklıkları koleksiyonunu elde etmek için. Ve sonuç olarak, bu koleksiyondaki her bir elemanın yazı tipi boyutunu değiştirin.

// unsurlar topluluğu olsun ul VaStsul \u003d document.getelementsbytagname ("ul"); // Bu koleksiyonda 1 düğüm kazan VaStul \u003d Elementul; // bir çocuk elementlerinin bir koleksiyonunu alın Li elementul var elementsli \u003d elementul.gelementsli \u003d elementul.getelementsbytagname ("li"); // içindeki tüm öğeleri gevşetin (var i \u003d 0; ben

Yöntem GetElementsbyName ()

Yöntem GetElementsbyName (İsim) Belirtilen adlara (Ad Özniteliği değeri), Nesne NodLelist (Düğüm Koleksiyonu) olan belgedeki tüm bulunan öğeleri döndürür.

Elemanlar (düğümler), ağaçta bulundukları sırayla koleksiyona eklenir. Koleksiyonda belirli bir düğüm almak, dizin tarafından gerçekleştirilir. Koleksiyondaki sayma elemanları (düğümler) 0 ile başlar.

Var elementlist \u003d document.getelementsbyname ("telefon"); için (var i \u003d 0; ben

NOT: HTML5'te, Ad özniteliği eski olarak tanınır ve çoğu öğe kimliği özniteliği için değiştirildi.

belge.getelementsbyname (ad)

Bu yöntem, ad niteliği değerini içeren bir dize olan bir zorunlu parametreye (ad) sahiptir.

Örneğin, telefon değerine sahip ad niteliğine sahip öğelerin arka plan rengini değiştirin (İsim \u003d "Telefon"):

Telefon: Başka bir telefon:

Queryselector () yöntemi

QuerySelector () yöntemi, belgede bulunan ilk elemanı (belge için) veya bu yöntemin parametresi olarak belirtilen CSS seçicisine karşılık gelen alt düğümler (düğüm için) birinci elemanı döndürür. Hiçbir öğe CSS seçicisine karşılık gelmezse, bu yöntem NULL'dir.

belge.queryselector (csssselector)
Node.queryselector (csssselector)

Bu yöntem, elemanın seçildiği uyarınca, CSS seçicisini içeren bir dize olan bir zorunlu parametreye (CSSSSSSSELORT) bulunur.

Örneğin, #main p seçicisine karşılık gelen ilk bulunan elemanın metninin rengini değiştirin:

Örneğin, belgedeki bir DIV öğesi koleksiyonunu elde etmek için. Sonra, bu koleksiyonda 1 düğüm alın, yani. Endeks 0. olan bir düğüm, bu düğüm için, CSS Seçicisi H1 + P'ye karşılık gelen birinci eleman, bağlı düğümleri arasında bulunur. Bundan sonra, bu öğenin yazı tipi boyutunu değiştirin.

// div var unsurlarDiv \u003d document.getelementsbytagname elemanları ("div"); // Bu koleksiyonda 1 düğüm alın VAR ElementDiv \u003d ElementsDiv; // H1 düğüm // Arama düğümünden hemen sonra, NODTDIV var Elementp \u003d Elementdiv.QuerySelector değişkeninde ("H1 + P") depolanan düğümün yan kuruluşları arasında üretmek için hemen bir düğüm P yapın. // element yazı tipi elementp.style.fontsize \u003d "30px";

Queryselectorall ()

QuerySelictoral () yöntemi, belgedeki (belge için) veya bu yöntemin parametresi olarak belirtilen CSS seçicisine, bir Nodelist nesnesi olarak belirtilen CSS seçicisine karşılık gelen tüm bulunan öğeleri (belge için) veya çocuk düğümleri (düğüm için) döndürür. . Koleksiyondaki düğümlere hitap etmek, dizin tarafından gerçekleştirilir. Koleksiyondaki sayma elemanları (düğümler) 0 ile başlar.

Bulunan düğüm sayısını elde etmek için, Nodelist uzunluğu özelliğini kullanmak gerekir. Ve koleksiyondaki tüm düğümleri taşımak için aşağıdaki çevrimi kullanabilirsiniz:

Var elementsist \u003d document.queryselectorall ("# Ana P"); için (var i \u003d 0; ben

belge.queryselectorall (csssselector);
Düğüm (düğüm) .queryselectorall (csssselector);

Bu yöntem, hangi elemanların seçildiğine göre, CSS seçicisini içeren bir dize olan bir zorunlu parametreye (CSSSSSSSELORT) bulunur. Bu yöntemin parametresinde birden fazla seçiciyi belirtmek için, virgüllere ayrılmalıdır.

Örneğin, # #main P seçicisine karşılık gelen öğelerin metninin rengini değiştirin:

Örneğin, kenar çubuğu değerinde bir kimlik niteliğine sahip bir çocuk düğümü alın. Önceki adımda elde edilen bağlı elemanların arka planının rengini değiştirin:

// ID \u003d "SideBar" VAR SIDEBAR \u003d DOCUK.GETELEMENTBYID ("SIDEBAR") olan bir öğeyi (düğüm) alın. // "P" seçeneğine karşılık gelen bir düğüm koleksiyonunu alın Veya ElementListp \u003d SideBar.Queryselectorall ("P"); // içindeki tüm öğeleri gevşetin (var i \u003d 0; ben

Görev

GetElembyid (), getElementsbyclassName (), getAlementGyTagName (), GetElementbyTagname (), QuerTelector (), QuerySelectorall (), aşağıdaki görevler için JavaScript'te kod yazın:

1. Ana blokta bulunan tüm öğeleri p alın;
2. DIV konteynerinde bulunan kenara bloğu alın;
3. Vücut kaplarında bulunan altbilgi bloğunu alın.

Her görev mümkün olduğunca fazla farklı yöntemler yapmaktır.

Bildiğiniz gibi - performans sorunu keskin olduğunda en popüler jquery kütüphanesinin geldiği hacimli JS uygulamasının geliştirilmesinde. Tüm güçler, profillerin Ambrusura'ya atılır, her bir meydan okudum, her bir taraftan fonksiyonel olarak yüklenen her bir taraftan rahatça yüklenmiş bir parça ve amaçlanmıştır. Ancak sorun, geliştiricilerin% 90'ının bunu beklediği diğer taraftan gelmiyor. Seçiciler - Bu kelimenin ne kadar.
Hadi bulalım - bu sihir nasıl çalışır ve DOM elemanları aramanın neden uygulama verimliliğinin düşmesine neden olabilir.

JQuery seçiciyi nasıl söküyor?

Kütüphanede eşyaları aramak için, Sizzle Engine'in bir çok özelliğine sahiptir. Onlara bakacağız.

queryselectorall ()

Yeni tarayıcılarda, tarayıcı yeteneklerini kullanan unsurları (özellikle de görüntülendiğinde kullanıldığında kullanılır ve öğelere izin verildiğinde kullanılır), yeni tarayıcılarda, mükemmel bir QuerySelectorall () ve QuerySelector () işlevi ortaya çıktı. Bu özellik tüm tarayıcılarda çalışmaz, ancak yalnızca FF 3.1+, IE8 +. (sadece standart IE8 modunda), Opera 9.5+(?) ve Safari 3.1+. Öyleyse cızırtılı her zaman bu fonksiyonun varlığını tanımlar ve gerçekleştirilecek herhangi bir arama yapmayı deneyin. Ancak, burada sürprizler olmadan - QuerySelectorall () başarılı kullanımı için seçiciyiz geçerli olmalıdır.
Basit bir örnek vereceğim:
İki premium seçici pratik olarak farklı değildir ve aynı öğeleri aynıdır. Bununla birlikte, ilk seçici, QuerySelectorall () 'nin çalışmasının sonucunu döndürür ve ikincisi, normal filtreleme sonucu öğeler tarafından.
$ ("# My_form girişi")
$ ("# My_form girişi")

Seçici analizi ve arama

QuerySelectorall () kullanamadıysanız, Sizzle, normal GetElementByID () tarayıcısını (), getAlementbyname (), getAlementbytagname () ve getAlementbyClass () kullanmaya çalışacaktır. Çoğu durumda, yeterliydiler ama (sic!) IE'de< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
Genel durumda, Sizzle seçiciyi sağa sola söküyor. Bu özelliği göstermek için birkaç örnek vereceğim:
$ ("Divs .my_class")
İlk olarak, unsurlar bulunacak .MY_Class ve sonra sadece var olanlar. Gördüğümüz gibi, bu güzel bir maliyetli operasyondur ve bağlamın kullanımı sorunu çözmez (aşağıdaki bağlam hakkında konuşacağız).
Dediğim gibi - çoğu durumda, Sizzle, seçiciyi sağ sola ayırır, ancak kimliği olan bir element kullanma durumunda değil:
$ ("# Divs .my_class")
Bu durumda, seçici beklendiği gibi davranır ve derhal bir bağlam biçiminde kullanım için #DIVS #DIVS alınacaktır.

Bağlam

Seçici ile birlikte iletilen ikinci parametre, () () 'nin işlevine () bağlam olarak adlandırılır. Bulma unsurları yelpazesini daraltmak için tasarlanmıştır. Bununla birlikte, içeriğin seçicinin başlangıcına ayrıştırırken, kazanan kazanmanın kazanmasına izin vermez. Kazanan bağlam kullanımı kombinasyonu, QuerySelectorall () için geçerli bir seçicidir (), çünkü bu fonksiyon sadece belge adına değil, aynı zamanda öğeden de uygulanabilir. Sonra bağlamdaki seçici, aşağıdaki tasarıma dönüştürülür:
$ (". Divs", document.getElementbyid ("sarıcı"));
Belge.getElementbyid ("Sarıcı"). QuerySelectorall ("DivS"); // QuerySelectorall () kullanma fırsatınız varsa

Bu örnekte, QuerySelectorall () kullanmak mümkün değilse, Sizzle elemanları basit büstü ile filtreleyecektir.
İçerik hakkında başka bir açıklama (seçicilerle ilgili değil) - işlevi için seçiciydeki ikinci parametre, jquery nesnesidir - olay belgeye (!) Ve DOM nesnesi açılırsa yakalanır. Sadece bu ürün için bir olay. Bu tür incelikler ezberlememeye çalışıyorum, ama ben kullanıyorum .Delegate ().

Filtreler ve Hiyerarşi Elemanları

Yuvalanmış elemanları aramak için aşağıdaki seçiciyi kullanabilirsiniz:
$ ("Root\u003e .child")
Bildiğimiz gibi - Mühürleyen ayrıştırma ve arama, sayfadaki tüm.Çocuk elemanlarına başlayacaktır. (QuerySelectorall () mevcut değil). Böyle bir işlem oldukça maliyetlidir ve seçiciyi şöyle dönüştürebiliriz:
$ (". Çocuk", $ (". Kök")); // bağlam kullanımı aramayı kolaylaştırmaz
$ (". root"). Bul (". Çocuk"); // Neden tüm öğeleri kırmamız gerekiyor?
$ ("Kök"). Çocuklar (". Çocuk"); // en doğru seçenek

Bununla birlikte, herhangi bir özellik için filtreleri kullanmaya ihtiyaç varsa (: görünür,: EQ, vb.) Ve seçici şuna benziyor:
$ (". Some_images: görünür")
Filtre son kez uygulanacaktır - yani. "Sola doğru" kuraldan tekrar çekildik.

SONUÇLAR

• Mümkünse, QuerySelectorall () için uygun olan doğru seçicileri kullanın.
• Subqueries (.Children (...), vb. İçindeki seçiciler içindeki alt düzenlemeyi değiştirin.)
• Seçicinin bağlamını belirtin
• Daha küçük bir bitmiş eleman seti olarak filtre

Yeni Yıldaki Hızlı Seçiciler! Hepsi gelecek!

Ana sınıfa göre

Nesne Model Belgesi - Dom - Bu, var olan etiketlerden oluşan bir ağaç yapısından başka bir şey değildir. HTML. Belge.

Bütün bu unsurlarımız var HTML.Birbirinizin yanında bulunur, elde etmek istiyoruz ve sonra verileri okuyup değiştiririz. Ağaç yapısında bulundukları gibi, bu etiketleri bulmanın birçok yolu vardır. Bu yazıda, iki yerleşik fonksiyonun nasıl kullanılacağını öğreneceksiniz. Javascript., benzeri queryselector. ve queryselectorall. Arama için hTML. Etiketler.

Queryselector yöntemi

Yöntem yöntemlerinin özünü anlamak queryselector. ve queryselectorall. Bir sonraki HTML'ye bakın:

Bu örnekte bir tane var div tanımlayıcı ile ana. ve içine yatırım dört unsur div ve img, her biri sınıfın değeri olan pic konteyner ve profilimage. sırasıyla. Aşağıdaki birkaç bölümde, işlevleri uyguluyoruz. queryselector. ve queryselectorall. Bu konuda HTML Kodu Ve ne olacağını görelim.

queryselector.

İşlev queryselector. Aşağıdaki gibi çalışır:

Var element \u003d document.queryselector ("< CSS selector >");

Queryselector özelliği bir argüman alır ve bu argüman CSS Seçici Bulmak istediğiniz öğe için. İadeler queryselector özelliği, Bu seçiciye benzer olabilecek başka unsurlar olsa bile, bulduğu ilk unsurdur.

Bakmak HTML. Önceki örneğimizden, erişmek istiyorsak divkimin tanımlayıcısı ana.Aşağıdakileri yazmanız gerekir:

Var elemanı \u003d belge.queryselector ("# ana");

Gibi ana. tanımlayıcı, seçicinin sözdizimi olacaktır. #Ana. . Benzer şekilde, bir sınıf seçici pic konteyner :

Var elemanı \u003d belge.queryselector (". Pic-container");

İlk blok döndürülür div , kimin değeri pic konteyner . Diğer elementler div Sınıf pic konteyner Sadece görmezden geldi.

Bu işlev için seçicilerin sözdizimi özel olarak oluşturulmadı, böylece stil sayfasındaki seçiciler için kullanacağınız tam sözdizimini kullanabilirsiniz!

Hepsi bu ve bir sonraki makalede aşağıdaki işlevi anlatacağım queryselectorall..

CSS gibi JavaScript, sayfa içeriğini dönüştürmek için HTML öğelerine erişmenizi sağlayan bir işlevselliğe sahiptir. CSS'de seçiciler yazarak elde edilir. Javascript'te bu işlevselliği düzenlemenin birkaç yolu vardır ve burada bunlardan biridir:

Var takipçileri \u003d document.getelementsbytagname ("h1");

Bu kod tüm H1 başlıklarını çıkarır ve kabaca konuşurken, bunları birincil kafa değişkenine yerleştirir. Sayfada birkaç başlık varsa, hepsi bir diziye yerleştirilirler.

Var ou812 \u003d document.getElementbyid ("eddie");

Bu kod, ID \u003d "Eddie" ile bir öğeyi seçer.

Var guitars \u003d document.getelementsbyclassname ("eksenler");

Ayrıca derslerinin adına göre öğeleri seçebiliriz.

Biraz cızırtılı ekle

Farklı bir JavaScript Freeymworks, kendi seçicilerin kendi yeteneklerini sağlayacaktır. En başarılı olanlardan biri, daha sonra jquery'ye dönüştüğü cızırtılı oldu. Algenesinin aksine, Sizzle sadece DOM ile çalışabilir ve onları manipüle edebilir. JQuery işlevselliğinin geri kalanına ihtiyacınız yoksa, bugün Sizzle'i ayrı bir kütüphane olarak indirebilirsiniz.

Bu kütüphanelerin geliştirilmesiyle, yazma seçicileri önemli ölçüde azalmış ve dönüştürülmüştür:

$ ("# Davave"). CSS ()

Bu kod, HTML öğesini ID \u003d "Dave" ile alır ve CSS stilleriyle çalışmanıza izin verir.

Sizzle, HTML kodunu manipüle eden tek javascript kütüphanesi değildir. Diğer seçenekler de var, örneğin, Rangy. Bununla birlikte, bence, yukarıdakilerin tümü bu makalede sizi daha da beklemekten önce eskisidir.

Yeni Seviye JavaScript

Birçok geliştirici, JQuery'i bile kullanmaya başladı, bu da JavaScript'in kendisinde kardinal değişiklikleri bile farketmedi.

"JavaScript Selector API", HTML5 spesifikasyonunun resmi bir parçasıdır, kullanılabilir ve XHTML sayfaları yazarken. Yeni sözdizimi çok basittir:

Belge.queryselector ("# eddie")

Bu kod kesinlikle eşdeğer bir belgedir. GreteTelementbyID ("Eddie"). Etkileyici değil mi? Peki buna ne dersin:

Belge.queryselector ("# Eddie H1 + P"))

Yeni işlevsellik, Kompleks CSS ifadeleri kullanarak, DOM'u manipüle etmenizi sağlar.

QuerySelector yöntemi sadece ilk öğeyi alır. QuerySelectorall'ı kullanmanız gereken her şeyi çıkarmak için:

Var hifrets \u003d document.queryselectorall ("Tablo # Fretler Tr: nth-child (3)")

Bu kod, her üç satırı, ID \u003d "FRETS" ile tablodan alır.

Birkaç çok önemli nokta

QuerySelector / Tüm yöntemini kullanırsanız, bilmeniz gereken birkaç kısıtlama vardır:

Tüm tarayıcılar yeni özellikleri desteklemiyor. IE6-7'de çalışmanız için önemliyse, DOM'u manipüle edebilecek kütüphaneleri kullanmak daha iyidir: cızırtılı veya jquery.

Seçiciler çok dikkatli bir şekilde hazırlanmalı, aksi takdirde tarayıcılar bunları anlamazlar ve yukarıdaki yöntemler null geri dönecektir. Genel olarak, özellikle CSS3 seçicileri kullanırken çok dikkatli olun.

GetElementsByTagname'nin aksine, QuerySelectorall yöntemi şu anda sayfada oldukları formda statik bir ekstrakt listesi döndürür. Bu, kodda herhangi bir dinamik değişiklik yaparken (JavaScript aracılığıyla öğeleri ekleyerek), QuerySelectorTüm yönteminden yararlanmak gerekecektir.

Çeşitli kütüphane indirme ihtiyacından kurtulmak için yeni özellikleri deneyin.

Son güncelleme: 1.11.2015

JavaScript'teki DOM yapısı ile çalışmak için, belge nesnesi, genel pencere nesnesinde tanımlanmıştır. Belge nesnesi, sayfa öğelerini yönetmek için bir dizi özellik ve yöntem sağlar.

Arama elemanları

Sayfadaki öğeleri aramak için aşağıdaki yöntemler uygulanır:

getElementByID (değer): Kimlik niteliğinin değere eşit olduğu bir öğeyi seçer.

getElementsByTagName (değer): Etiketin değere eşit olduğu tüm öğeleri seçer

getElementsbyClassName (değer): Değer sınıfına sahip tüm unsurları seçer

querySelector (değer): CSS seçicisine karşılık gelen ilk elemanı seçer

querySelectorall (değer): CSS seçici değerini eşleştiren tüm öğeleri seçer

Örneğin, kimliğe göre bir eleman bulun:

Çağrı belgesini kullanarak.getElementbyid ("Header") Hangi kimliğin \u003d "başlık" nın bir öğeyi buluruz. Ve Innertlext özelliğini kullanarak bulunan öğenin metnini bulabilirsiniz.

Belirli bir etiketle arama:

Belgeleri kullanarak. GetirementsbytagName Araması ("P"), tüm paragrafların tüm unsurlarını buluruz. Bu çağrı bir dizi bulunan öğe döndürür. Bu nedenle, dizinin ayrı elemanlarını elde etmek için, onlardaki bisiklette çalışmanız gerekir.

Yalnızca ilk öğeyi almamız gerekiyorsa, bulunan nesnelerin bulundu koleksiyonlarının ilk unsuruna gidebilirsiniz:

Var pelement \u003d document.getelementsbytagname ("P"); Belge.write ("Sext paragrafı:" + pelement.innerText);

Sınıfta bir öğe almak:

CSS Seçici Seçimi:

Belge.queryselector ifadesi (". Açıklama P"), seçiciye karşılık gelen bir öğeyi bulur. Sayfanın seçiciye karşılık gelen birkaç öğeye sahipse, yöntem birincisini seçer. Sonuç olarak, tarayıcı geri çekilecektir:

Açıklama Makalesi Birinci fıkra İkinci paragraf seçicinin ikinci paragrafı: Özet makale

Seçicideki tüm öğeleri elde etmek için, bulunan öğelerin dizisini döndüren belge.queryselectorall yöntemini beğenebilirsiniz:

Tarayıcı çıkışı:

Ek Açıklama Makalesi Birinci Paragraf İkinci Paragraf Metin Seçici 0: Birinci Paragraf Metin Seçici 1: İkinci Paragraf