querySelector ()
A Document módszer a dokumentumban azt querySelector()
az first
elemet adja vissza, amely megegyezik a megadott választóval vagy kiválasztók csoportjával. Ha nem található egyezés, akkor a null értéket adja vissza.
HTML tartalom:
element-example
JavaScript tartalom:
document.querySelector("#id-example"); // Returns the element with id "id-example" document.querySelector(".class-example"); // Returns the element with class "class-example" document.querySelector("a"); // Returns the "a" element
A Note querySelector()
megadja az első egyező elemet. Az összes egyezés visszaadásához használja a querySelectorAll () metódust.
First Second
document.querySelector("#example"); // Returns only the element containing 'First'
belsőHTML
A innerHTML
javaslat visszaadja a HTML-tartalmat egy kiválasztott elem belsejében, és új HTML-tartalmat is megadhat.
Szerezzen elemtartalmat
Demo
var element = document.getElementById("demo"); console.log(element.innerHTML) //logs Demo
Állítsa be az elem tartalmát
var element = document.getElementById("demo"); element.innerHTML = " Demo ";
A HTML most olyan lesz, mint
Demo
Biztonsági szempontok
A beállított értéknek innerHTML
megbízható forrásokból kell származnia, mivel a Javascript bármit betesz az elembe, és egyszerű HTML-ként fog futtatni.
Példa:
A „ alert();
” érték beállítása a Javascript „alert ()” funkciójának bekapcsolását eredményezi:
var element = document.getElementById("demo"); element.innerHTML = "alert();";
Az ilyen típusú támadásokat Cross Site Scriptingnek, vagy röviden XSS-nek hívják.
Ez az egyik leggyakoribb módszer az XSS támadás elkövetésére. Ha szeretne még egy kicsit többet megtudni, és megtanulna védekezni ellene, nézze meg ezt az erőforrást.
getElementById ()
A getElementById()
metódus visszaadja azt az elemet, amelynek az id attribútuma van a megadott értékkel. Egy argumentumra van szükség, amely a kívánt elem id-jének kis- és nagybetűkből álló karakterlánca.
Ez a módszer az egyik legelterjedtebb módszer a HTML DOM-ban, és szinte minden alkalommal használatos, amikor a dokumentum egyik elemével manipulálni szeretne, vagy erről információkat szeretne kapni. Íme egy egyszerű példa a szintaxisra:
HTML tartalom:
JavaScript tartalom:
document.getElementById("demo"); // Returns the element with id "demo"
Ha több eleme van ugyanazzal az értékkel id
(rossz gyakorlat!), getElementById
Akkor az első megtalált elemet adja vissza:
First Second
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'
Több információ:
document.getElementById ()
Alternatív megoldások:
A document.getElementById
jQuery választó használatának általában használt alternatívája, amelyről itt olvashat bővebben.
További információ a HTML DOM-ról
A HTML DOM segítségével a JavaScript hozzáférhet és megváltoztathatja a HTML dokumentum összes elemét.
Amikor egy weblap betöltődik, a böngésző létrehoz egy D okument O objektum M odelt .
A HTML DOM modell az Objektumok fájaként van felépítve:
A DOM minden elemét csomópontnak is nevezzük.
My title My Link My header
A fenti HTML DOM a következő:

Az objektum modellel a JavaScript megkapja a dinamikus HTML létrehozásához szükséges összes erőt:
- JavaScript can change all the HTML elements in the page
- JavaScript can change all the HTML attributes in the page
- JavaScript can change all the CSS styles in the page
- JavaScript can remove existing HTML elements and attributes
- JavaScript can add new HTML elements and attributes
- JavaScript can react to all existing HTML events in the page
- JavaScript can create new HTML events in the page