Javascript pridedant dom elementą. JavaScript: DOM fragmentų kūrimas. Mazgų pridėjimas prie medžio

Tai yra ketvirtoji pranešimų dalis, skirta vietiniams jQuery metodų atitikmenims. Galbūt norėsite tai perskaityti prieš tęsdami.

Šiame straipsnyje apžvelgsime būdus, kaip sukurti, įterpti, perkelti ir ištrinti elementus. Ir nors „jQuery“ jau yra daug naudingų metodų, nustebsite sužinoję, kad visa tai galima lengvai padaryti naudojant vietinius metodus.

Manipuliacijos su HTML elementų kodu

jQuery
// gauti var html = $(elem).html(); // nustatyti $(elem).html("
Naujas html
");
Gimtoji JS
// gauti var html = elem.innerHTML; // nustatyti elem.innerHTML = "
Naujas html
";

Elementų teksto manipuliavimas

jQuery
// gauti var text = $(elem).text(); // nustatyti $(elem).text("Naujas tekstas");
Gimtoji JS
// gauti var text = elem.textContent; // nustatyti elem.textContent = "Naujas tekstas";

Elemento kūrimas

jQuery
$("
");
Gimtoji JS
document.createElement("div");

Prideda turinį prie elementų pabaigos

jQuery
$(parentNode).append(newNode);
Gimtoji JS
parentNode.appendChild(newNode);

Prideda turinį prie elementų pradžios

jQuery
$(referenceNode).prepend(newNode);
Gimtoji JS
nuorodaNode.insertBefore(newNode, referenceNode.firstElementChild); // arba nuorodaNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+

Įterpti tiesiai prieš elementą

jQuery
$(referenceNode).before(newNode);
Gimtoji JS
referenceNode.parentNode.insertBefore(newNode, referenceNode); // arba nuorodaNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+

Įterpti iškart po elemento

jQuery
$(referenceNode).after(newNode);
Gimtoji JS
nuorodaNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // arba nuorodaNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Pastaba: „beforebegin“ ir „afterend“ veiks tik tuo atveju, jei nuorodaNode yra DOM medyje ir turi pirminį elementą.

Pažvelkite į šiuos dalykus:

ReferenceNode.insertAdjacentElement(pozicija, mazgas);

Metodui insertAdjacentElement reikalingi du parametrai:

  • pozicija – padėtis atskaitos mazgo atžvilgiu, turi būti viena iš šių:
    • „beforebegin“ – prieš patį elementą.
    • „afterbegin“ – elemento viduje, prieš pirmąjį vaiką.
    • „prieš“ – elemento viduje, po paskutinio vaiko.
    • „afterend“ – po paties elemento.
  • mazgas – mazgas, kurį reikia įterpti
Teksto turinys

Kažkoks tekstas
Kažkoks tekstas
var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("prieš", elem2); // rezultatas
Kažkoks tekstas
Kažkoks tekstas

Metodas insertAdjacentElement yra švaresnis ir intuityvesnis nei metodas insertBefore, tačiau pastarasis geriau palaikomas senesnėse naršyklėse.

Elementų pridėjimas kelis kartus

Taip pat verta paminėti, kad pridėjus elementą prie mazgo, esančio DOM medyje, bus perbraižyta. Tai nėra labai gerai, nes naršyklė turi perskaičiuoti naujo elemento dydį ir vietą, o tai taip pat lems elemento palikuonių, protėvių ir elementų, kurie atsiranda po jo DOM, pakeitimus. Jei prie DOM pridedate daug elementų, tai gali užtrukti.

Norėdami to išvengti, galite pridėti jį naudodami DocumentFragment. Dokumento fragmentas yra dokumento objektas, kuris egzistuoja tik atmintyje, todėl jo pridėjimas nesukels jokio pertvarkymo.

Tarkime, kad turime pridėti 100 li elementų prie ul elemento, esančio DOM medyje:

// Gaukite elementą, kuriame bus mūsų elementai var ul = document.querySelector("ul"); // sudaryti 100 sąrašo elementų (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

Aukščiau pateiktame pavyzdyje li elementai pridedami tiesiai prie elemento ul, kuris yra DOM medyje, todėl kiekvienoje iteracijoje bus perbraižyta – tai yra 100 pakeitimų!

Raskime geresnį būdą.

// Gaukite elementą, kuriame bus mūsų elementai var ul = document.querySelector("ul"); // sukurti dokumento fragmentą, kad pridėtumėte sąrašo elementus prie var docFrag = document.createDocumentFragment(); // sudaryti 100 sąrašo elementų (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

Tame pačiame pavyzdyje li elementai pridedami prie dokumento fragmento atmintyje, kad perkėlimas suaktyvėtų, kai fragmentas bus pridėtas prie ul elemento. Šis metodas sumažins perpiešimų skaičių nuo 100 iki 1.

Elemento pašalinimas

jQuery
$(referenceNode).remove();
Gimtoji JS
nuorodaMazgas.parentNode.removeChild(referenceNode); // arba nuorodaNode.remove(); // FF 23.0+, 23.0+, Edge (nepalaikoma IE)

Šiame įraše noriu jums pasakyti, kaip pridėti arba pašalinti elementą iš objekto „JavaScript“. Tai labai paprasta, bet daugelis pradedančiųjų, kaip ir aš anksčiau, dažnai dėl to susipainioja.

Sukurkime pavyzdinį objektą

var obj = ( vardas: "alex", pavardė: "petrov", svetainė: "svetainė", );

Turime paprastą objektą, kuriame yra tokie duomenys kaip vardas, pavardė ir svetainė. Duomenys gali būti visiškai bet kokie, tačiau šio įrašo tikslais jie bus būtent tokie.

Naujo elemento pridėjimas

obj.country = "ru"; // prie objekto pridės naują raktą "country" su reikšme "ru" obj["city"] = "Maskva"; // taip pat pridės naują raktą, tik "miestas" su reikšme "Maskva"

Aukščiau pateiktas kodas yra aiškus, bet tik dėl paaiškinimo: objekto sintaksėje galite pridėti naujų reikšmių naudodami "." ir raktas arba įprastas masyvo formatas. Jei paskelbiate jį kaip masyvą, tada obj vis tiek yra objektas, nes anksčiau jį taip nurodėte dėka () .

Sukurkite objektą objekto viduje

obj.other_obj = (); // sukurkite naują reikšmę other_obj objekte obj ir paverskite ją objektu

Dabar pridėkime keletą duomenų:

Obj.other_obj.first = "pirmasis naujojo objekto raktas"; obj.other_obj.second = "antra";

Sukūrėme dvi naujas vertes, pirmąją ir antrąją, viduje other_obj.

Elemento pašalinimas

deleteobj.name; // grąžina: tiesa

Galite naudoti trynimą , kuris gali pašalinti elementus iš objektų. Negalite ištrinti viso objekto tokiu būdu, bet jei reikia, galite tai padaryti:

Obj = (); // Objektas vėl tuščias

Tai viskas, jei vis dar turite klausimų apie JavaScript objektus, parašykite komentarą žemiau, aš pasistengsiu jums padėti.

Jei kada nors rašėte „JavaScript“ ir turėjote parašyti kažką panašaus:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Tikra žuvis."));
var div = document.createElement("div");
div.setAttribute("id", "new");
div.appendChild(p);

tada tai gali būti jums naudinga.

Problema: kai sukuriate daugiau nei vieną elementą, įdėtą vienas į kitą, kodas tampa labai sudėtingas.

Siūlau paprastą įrankį problemos sprendimui – sukurti() funkciją (šaltinis kodas žemiau). Pavyzdžiui, sukurkime teksto pastraipą:
var el = sukurti("p", ( ), "Atsisveikink, meile!");

Arba div su pastraipa ir nuoroda joje:
var div = create("div", ( id: "new", style: "background:#fff" ),
sukurti ("p", ( lygiuoti: "centras"),
"įvadas: ",
sukurti ("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg"),
"nuotrauka"),
": galas")
);

Arba čia sudarome lentelę:
var holder = document.getElementById("holder2");
var lentelė;
var td;
holder.appendChild(
lentelė =
sukurti ("lentelė", (id: "bjaurus", stulpeliai: 3),
sukurti ("kūnas", (),
sukurti ("tr", (),
sukurti("td", ( plotis: "10%"),
"Sveiki"),
td =
sukurti ("td", ( stilius: "fonas: #fcc"),
"ten")
sukurti ("td", ( klasė: "special2"), "visur")
)
);

Pastaba:

1. IE reikalauja tbody elemento, kitaip atsisako rodyti lentelę.
2. Klasės atributas prieštarauja kažkam, todėl turite jį parašyti kaip Klasė. Atrodo, kad tai neturi jokios įtakos rezultatui.
3. lentelė = ir tr = pavyzdyje leidžia išsaugoti sukurtus įdėtus objektus tolimesniam darbui su jais.
4. Šis kodas veikia IE, Mozilla ir Opera.

Pati funkcija

funkcija sukurti(vardas, atributai) (
var el = document.createElement(name);
if (atributų tipas == "objektas") (
for (var i atributuose) (
el.setAttribute(i, atributai[i]);

If (i.toLowerCase() == "klasė") (
el.className = atributai[i]; // IE suderinamumui

) else if (i.toLowerCase() == "stilius") (
el.style.cssText = atributai[i]; // IE suderinamumui
}
}
}
for (var i = 2;i< arguments.length; i++) {
var val = argumentai[i];
if (typeof val == "eilutė") ( val = document.createTextNode(val) );
el.appendChild(val);
}
grįžti el;
}


Už idėją turėtume padėkoti Ivanui Kurmanovui,
Originalus straipsnis su darbo pavyzdžiais:

Šioje pamokoje išmoksime sukurti elementų mazgus (createElement) ir teksto mazgus (createTextNode). Taip pat apsvarstysime metodus, skirtus mazgų įtraukimui į medį (pridėtiChild, insertBefore) ir mazgų pašalinimui iš medžio (removeChild).

Mazgų pridėjimas prie medžio

Naujo mazgo įtraukimas į medį paprastai atliekamas 2 etapais:

  1. Sukurkite reikiamą mazgą vienu iš šių būdų:
  • CreateElement() – sukuria elementą (mazgą) nurodytu pavadinimu (žyma). Metodas createElement(element) turi vieną privalomą parametrą (elementą) – tai eilutė, kurioje yra kuriamo elemento (žymos) pavadinimas. Elemento (žymos) pavadinimas parametre turi būti didžiosiomis raidėmis. Dėl to šis metodas grąžina elementą, kuris buvo sukurtas.
  • CreateTextNode() – sukuria teksto mazgą su nurodytu tekstu. Metodas createTextNode(text) turi vieną privalomą parametrą (tekstą) – tai eilutė, kurioje yra teksto mazgo tekstas. Dėl to šis metodas grąžina sukurtą teksto mazgą.
  • Nurodykite vietą medyje, kur reikia įterpti mazgą. Norėdami tai padaryti, turite naudoti vieną iš šių būdų:
    • appendChild() – prideda mazgą kaip paskutinį elemento, kuriam iškviečiamas šis metodas, atžalą. Metodas appendChild(node) turi vieną būtiną parametrą: mazgą, kurį norite pridėti. Dėl to šis metodas grąžina pridėtą mazgą.
    • insertBefore() – įterpia mazgą kaip antrinį elemento mazgą, kuriam iškviečiamas šis metodas. Metodas insertBefore(newNode,existingNode) turi du parametrus: newNode (būtina) yra mazgas, kurį norite pridėti, esamasNode (neprivaloma) yra antrinis elemento mazgas, prieš kurį norite įterpti mazgą. Jei antrasis parametras (existingNode) nenurodytas, tai šis metodas jį įterps pabaigoje, t.y. kaip paskutinis antrinis elemento mazgas, kuriam iškviečiamas šis metodas. Metodas insertBefore() grąžina įterptą mazgą kaip rezultatą.

    Pavyzdžiui:

    • Kompiuteris
    • Nešiojamas kompiuteris
    • Tablėtė

    Panagrinėkime sudėtingesnį pavyzdį, kuriame prie medžio pridedame LI mazgą, kuriame yra tekstinis mazgas su tekstu „Išmanusis telefonas“ ul sąrašo pabaigoje.

    Norėdami tai padaryti, turite atlikti šiuos veiksmus:

    1. Sukurkite elementą (mazgą) LI.
    2. Sukurkite teksto mazgą su tekstu „Išmanusis telefonas“.
    3. Pridėkite sukurtą teksto mazgą kaip paskutinį naujai sukurto LI elemento antrinį mazgą
    4. Pridėkite naujai sukurtą LI mazgą kaip paskutinį antrinį ul elemento mazgą
    //sukurti elementą (mazgą) li var elementLI = document.createElement("li"); //sukurti tekstinį mazgą su tekstu "Išmanusis telefonas" var textSmart= document.createTextNode("Išmanusis telefonas"); //pridėti sukurtą teksto mazgą kaip paskutinį antrinį elementą prie naujai sukurto LI elemento elementLI.appendChild(textSmart); //gauti elementą, prie kurio bus pridėtas sukurtas li mazgas kaip antrinis var elementUL = document.getElementById("sąrašas"); //pridėkite sukurtą elementą li kaip paskutinį antrinį elementą į UL su id="list" elementUL.appendChild(elementLI);

    AppendChild() ir insertBefore() metodai dirbant su esamais mazgais

    Darbas su esamais mazgais naudojant appendChild() ir insertBefore() metodus taip pat atliekamas 2 etapais:

    1. Gaukite esamą mazgą medyje.
    2. Nurodykite vietą, kur mazgas turi būti įterptas, naudodami metodą appendChild() arba insertBefore(). Tai pašalins mazgą iš ankstesnės vietos.

    Pavyzdžiui, sąrašo pradžioje pridėkite esamą li elementą, kuriame yra tekstas „Tabletė“ (jis pašalins jį iš ankstesnės vietos):

    //gauti UL elementą su sąrašu pagal jo ID var elementUL = document.getElementById("sąrašas"); //gauti elementą li, kuriame yra teksto mazgas "Tabletė" var elementLI = elementUL.childNodes; //įtraukti elementą į sąrašo pradžią //šiuo atveju jis bus pašalintas iš pradinės vietos elementUL.insertBefore(elementLI,elementUL.firstChild);

    Pratimas

    • Dokumente yra du sąrašai. Turite perkelti elementus iš antrojo sąrašo į pirmąjį.
    • Sukurkite sąrašą, teksto lauką ir 2 mygtukus. Parašykite kodą JavaScript, kuris, priklausomai nuo paspausto mygtuko, įtrauks teksto lauke esantį tekstą į sąrašo pradžią arba pabaigą.

    Mazgų pašalinimas

    Mazgo pašalinimas iš medžio atliekamas 2 etapais:

    1. Gaukite (raskite) šį mazgą medyje. Šis veiksmas paprastai atliekamas vienu iš šių metodų: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() arba querySelectorAll() .
    2. Iškvieskite metodą removeChild() pirminiame mazge, kuris kaip parametras turi būti perduodamas mazgui, kurį norime iš jo pašalinti.
      Metodas removeChild() grąžina pašalintą mazgą kaip jo vertę arba nulį, jei mazgo, kurį norėjome pašalinti, nebuvo.

    //rasti mazgą, kurį norime ištrinti var findElement = document.getElementById("notebook"); //iškvieskite metodą removeChild pirminiame mazge //ir perduokite jam rastą mazgą kaip parametrą findElement.parentNode.removeChild(findElement);

    Pavyzdžiui, pašalinkite paskutinį antrinį elemento elementą, kuris turi id="myID" :

    //gauti elementą, kuris turi id="manoID" var myID = document.getElementById("mano ID"); //gauti paskutinį antrinį elemento mazgą myID var lastNode = myID.lastChild; //nes mes nežinome, ar elemento paskutinis antrinis mazgas yra elementas, //tada naudosime ciklą, kad surastume paskutinį elemento antrinį myID //kol elementas turi mazgą ir jo tipas nėra 1 (t. y. tai ne elementas) vykdyti while (lastNode && lastNode.nodeType!=1) ( //eikite į ankstesnį mazgą lastNode = lastNode.previousSibling; ) //jei radome elementą myID mazge if (lastNode) ( //tada jis turi būti pašalintas lastNode.parentNode.removeChild( lastNode); )

    Pavyzdžiui, pašalinkite visus antrinius elemento mazgus, kuriuose yra id="myQuestion" :

    //gauti elementą, iš kurio norime pašalinti visus antrinius mazgus var elementQuestion = document.getElementById("myQuestion"); //while yra pirmasis elementas while (elementQuestion.firstElement) ( //remove it elementQuestion.removeChild(element.firstChild); )

    Pratimas

    1. Parašykite funkciją, kuri pašalina visus teksto mazgus iš elemento.
    2. Yra 2 sąrašai (), parašykite JavaScript kodą, kuris pašalina visus elementus iš 1 ir 2 sąrašų.

    • Jei jums reikia sukurti HTML elementą ir nežinote, kaip jį įgyvendinti, tada atėjote į reikiamą vietą. Šiame straipsnyje apžvelgsime ne tik elemento kūrimo pavyzdį, bet ir parašysime universalią funkciją, su kuria galėsite sukurti naują elementą, pridėti prie jo įvairių atributų ir užpildyti tekstu.

    Bet pirmiausia pradėkime nuo kažko paprasto. Kurdami naują elementą naudosime DOM objekto metodus, būtent:

    * document.createElement(param) – šis metodas naudojamas tiesiogiai elementui sukurti. Kaip parametrą jis paima kuriamo elemento pavadinimą. Grąžina nuorodą į sukurtą elementą.

    document.createElement('div'); // sukurs div elementą.

    * document.appendChild(param) – šis metodas naudojamas elementui pridėti prie HTML kodo. Paima nuorodą į sukurtą elementą kaip parametrą;

    var parent = document.getElementsByTagName("BODY"); //gauti nuorodą į kūno elementą

    var elem = document.createElement(‘div’);// sukurs div elementą

    parent.appendChild(elem); // prideda elementą, kur tėvas yra nuoroda, į kurią bus įtrauktas mūsų elementas, šiuo atveju tai yra kūno turinys;

    * document.createTextNode() – metodas naudojamas tekstui įdėti į elementą.

    Elemento kūrimo pavyzdys.

    funkcija createElem() (

    Var newP = document.createElement("p");

    NewP.className = "elemClass";

    NewP.id = "manoPId";

    NewP.style.width = "100 pikselių";

    NewP.style.height = "300 pikselių";

    NewP.style.background = "#c5c5c5";

    NewP.style.color = "#000";

    Var text = "tekstas įterpti";

    Var textNode = document.createTextMazgas(tekstas);

    NewP.appendChild(textNode);

    Parent.appendChild(newP);

    Funkcijoje createElem pirminis kintamasis yra nuoroda į elementą (kūną), kuriame bus įdėtas naujas elementas. Tada sukuriamas naujas elementas P, prie jo pridedami atributai id, klasė, stilius ir nustatomos šių atributų reikšmės. Tada sukuriamas teksto mazgas ir pridedamas prie mūsų naujo elemento. Po viso to pats elementas pridedamas prie kūno kūno. Norėdami sukurti daugybę naujų elementų, turėsite sunkiai dirbti, nes... gali tekti juos patalpinti skirtingose ​​tinklalapio vietose, pvz. pritvirtinti prie skirtingų elementų.

    Elemento kūrimo naudojant universalią funkciją pavyzdys.

    Ši funkcija padės sukurti naują elementą, pridėti prie jo įvairių atributų, pridėti prie jo tekstinį mazgą, įdėti jį prieš ar po nurodyto elemento arba pakeisti elementą naujai sukurtu elementu. Būtinas tik pavadinimo argumentas.

    funkcija createElement(vardas, atributai, stilius, tekstas, past_id, padėtis, pakeista) (

    Var parent = document.getElementsByTagName("BODY");

    Var e = document.createElement(name);

    Jei (attrs) (

    Skirta (įvesti atr.) (

    Jei (raktas == "klasė") (

    E.className = attrs;

    ) else if (raktas == "id") (

    E.id = attrs;

    ) Kitas (

    E.setAttribute(raktas, atributai);

    Jei (stilius) (

    Už (įveskite stilių) (

    E.stilius = stilius;

    Jei (tekstas) (

    E.appendChild(document.createTextNode(text));

    Parent.appendChild(e);

    If(past_id)(

    Var senas_elementas = document.getElementById(past_id);

    Jei(pozicija=="prieš")(

    Parent.insertBefore(e,old_elem)

    )else if(pozicija=="po")(

    InsertAfter(parent,e,old_elem);

    Jei(pakeista!="" && pakeista==tiesa)(

    Parent.removeChild(old_elem);

    Galimybės:

    Name – elemento pavadinimas;

    Attrs – sukurto elemento atributai;

    Style – kuriamo elemento stiliai;

    Text – įterptas tekstas;

    Past_id – elemento, šalia kurio bus mūsų elementas, ID;

    Padėtis - gali būti dvi reikšmės prieš, po;

    Pakeista – vėliavėlė, kuri turi dvi reikšmes: true arba false. Jei šis parametras nustatytas į true, senas elementas bus pakeistas nauju;

    Pavyzdžiui, sukurkime DIV elementą su atributais, o seną elementą pakeiskime naujai sukurtu.

    createElement("div",

    ("klasė": "myDivCSSClass", "id": "myDivId","lyginti":"centras"),

    ("width": "200px", "height": "250px", "background": "#3B9D00", "color": "#fff"),

    "čia mano tekstas"

    "testas",

    "prieš"

    Taip pat skaitykite tema:

    1. Testas "Internetas"
    2. Kaip kartu žaisti „Minecraft“ vietiniame tinkle arba internete
    3. Kaip žaisti su draugu vieno žaidėjo „Minecraft“?
    4. Superhero mod Mod, skirtas super piktadarių kostiumams minecraft 1710