DOM-tekniikat: vanhempi-, lapsi- ja naapurielementit. DOM-manipulaatio puhtaalla JavaScriptillä Javascript: miten saada vanhempi elementtejä

body div.lol a.rightArrow

Miten saan tämän javascriptin/jqueryn avulla?

Käyttämällä jQueryä tällä tavalla (seuraavana ratkaisu, joka ei käytä jQueryä paitsi tapahtumaa, paljon vähemmän funktiokutsuja, jos se on tärkeää):

Reaaliaikainen esimerkki:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() ( var entry = this.tagName .toLowerCase(); if (this.className) ( merkintä += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(entry )); väärä; Klikkaa tästä

(Elävissä esimerkeissä päivitin div-attribuutin luokka-attribuutiksi lol multiksi, jotta voidaan osoittaa useiden luokkien käsittely.)

Tässä on ratkaisu tarkkaan elementtien yhteensovittamiseen.

On tärkeää ymmärtää, että valitsin (ei ole todellinen), jonka kromityökalut näyttävät, eivät yksilöi DOM:n elementtiä. ( Se ei esimerkiksi tee eroa peräkkäisten span elementtien luettelon välillä. Ei paikannus-/indeksointitietoja)

$.fn.fullSelector = funktio () ( var polku = this.parents().addBack(); var quickCss = polku.get().map(funktio (kohde) ( var self = $(tuote), id = kohde .id ? "#" + item.id: "", clss = item.classList.length ? item.classList.toString().split(" ").map(function (c) ( return "." + c; )).join("") : "", nimi = item.nodeName.toLowerCase(), index = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; if (nimi === "html" || nimi === "body") ( paluunimi; ) paluunimi + indeksi + tunnus + clss )).join(" > ") ; paluu pikaCss ;

Ja voit käyttää sitä näin:

Console.log($("joku valitsin").fullSelector());

Siirsin palan T.J. Crowder pieneen jQuery-laajennukseen. Käytin jQuery-versiota, vaikka hän on oikeassa, että se on täysin turhaa, mutta käytän sitä vain virheenkorjaustarkoituksiin, joten en välitä.

Käyttö:

Sisäkkäinen jänneväli Yksinkertainen jänneväli Esi

// tulos (taulukko): ["body", "div.sampleClass"] $("span").getDomPath(false) // tulos (merkkijono): body > div.sampleClass $("span").getDomPath( ) // tulos (taulukko): ["body", "div#test"] $("pre").getDomPath(false) // tulos (merkkijono): body > div#test $("pre").getDomPath ()

Var obj = $("#show-editor-button"), polku = ""; while (obj.prop("tunnisteenNimi") != "määrittämätön")(if (obj.attr("luokka"))(polku = "."+obj.attr("luokka").replace(/\s /g , ".") + polku; ) if (obj.attr("id"))( polku = "#"+obj.attr("id") + polku; ) polku = " " +obj.prop( "tunnisteenNimi").toLowerCase() + polku; obj = obj.parent() ) console.log(polku);

hei tämä toiminto ratkaisee virheen, joka liittyy siihen, että nykyistä elementtiä ei näytetä polussa

Tarkista se nyt

$j(".wrapper").click(function(event) ( selectedElement=$j(event.target); var rightArrowParents = ; $j(event.target).parents().not("html,body") .each(function() ( var entry = this.tagName.toLowerCase(); if (this.className) ( merkintä += "." + this.className.replace(/ /g, "."); )else if (this.id)( entry += "#" + this.id; ) entry=replaceAll(entry,.","."); rightArrowParents.push(merkintä )); rightArrowParents.reverse(); //if( event.target.nodeName.toLowerCase()=="a" ||. event.target.nodeName.toLowerCase()=="h1")( var entry = event.target.nodeName.toLowerCase(); if (event.target .className) ( merkintä += "." + event.target.className.replace(/ /g, "."); )else if(event.target.id)( merkintä += "#" + event.target. id; ) rightArrowParents.push(merkintä);

Missä $j = jQuery-muuttuja

ratkaise ongelma myös luokan nimessä olevalla ..:lla

tässä on korvaustoiminto:

Funktio escapeRegExp(str) ( return str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) funktio korvaaKaikki(str, etsi, korvaa) ( return str.replace(new RegExp(escapeRegExp(find), "g"), korvaa); )

Tässä on alkuperäinen JS-versio, joka palauttaa jQuery-polun. Lisään myös tunnukset elementeille, jos niitä on. Tämä antaa sinulle mahdollisuuden valita lyhimmän polun, jos näet id:n taulukossa.

Var polku = getDomPath(elementti); console.log(path.join(" > "));

Body > section:eq(0) > div:eq(3) > section#content > section#firehose > div#firehoselist > article#firehose-46813651 > header > h2 > span#title-46813651

Tässä on toiminto.

Funktio getDomPath(el) ( var pino = ; while (el.parentNode != null) ( console.log(el.nodeName); var sibCount = 0; var sibIndex = 0; for (var i = 0; i< el.parentNode.childNodes.length; i++) { var sib = el.parentNode.childNodes[i]; if (sib.nodeName == el.nodeName) { if (sib === el) { sibIndex = sibCount; } sibCount++; } } if (el.hasAttribute("id") && el.id != "") { stack.unshift(el.nodeName.toLowerCase() + "#" + el.id); } else if (sibCount >1) ( pino.unshift(el.solmunName.toLowerCase() + ":eq(" + sibIndex + ")"); ) else ( pino.unshift(el.nodeName.toLowerCase()); ) el = el.parentNode ; ) palauta pino.slice(1); // poistaa html-elementin)

Tyypillisesti kehittäjät käyttävät jQueryä, kun heidän on tehtävä jotain DOM:n kanssa. Kuitenkin lähes kaikki DOM-manipulaatiot voidaan tehdä puhtaalla JavaScriptillä käyttämällä sen DOM-sovellusliittymää.

Katsotaanpa tätä API:ta tarkemmin:

Lopuksi kirjoitat oman yksinkertaisen DOM-kirjastosi, jota voidaan käyttää missä tahansa projektissa.

DOM-kyselyt suoritetaan käyttämällä .querySelector()-metodia, joka ottaa mielivaltaisen CSS-valitsimen argumenttina.

Const myElement = document.querySelector("#foo > div.bar")

Se palauttaa ensimmäisen vastaavan elementin. Voit tehdä päinvastoin - tarkista, vastaako elementti valitsinta:

MyElement.matches("div.bar") === tosi

Jos haluat saada kaikki valitsinta vastaavat elementit, käytä seuraavaa rakennetta:

Const myElements = document.querySelectorAll(.bar")

Jos tiedät, mihin pääelementtiin haluat viitata, voit yksinkertaisesti etsiä sen alatason kautta koko koodin etsimisen sijaan:

Const myChildElemet = myElement.querySelector("syöttö") // Sen sijaan: // document.querySelector("#foo > div.bar input")

Herää kysymys: miksi sitten käyttää muita, vähemmän käteviä menetelmiä, kuten .getElementsByTagName() ? On olemassa pieni ongelma - .querySelector()-tulostusta ei päivitetä, ja kun lisäämme uuden elementin (katso ), se ei muutu.

Const elementit1 = document.querySelectorAll("div") const elementit2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elementit2.length // väärä

Myös querySelectorAll() kerää kaiken yhdeksi listaksi, mikä tekee siitä ei kovin tehokasta.

Tämän lisäksi .querySelectorAll() sisältää kaksi pientä varoitusta. Et voi vain kutsua menetelmiä tuloksiin ja odottaa, että niitä sovelletaan jokaiseen (kuten olet ehkä tottunut tekemään jQueryn kanssa). Joka tapauksessa sinun on iteroitava kaikki silmukan elementit. Toiseksi palautettu objekti on luettelo elementeistä, ei taulukko. Siksi taulukkomenetelmät eivät toimi. Tietysti on olemassa menetelmiä listoille, kuten .forEach() , mutta valitettavasti ne eivät sovellu kaikkiin tapauksiin. Joten on parempi muuntaa luettelo taulukoksi:

// Array.from() Array.from(myElements) käyttö myElements , doSomethingWithEachElement)

Jokaisella elementillä on ominaisuuksia, jotka viittaavat "perheeseen".

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

Koska elementtirajapinta peritään Node-rajapinnalta, seuraavat ominaisuudet ovat myös läsnä:

OmaElementti.lapsiSolmut myElement.firstChild myElement.lastChild myElement.previousSibling myElement.extSibling myElement.parentSolmu myElement.parentElement

Ensimmäiset ominaisuudet viittaavat elementtiin ja viimeiset (poikkeuksena .parentElement) voivat olla minkä tahansa tyyppisiä elementtejä. Vastaavasti voit tarkistaa elementin tyypin:

MyElement.firstChild.nodeType === 3 // tästä elementistä tulee tekstisolmu

Uuden luokan lisääminen on hyvin yksinkertaista:

MyElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

Ominaisuuden lisääminen elementtiin on sama kuin mille tahansa objektille:

// Hae attribuutin arvo const value = myElement.value // Aseta attribuutti elementtiominaisuuteen myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Voit käyttää menetelmiä .getAttibute() , .setAttribute() ja .removeAttribute(). Ne muuttavat välittömästi elementin HTML-attribuutteja (toisin kuin DOM-ominaisuuksia), mikä aiheuttaa selaimen uudelleenhahmontamisen (näet kaikki muutokset tutkimalla elementtiä selaimen kehittäjätyökaluilla). Tällaiset uudelleenpiirrokset eivät ainoastaan ​​vaadi enemmän resursseja kuin DOM-ominaisuuksien asettaminen, vaan voivat myös johtaa odottamattomiin virheisiin.

Tyypillisesti niitä käytetään elementeille, joilla ei ole vastaavia DOM-ominaisuuksia, kuten colspan . Tai jos niiden käyttö on todella välttämätöntä, esimerkiksi HTML-ominaisuuksille periytymisen yhteydessä (katso).

Ne lisätään samalla tavalla kuin muut ominaisuudet:

MyElement.style.marginLeft = "2em"

Jotkin erityiset ominaisuudet voidaan asettaa käyttämällä .stylea, mutta jos haluat saada arvot joidenkin laskutoimitusten jälkeen, on parempi käyttää window.getComputedStyle() . Tämä menetelmä vastaanottaa elementin ja palauttaa CSSStyleDeclarationin, joka sisältää sekä itse elementin että sen ylätason tyylit:

Window.getComputedStyle(myElement).getPropertyValue("margin-left")

Voit siirtää elementtejä:

// Liitä elementti1 elementin element2 viimeiseksi lapseksi elementti1.appendChild(element2) // Lisää elementti2 elementin elementin1 lapseksi ennen elementti3 elementti1.insertBefore(element2, element3)

Jos et halua siirtää sitä, mutta haluat lisätä kopion, käytä:

// Luo klooni const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

.cloneNode()-menetelmä ottaa argumenttina loogisen arvon, ja jos tosi, myös alielementit kloonataan.

Voit tietysti luoda uusia elementtejä:

Const myNewElement = document.createElement("div") const myNewTextSolmu = document.createTextNode("joku tekstiä")

Ja aseta ne sitten yllä olevan kuvan mukaisesti. Et voi poistaa elementtiä suoraan, mutta voit tehdä sen pääelementin kautta:

MyParentElement.removeChild(myElement)

Voit ottaa yhteyttä myös epäsuorasti:

OmaElementti.parentNode.removeChild(omaElementti)

Jokaisella elementillä on ominaisuuksia, kuten .innerHTML ja .textContent , ne sisältävät HTML-koodin ja vastaavasti itse tekstin. Seuraava esimerkki muuttaa elementin sisältöä:

// Muuta HTML-koodia myElement.innerHTML = ` Uusi sisältö ( el.addEventListener("muutos", funktio (tapahtuma) ( console.log(event.target.value) )))

Voit tehdä tämän käyttämällä .preventDefault()-menetelmää, joka estää vakiotoiminnot. Se esimerkiksi estää lomakkeiden lähettämisen, jos asiakaspuolen valtuutus ei onnistunut:

MyForm.addEventListener("lähetä", funktio (tapahtuma) ( const name = this.querySelector("#name") if (nimi.arvo === "Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

.stopPropagation()-metodi auttaa, jos alielementille on määritetty erityinen tapahtumakäsittelijä ja ylätason tapahtumakäsittelijä samalle tapahtumalle.

Kuten aiemmin todettiin, .addEventListener()-menetelmä ottaa valinnaisen kolmannen argumentin määritysobjektin muodossa. Tämän objektin on sisällettävä jokin seuraavista boolen ominaisuuksista (oletusarvoisesti kaikki asetettu epätosi):

• sieppaus: tapahtuma liitetään tähän elementtiin ennen muita DOM:n alla olevia elementtejä;
• kerran: tapahtuma voidaan määrittää vain kerran;
• passiivinen: event.preventDefault() ohitetaan (poikkeus virheen aikana).

Yleisin ominaisuus on .capture , ja se on niin yleistä, että siihen on pikakuvake: sen sijaan, että välität sen määritysobjektissa, välitä sen arvo tähän:

MyElement.addEventListener(tyyppi, kuuntelija, tosi)

Käsittelijät poistetaan käyttämällä .removeEventListener()-metodia, jossa tarvitaan kaksi argumenttia: tapahtumatyyppi ja viittaus poistettavaan käsittelijään. Kerran omaisuus voidaan toteuttaa esimerkiksi seuraavasti:

MyElement.addEventListener("muutos", funktion kuuntelija (tapahtuma) ( console.log(event.type + " laukaistiin " + this) this.removeEventListener("change", kuuntelija) ))

Oletetaan, että sinulla on elementti ja haluat lisätä tapahtumakäsittelijän kaikille sen alaryhmille. Sitten sinun on selattava niitä käyttämällä myForm.querySelectorAll("input") -metodia yllä kuvatulla tavalla. Voit kuitenkin lisätä lomakkeeseen elementtejä ja tarkistaa niiden sisällön käyttämällä event.target -tiedostoa.

MyForm.addEventListener("muutos", funktio (tapahtuma) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

Ja toinen tämän menetelmän etu on, että käsittelijä liitetään automaattisesti uusiin alielementteihin.

Helpoin tapa lisätä animaatiota on käyttää CSS:ää siirtymäominaisuuden kanssa. Mutta suuremman joustavuuden vuoksi (esimerkiksi peleihin) JavaScript sopii paremmin.

window.setTimeout()-menetelmän kutsuminen animaation loppuun asti ei ole hyvä idea, koska sovelluksesi voi jäätyä, etenkin mobiililaitteissa. On parempi käyttää window.requestAnimationFrame() tallentaaksesi kaikki muutokset seuraavaan uudelleenpiirtämiseen asti. Se ottaa funktion argumenttina, joka puolestaan ​​saa aikaleiman:

Const start = window.performance.now() const kesto = 2000 window.requestAnimationFrame(funktio fadeIn (nyt)) ( const progress = nyt - aloita myElement.style.opacity = edistyminen / kesto jos (progress)< duration) { window.requestAnimationFrame(fadeIn) } }

Tällä tavalla saadaan aikaan erittäin sujuva animaatio. Artikkelissaan Mark Brown käsittelee tätä aihetta.

Se tosiasia, että DOM:ssa joudut iteroitamaan elementtejä koko ajan suorittaaksesi mitään toimintoja elementeille, voi tuntua melko työlältä verrattuna jQueryn $(.foo").css((väri: "punainen"))-syntaksiin. Mutta miksi et kirjoittaisi muutamia omia menetelmiäsi helpottaaksesi tätä tehtävää?

Const $ = funktio $ (valitsin, konteksti = asiakirja) ( const elementit = Array.from(context.querySelectorAll(selector)) return ( elementit, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) palauttaa tämän ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) palauttaa tämän ), on (tapahtuma, käsittelijä, asetukset) ( this.elements .forEach(element => ( element.addEventListener(tapahtuma, käsittelijä, asetukset) )) palauttaa tämän ) ) )

Monimutkaiset ja raskaat verkkosovellukset ovat yleistyneet nykyään. Selaimien väliset ja helppokäyttöiset kirjastot, kuten jQuery, monipuolisine toimintoineen voivat auttaa suuresti DOM:n manipuloinnissa lennossa. Siksi ei ole yllättävää, että monet kehittäjät käyttävät tällaisia ​​kirjastoja useammin kuin työskentelevät alkuperäisen DOM-sovellusliittymän kanssa, jonka kanssa oli monia ongelmia. Vaikka selainerot ovat edelleen ongelma, DOM on nyt paremmassa kunnossa kuin 5–6 vuotta sitten, kun jQuery nousi suosioon.

Tässä artikkelissa esittelen DOM:n HTML-manipulointiominaisuudet keskittyen vanhempien, lasten ja naapurisuhteisiin. Lopuksi annan tietoja selaimen tuesta näille ominaisuuksille, mutta muista, että jQueryn kaltainen kirjasto on edelleen hyvä vaihtoehto, koska siinä on virheitä ja epäjohdonmukaisuuksia alkuperäisten toimintojen toteutuksessa.

Käytän seuraavaa HTML-merkintää tässä esittelyssä, ja muutamme sitä muutaman kerran artikkelin aikana:

• Esimerkki yksi
• Esimerkki kaksi
• Esimerkki kolme
• Esimerkki neljä
• Esimerkki viisi
• Esimerkki kuusi

Var myList = document.getElementById("omaLista"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

Kuten näet, tulokset ovat samat, vaikka käytetyt tekniikat ovat erilaisia. Ensimmäisessä tapauksessa käytän lasten omaisuutta. Tämä on vain luku -ominaisuus ja palauttaa pyydetyn elementin sisältämien HTML-elementtien kokoelman. Niiden lukumäärän laskemiseen käytän tämän kokoelman pituusominaisuutta.

Toisessa esimerkissä käytän childElementCount-menetelmää, joka on mielestäni siistimpi ja mahdollisesti ylläpidettävämpi tapa (keskustele tästä lisää myöhemmin, en usko, että sinulla on vaikeuksia ymmärtää, mitä se tekee).

Voisin kokeilla käyttää childNodes.length (lapset.length sijasta), mutta katso tulos:

Var myList = document.getElementById("omaLista"); console.log(myList.childNodes.length); // 13

Se palauttaa arvon 13, koska childNodes on kokoelma kaikkia solmuja, myös välilyöntejä - pidä tämä mielessä, jos välität erosta lapsisolmujen ja alielementtisolmujen välillä.

Jos haluat tarkistaa, onko elementillä lapsisolmuja, voin käyttää hasChildNodes()-menetelmää. Menetelmä palauttaa Boolen arvon, joka osoittaa niiden olemassaolon tai puuttumisen:

Var myList = document.getElementById("omaLista"); console.log(myList.hasChildNodes()); // totta

Tiedän, että luettelossani on alisolmuja, mutta voin muuttaa HTML-koodin niin, ettei niitä ole; Merkintä näyttää nyt tältä:

Ja tässä on tulos hasChildNodes():n uudelleen suorittamisesta:

Console.log(myList.hasChildNodes()); // totta

Menetelmä palauttaa silti tosi. Vaikka luettelo ei sisällä elementtejä, se sisältää välilyönnin, joka on kelvollinen solmutyyppi. Tämä menetelmä ottaa huomioon kaikki solmut, ei vain elementtisolmut. Jotta hasChildNodes() palauttaisi false, meidän on muutettava merkintää uudelleen:

Ja nyt odotettu tulos näkyy konsolissa:

Console.log(myList.hasChildNodes()); // väärä

Tietenkin, jos tiedän saatavani kohdata välilyöntejä, tarkistan ensin alisolmujen olemassaolon ja määritän sitten nodeType-ominaisuuden avulla, onko niiden joukossa elementtisolmuja.

On olemassa tekniikoita, joiden avulla voit lisätä ja poistaa elementtejä DOM:sta. Tunnetuin niistä perustuu createElement()- ja appendChild()-menetelmien yhdistelmään.

Muutt myEl = document.createElement("div"); document.body.appendChild(myEl);

Tässä tapauksessa luon käyttämällä createElement()-menetelmää ja lisään sen sitten runkoon. Se on hyvin yksinkertainen, ja olet todennäköisesti käyttänyt tätä tekniikkaa aiemmin.

Mutta sen sijaan, että lisäisin erityisesti luodun elementin, voin myös käyttää appendChild():tä ja yksinkertaisesti siirtää olemassa olevaa elementtiä. Oletetaan, että meillä on seuraava merkintä:

• Esimerkki yksi
• Esimerkki kaksi
• Esimerkki kolme
• Esimerkki neljä
• Esimerkki viisi
• Esimerkki kuusi

Esimerkkiteksti

Voin muuttaa listan sijaintia seuraavalla koodilla:

Muutt myList = document.getElementById("myList"), säiliö = document.getElementById("c"); container.appendChild(myList);

Lopullinen DOM näyttää tältä:

Esimerkkiteksti

• Esimerkki yksi
• Esimerkki kaksi
• Esimerkki kolme
• Esimerkki neljä
• Esimerkki viisi
• Esimerkki kuusi

Huomaa, että koko luettelo on poistettu paikaltaan (kappaleen yläpuolelta) ja lisätty sen jälkeen ennen lopputekstiä . Vaikka appendChild()-menetelmää käytetään tyypillisesti createElement() -toiminnolla luotujen elementtien lisäämiseen, sitä voidaan käyttää myös olemassa olevien elementtien siirtämiseen.

Voin myös poistaa lapsielementin kokonaan DOM:sta käyttämällä removeChild() -funktiota. Näin voit poistaa luettelomme edellisestä esimerkistä:

Muutt myList = document.getElementById("myList"), säiliö = document.getElementById("c"); container.removeChild(myList);

Elementti on nyt poistettu. RemoveChild()-metodi palauttaa poistetun elementin, jotta voin tallentaa sen, jos tarvitsen sitä myöhemmin.

Muut myVanhaLapsi = document.body.removeChild(myList); document.body.appendChild(omaVanhaLapsi);

On myös ChildNode.remove()-metodi, joka on suhteellisen hiljattain lisätty spesifikaatioon:

Var myList = document.getElementById("omaLista"); myList.remove();

Tämä menetelmä ei palauta etäobjektia, eikä se toimi IE:ssä (vain Edge). Ja molemmat menetelmät poistavat tekstisolmut samalla tavalla kuin elementtisolmut.

Voin korvata olemassa olevan alielementin uudella riippumatta siitä, onko uusi elementti olemassa vai olenko luonut sen tyhjästä. Tässä merkintä:

Esimerkkiteksti

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "esimerkki"; myDiv.appendChild(document.createTextNode("Uuden elementin teksti")); document.body.replaceChild(myDiv, myPar);

Uusi elementtiteksti

Kuten näette, revidChild()-menetelmässä on kaksi argumenttia: uusi elementti ja vanha elementti, jonka se korvaa.

Voin käyttää tätä menetelmää myös olemassa olevan elementin siirtämiseen. Tutustu seuraavaan HTML-koodiin:

Esimerkkiteksti 1

Esimerkkiteksti 2

Esimerkkiteksti 3

Voin korvata kolmannen kappaleen ensimmäisellä kappaleella käyttämällä seuraavaa koodia:

Muut omaPar1 = document.getElementById("par1"), omaPar3 = dokumentti.getElementById("par3"); document.body.replaceChild(omaPar1, omaPar3);

Nyt luotu DOM näyttää tältä:

Esimerkkiteksti 2

Esimerkkiteksti 1

Tietyn elementin valitsemiseen on useita eri tapoja. Kuten aiemmin näytettiin, voin aloittaa käyttämällä lapsikokoelmaa tai childNodes-ominaisuutta. Mutta katsotaanpa muita vaihtoehtoja:

FirstElementChild- ja lastElementChild-ominaisuudet tekevät täsmälleen sen, mitä niiden nimet antavat ymmärtää: valitsevat ensimmäisen ja viimeisen alielementin. Palataan merkintään:

• Esimerkki yksi
• Esimerkki kaksi
• Esimerkki kolme
• Esimerkki neljä
• Esimerkki viisi
• Esimerkki kuusi

Voin valita ensimmäisen ja viimeisen elementin käyttämällä näitä ominaisuuksia:

Var myList = document.getElementById("omaLista"); console.log(myList.firstElementChild.innerHTML); // "Esimerkki yksi" console.log(myList.lastElementChild.innerHTML); // "Esimerkki kuusi"

Voin myös käyttää previousElementSibling- ja nextElementSibling-ominaisuuksia, jos haluan valita muita alielementtejä kuin ensimmäistä tai viimeistä. Tämä tehdään yhdistämällä firstElementChild- ja lastElementChild-ominaisuudet:

Var myList = document.getElementById("omaLista"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Esimerkki kaksi" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Esimerkki viisi"

On myös samanlaisia ​​ominaisuuksia firstChild , lastChild , previousSibling ja nextSibling , mutta ne ottavat huomioon kaikentyyppiset solmut, eivät vain elementit. Yleensä vain elementtisolmut huomioivat ominaisuudet ovat hyödyllisempiä kuin ne, jotka valitsevat kaikki solmut.

Olen jo tutkinut tapoja lisätä elementtejä DOM:iin. Siirrytään samanlaiseen aiheeseen ja katsotaan sisällön lisäämisen uusia ominaisuuksia.

Ensinnäkin on olemassa yksinkertainen insertBefore()-metodi, aivan kuten changeChild(), se vaatii kaksi argumenttia ja toimii sekä uusien että olemassa olevien elementtien kanssa. Tässä merkintä:

• Esimerkki yksi
• Esimerkki kaksi
• Esimerkki kolme
• Esimerkki neljä
• Esimerkki viisi
• Esimerkki kuusi

Esimerkki kappale

Huomaa kappale, jonka aion poistaa ensin, ja lisää se sitten ennen luetteloa, kaikki yhdellä iskulla:

Var myList = document.getElementById("omaLista"), kontti = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

Tuloksena olevassa HTML-koodissa kappale näkyy ennen luetteloa, ja tämä on toinen tapa rivittää elementti.

Esimerkki kappale

• Esimerkki yksi
• Esimerkki kaksi
• Esimerkki kolme
• Esimerkki neljä
• Esimerkki viisi
• Esimerkki kuusi

Kuten changeChild(), insertBefore() ottaa kaksi argumenttia: lisättävän elementin ja elementin, jonka eteen se halutaan lisätä.

Tämä menetelmä on yksinkertainen. Kokeillaan nyt tehokkaampaa lisäysmenetelmää: insertAdjacentHTML()-menetelmää.