HTML DOM módszerek

Programozás

querySelector ()

A Document módszer a dokumentumban azt querySelector()az firstelemet 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 innerHTMLjavaslat 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 innerHTMLmegbí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!), getElementByIdAkkor 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.getElementByIdjQuery 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ő:

DOM tree

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