Javascript ingiza kabla ya mifano. Marejeleo ya JavaScript: Kielezo cha Mbinu: Mbinu za JavaScript Kuanzia na I. Kuongeza Nodi kwenye Mti

Njia hiyo hukuruhusu kuingiza au kuuza nje alamisho "zinazozipenda".

External.ImportExportFavorites(kweli|uongo, "(Njia)");

Kigezo cha kwanza kinabainisha operesheni: import (value kweli) au kuuza nje (thamani uongo).

Kigezo cha pili kinabainisha njia kutoka ambapo alamisho zitaletwa au kuhamishwa. Ukibainisha mfuatano tupu, Kivinjari cha Wavuti kitaonyesha kisanduku kidadisi cha kawaida chenye uteuzi wa folda.

Mbinu hairudishi thamani.

katikaRange

Njia hukuruhusu kujua ikiwa kitu fulani cha TextRange kiko ndani ya kitu.

(Kipengee chaRange ya Maandishi).katikaRange((kitu chaRange ya Maandishi kinalinganishwa));

Njia ya kurudi kweli Masafa ya maandishi iko ndani au sawa na kitu cha sasa, na uongo- vinginevyo.

Masafa ya maandishi.

NN imeungwa mkono tangu 4.0

insertAdjacentElement

Mbinu huingiza kipengee kipya cha ukurasa ndani au karibu na kipengee cha sasa.

(Object).insertAdjacentElement("beforeBegin|afterBegin|beforeEnd|afterEnd", (Kipengele cha Ukurasa kitawekwa));

Njia inachukua vigezo viwili.

Kigezo cha kwanza kinabainisha mahali ambapo kipengele cha ukurasa kitaingizwa. Kuna chaguzi nne kwa chaguo hili:

  • kabla yaKuanza - kipengele kitaingizwa kabla ya lebo ya ufunguzi wa kipengele cha sasa cha ukurasa;
insertAdjacentHTML

Mbinu huingiza kipande cha msimbo wa HTML ndani au karibu na lebo maalum.

(Object).insertAdjacentHTML("beforeBegin|afterBegin|beforeEnd|afterEnd", (Ingiza msimbo wa HTML));

Njia inachukua vigezo viwili.

Kigezo cha kwanza kinabainisha mahali ambapo msimbo wa HTML utawekwa. Kuna chaguzi nne kwa chaguo hili:

  • kabla yaKuanza - msimbo utaingizwa kabla ya lebo ya ufunguzi wa kipengele cha sasa cha ukurasa;
  • afterBegin - itaingizwa baada ya lebo ya ufunguzi wa kipengele cha sasa cha ukurasa;
  • beforeEnd - itaingizwa kabla ya tagi ya kufunga ya kipengele cha ukurasa wa sasa (lakini baada ya maudhui yote ya lebo);
  • afterEnd - itawekwa baada ya lebo ya kufunga ya kipengele cha sasa cha ukurasa.

Kigezo cha pili kinabainisha msimbo wa HTML tunaotaka kuingiza.

insertAdjacentText

Mbinu huingiza maandishi ndani au karibu na kipengele maalum cha ukurasa.

(Object).insertAdjacentText("beforeBegin|afterBegin|beforeEnd|afterEnd", (Maandishi yameingizwa));

Njia inachukua vigezo viwili.

Kigezo cha kwanza kinabainisha mahali ambapo maandishi yataingizwa. Kuna chaguzi nne kwa chaguo hili:

  • kabla yaKuanza - maandishi yataingizwa kabla ya lebo ya ufunguzi wa kipengele cha sasa cha ukurasa;
  • afterBegin - itaingizwa baada ya lebo ya ufunguzi wa kipengele cha sasa cha ukurasa;
  • beforeEnd - itaingizwa kabla ya tagi ya kufunga ya kipengele cha ukurasa wa sasa (lakini baada ya maudhui yote ya lebo);
  • afterEnd - itawekwa baada ya lebo ya kufunga ya kipengele cha sasa cha ukurasa.

Kigezo cha pili kinabainisha maandishi tunayotaka kuingiza.

Njia hii hairudishi thamani.

Imeungwa mkono na IE kutoka 4.0

ingizaKabla

Mbinu inaingiza kipengele kwenye ukurasa.

(Object).insertBefore((Kipengele cha ukurasa tunachotaka kuingiza)[, "(Kipengele cha Mtoto)"]);

Njia inachukua vigezo viwili.

Imeungwa mkono na IE kutoka 5.0

ingizaKiini

Mbinu huingiza kisanduku kwenye safu mlalo ya jedwali.

(Kipengee cha safu mlalo ya jedwali). ingizaСell([(Index)]);

Mbinu huchukua kigezo kimoja tu cha hiari, ambacho hubainisha faharasa ya kisanduku kipya kilichoingizwa kwenye mkusanyiko seli.

Ikiwa kigezo hakijabainishwa, kisanduku huongezwa hadi mwisho wa mkusanyiko (thamani -1 ).

Imeungwa mkono na IE kutoka 4.0

ingizaRow

Mbinu inaingiza kisanduku kwenye jedwali au moja ya safu wima.

(Kipengee cha safu mlalo ya jedwali).ingizaMstari([(Index)]);

Mbinu inachukua kigezo kimoja tu cha hiari, ambacho hubainisha faharasa ya safu mlalo mpya iliyoingizwa kwenye mkusanyiko safu.

Ikiwa parameta haijabainishwa, mstari huongezwa hadi mwisho wa mkusanyiko (thamani -1 ).

Imeungwa mkono na IE kutoka 4.0

ni Sawa

Njia hiyo hukuruhusu kulinganisha kitu fulani cha TextRange na kitu cha sasa.

(kitu chaRange ya maandishi).isEqual((kitu chaRange cha Maandishi kinalinganishwa));

Njia inachukua parameta moja tu, ambayo inabainisha rejeleo la kitu kinacholinganishwa Masafa ya maandishi.

Njia ya kurudi kweli, ikiwa kitu kilipitishwa kwenye parameta Masafa ya maandishi sawa na kitu cha sasa.

Imeungwa mkono na IE kutoka 4.0

Imesajiliwa

Njia hiyo hukuruhusu kujua ikiwa mteja amejiandikisha kwa chaneli fulani au la.

External.IsSubscribed("(Anwani ya Mtandao ya faili ya CDF)");

Njia inachukua parameter moja tu, ambayo inabainisha anwani ya mtandao ya faili ya CDF inayoelezea kituo.

Njia ya kurudi kweli, ikiwa mteja amejiandikisha kwenye kituo hiki, na uongo- vinginevyo.

Imeungwa mkono na IE kutoka 4.0

kipengee

Mbinu inarudisha kipengee cha mkusanyiko na nambari iliyotolewa.

(Mkusanyiko).kipengee((Index)[, (Secondary Index)]);

Njia inachukua vigezo viwili.

Kigezo cha kwanza kinabainisha faharasa ya kipengele kinachohitajika kwenye mkusanyiko. Faharasa inaweza kuwakilishwa kama nambari ya nambari au kama thamani ya mfuatano.

Ikiwa faharasa imebainishwa kama nambari, basi kipengele kilicho na nambari hiyo kinarejeshwa.

Ikiwa faharasa imebainishwa kama thamani ya mfuatano, basi kipengele ambacho thamani yake ya sifa inarejeshwa ID Na NAME linganisha thamani ya mfuatano huu.

Ikiwa kuna maadili kadhaa yaliyorejeshwa, basi mkusanyiko mpya unarudishwa ambao una vipengele vyote vilivyopatikana vya mkusanyiko. Katika hali hii, kigezo cha pili cha hiari kinaweza kubainishwa ambacho kinabainisha faharasa ya pili inayobainisha nambari ya kipengele cha mkusanyiko wa pili.

Ikiwa hakuna kipengee cha mkusanyiko kinacholingana kinachopatikana, mbinu inarudi null.

Faharasa za nambari zinatumika kwa makusanyo: alamisho, watoto, kurasa, Nodi za watoto, controlRange, kanuni.

Faharasa za upili hazipatikani kwa mikusanyiko: sifa, mikunjo ya tabia, vichungi, muafaka, uagizaji, nafasi za majina, StyleSheets, Masafa ya maandishi, Mstatili wa maandishi.

Imeungwa mkono na IE kutoka 4.0

Katika somo hili tutajifunza jinsi ya kuunda nodi za kipengele (createElement) na nodi za maandishi (createTextNode). Pia tutazingatia mbinu zilizoundwa kwa ajili ya kuongeza nodi kwenye mti (appendChild, insertBefore) na kuondoa nodi kutoka kwa mti (removeChild).

Kuongeza Nodi kwenye Mti

Kuongeza nodi mpya kwenye mti kawaida hufanywa katika hatua 2:

  • Unda nodi inayohitajika kwa kutumia moja ya njia zifuatazo:
    • createElement() - huunda kipengee (node) na jina maalum (lebo). Njia ya createElement(element) ina parameter moja inayohitajika (element) - hii ni kamba iliyo na jina la kipengele (tag) kitakachoundwa. Jina la kipengele (lebo) katika parameta lazima liwe na herufi kubwa. Matokeo yake, njia hii inarudi kipengele kilichoundwa.
    • createTextNode() - huunda nodi ya maandishi na maandishi maalum. Njia ya kuundaTextNode(maandishi) ina parameta moja inayohitajika (maandishi) - hii ni kamba iliyo na maandishi ya nodi ya maandishi. Kama matokeo, njia hii inarudisha nodi ya maandishi ambayo iliundwa.
  • Taja eneo kwenye mti ambapo nodi inapaswa kuingizwa. Ili kufanya hivyo, lazima utumie moja ya njia zifuatazo:
    • appendChild() - anaongeza nodi kama mtoto wa mwisho wa kitu ambacho njia hii inaitwa. Njia ya appendChild(nodi) ina kigezo kimoja kinachohitajika: nodi unayotaka kuongeza. Njia hii inarudisha nodi iliyoongezwa kama matokeo.
    • insertBefore() - huingiza nodi kama nodi ya mtoto ya kipengele ambacho njia hii inaitwa. Njia ya insertBefore(newNode,existNode) ina vigezo viwili: newNode (inahitajika) ni nodi unayotaka kuongeza,Njia iliyopo (hiari) ni nodi ya mtoto ya kipengele ambacho unataka kuingiza nodi kabla. Ikiwa parameter ya pili (existingNode) haijainishwa, basi njia hii itaiingiza mwishoni, i.e. kama nodi ya mwisho ya mtoto ya kitu ambacho njia hii inaitwa. InsertBefore() njia inarudisha nodi iliyoingizwa kama matokeo yake.

    Kwa mfano:

    • Kompyuta
    • Laptop
    • Kompyuta kibao

    Hebu tuchunguze mfano changamano zaidi ambao tunaongeza kwenye mti nodi ya LI iliyo na nodi ya maandishi yenye maandishi "Smartphone" mwishoni mwa orodha ya ul.

    Ili kufanya hivyo unahitaji kufanya yafuatayo:

  • Unda kipengele (nodi) LI.
  • Unda nodi ya maandishi iliyo na maandishi "Smartphone".
  • Ongeza nodi ya maandishi iliyoundwa kama nodi ya mwisho ya mtoto ya kipengee kipya cha LI
  • Ongeza nodi mpya iliyoundwa ya LI kama nodi ya mwisho ya mtoto ya kipengee cha ul
  • //unda kipengele (nodi) li var elementLI = document.createElement("li"); //tengeneza nodi ya maandishi yenye maandishi "Smartphone" var textSmart= document.createTextNode("Smartphone"); // ongeza nodi ya maandishi iliyoundwa kama kipengele cha mwisho cha mtoto kwa kipengele kipya cha LI.appendChild(textSmart); //pata kipengele ambacho nodi ya li iliyoundwa itaongezwa kama mtoto var elementUL = document.getElementById("list"); //ongeza kipengee cha li kilichoundwa kama kipengele cha mwisho cha mtoto kwenye UL chenye id="list" elementUL.appendChild(elementLI);

    AppendChild() na insertBefore() mbinu wakati wa kufanya kazi na nodi zilizopo

    Kufanya kazi na nodi zilizopo kwa kutumia njia za appendChild() na insertBefore() pia hufanywa katika hatua 2:

  • Pata nodi iliyopo kwenye mti.
  • Bainisha mahali ambapo nodi inapaswa kuingizwa kwa kutumia njia ya appendChild() au insertBefore(). Hii itaondoa nodi kutoka eneo lake la awali.
  • Kwa mfano, ongeza kipengee kilichopo cha li kilicho na maandishi "Kompyuta" mwanzoni mwa orodha (hii itaiondoa kutoka mahali pa awali):

    // pata kipengee cha UL kilicho na orodha kwa kitambulisho chake var elementUL = document.getElementById("orodha"); // pata kipengele cha li kilicho na nodi ya maandishi "Tablet" var elementLI = elementUL.childNodes; //ongeza kipengele mwanzoni mwa orodha //katika kesi hii kitaondolewa kutoka eneo lake asili elementUL.insertBefore(elementLI,elementUL.firstChild);

    Zoezi
    • Kuna orodha mbili kwenye hati. Unahitaji kuhamisha vitu kutoka kwa orodha ya pili hadi ya kwanza.
    • Unda orodha, uga wa maandishi na vitufe 2. Andika msimbo katika JavaScript ambayo, kulingana na kitufe kilichobonyezwa, huongeza maandishi kwenye sehemu ya maandishi mwanzoni au mwisho wa orodha.
    Kuondoa nodi

    Kuondoa nodi kutoka kwa mti hufanywa katika hatua 2:

  • Pata (pata) nodi hii kwenye mti. Kitendo hiki kwa kawaida hufanywa na mojawapo ya mbinu zifuatazo: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() , au querySelectorAll() .
  • Piga njia ya removeChild() kwenye nodi ya mzazi, ambayo lazima ipitishwe kama kigezo nodi ambayo tunataka kuondoa kutoka kwayo.
    Njia ya removeChild() inarudisha nodi iliyoondolewa kama thamani yake, au null ikiwa nodi tuliyotaka kuondoa haikuwepo.
  • //tafuta nodi tunayotaka kufuta var findElement = document.getElementById("notebook"); // piga njia ya removeChild kwenye nodi ya mzazi // na uipitishe nodi iliyopatikana kama kigezo findElement.parentNode.removeChild(findElement);

    Kwa mfano, ondoa kipengele cha mwisho cha mtoto cha kipengele ambacho kina id="myID" :

    //pata kipengele ambacho kina id="myID" var myID = document.getElementById("myID"); // pata nodi ya mwisho ya mtoto ya kipengele cha myID var lastNode = myID.lastChild; // kwa sababu hatujui ikiwa nodi ya mtoto ya mwisho ya kipengele ni kipengele, // basi tutatumia kitanzi cha muda kupata mtoto wa mwisho wa kipengele cha myID // mradi tu kipengele kina nodi na aina yake sio 1. (yaani sio kipengele) tekeleza wakati (lastNode && lastNode.nodeType!=1) ( //nenda kwa nodi ya awali lastNode = lastNode.previousSibling; ) //ikiwa tumepata kipengele kwenye nodi ya myID ikiwa (lastNode) ( //kisha lazima iondolewe lastNode.parentNode.removeChild( lastNode);

    Kwa mfano, ondoa nodi zote za watoto za kipengee ambacho kina id="myQuestion" :

    //pata kipengele ambacho tunataka kuondoa nodi zake zote za watoto var elementQuestion = document.getElementById("myQuestion"); //wakati kuna kipengele cha kwanza wakati (elementQuestion.firstElement) ( //remove it elementQuestion.removeChild(element.firstChild); )

    Zoezi
  • Andika kitendakazi ambacho huondoa nodi zote za maandishi kutoka kwa kipengele.
  • Kuna orodha 2 (), andika msimbo wa JavaScript ambao huondoa vitu vyote kutoka kwa orodha ya 1 na 2.
  • Mbinu ya Node.insertBefore() inaongeza kipengele kwenye orodha ya watoto wa mzazi kabla ya kipengele kilichobainishwa.

    var syntax insertedElement = parentElement.ingizaKabla( newElement, ReferenceElement);

    Katika Firefox ya Mozilla, ikiwa referenceElement haijawekwa au ni null , newElement imeingizwa mwishoni mwa orodha ya vipengele vya watoto. Katika IE, ReferenceElement sawa na undefined itatupa ubaguzi wa "Hoja Batili", wakati Chrome itatupa "Uncaught TypeError" isipokuwa ikitarajia hoja 2.

    • insertedElement Kipengele kilichoingizwa.
    • parentElement Mzazi wa kipengele kipya.
    • newElement Kipengele cha kuingiza.
    • ReferenceElement Kipengele ambacho newElement kitawekwa kabla yake.
    Mfano foo bar // Unda mpya var sp1 = document.createElement("span"); // Pata kiungo cha kipengele ambacho tunataka kuingiza sp1 var sp2 = document.getElementById("childElement"); //Pata kiunga cha mzazi sp2 var parentDiv = sp2.parentNode; // Ingiza sp1 kabla ya sp2 parentDiv.insertBefore(sp1, sp2);

    Walakini, hakuna njia ya kuingizaAfter. Inaweza kubadilishwa kwa kutumia njia ya insertBefore kwa kushirikiana na nextSibling.

    Katika mfano uliopita, sp1 inaweza kuingizwa baada ya sp2 kama hii:

    ParentDiv.insertBefore(sp1, sp2.nextSibling);

    Ikiwa sp2 haina kipengele kinachofuata, basi itakuwa mtoto wa mwisho, sp2.nextSibling itarudi null , na sp1 itaingizwa mwishoni mwa nodi ya mtoto (mara baada ya sp2 ).

    Mfano 2

    Kuingiza kipengele kabla ya mtoto wa kwanza kutumia firstChild .

    // Pata kiungo kwa kipengele ambacho tunataka kuongeza kipengele kipya var parentElement = document.getElementById("parentElement"); // Pata marejeleo ya kipengele cha mtoto wa kwanza var theFirstChild = parentElement.firstChild; // Unda kipengele kipya ambacho tutaongeza var newElement = document.createElement("div"); // Weka kipengele kipya kabla ya mtoto wa kwanza parentElement.insertBefore(newElement, theFirstChild);

    Wakati mzazi hana mtoto wa kwanza, Mtoto wa kwanza atarudi null . Kipengele kipya bado kitawekwa baada ya kipengele cha mwisho cha mtoto. Lakini kwa kuwa mzazi hana mtoto wa kwanza, hatapata wa mwisho. Kwa hiyo, baada ya kuongeza kipengele ndani yake, kipengele hicho kitakuwa kipengele cha mtoto pekee.

    Utangamano wa kivinjari Angazia Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Msaada wa kimsingi 1.0 (Ndiyo) (Ndiyo) (Ndiyo) (Ndiyo)