×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Technologický web Mateja Lednára
Spoznávajte svet technológií

Ako na dokumenty HTML5 a metódu getElementById() v PHP

PHP v súčasnosti pri nahratí fragmentov HTML5 prostredníctvom triedy DOMDocument zobrazuje chybové hlásenia, ktoré je možné vypnúť napríklad cez displayError. Vypnutím displayError ale programátor stráca kontrolu nad zvyškom kódu. Ďalšou možnosťou je nahratie dokumentu HTML ako XML. Žiaľ v tomto prípade nie je funkčná metóda getElementById(). Z tohto dôvodu som vytvoril malú knižnicu pre manipuláciu s HTML5, ktorá podporuje získavanie elementov aj na základe atribútu id.
Knižnica je trieda s názvom HTML5, ktorá je umiestnená v súbore s názvom HTML5.php. Obsahuje päť metód, ktoré je možné v prípade potreby rozšíriť o ďalšie užitočné metódy pre manipuláciu s HTML5.

Metóda loadHTML()

Ako prvú metódu vytvoríme funkciu pre nahrávanie dokumentov HTML5. Nahraný dokument bude uložený v privátnej vlastnosti s názvom doc. Jej definícia je uvedená na začiatku triedy HTML5. Celá trieda bude uvedená neskôr. Pre nahratie dokumentu je použitá metóda load(). Dokument HTML je nahrávaný ako dokument XML.
Príklad: Metóda loadHTML().
1
2
3
4
5
public function loadHTML($file) {
$doc = new DOMDocument();
$doc->load($file);
$this->doc = $doc;
}

Metóda getId()

Druhá metóda, ktorá tvorí jadro knižnice, vráti element na základe atribútu id. Ide teda o alternatívu metódy getElementById(). Metóda prechádza všetky elementy dokumentu a zároveň zisťuje prítomnosť atribútu id. Ak atribút id existuje, získa jeho hodnotu a porovná s požadovanou hodnotou. Ak sa hodnoty rovnajú, metóda sa ukončí a vráti uzol. Atribút id sa môže v dokumente HTML vyskytovať iba raz, preto je pri prvej zhode cyklus foreach a metóda ukončené.
Príklad: Metóda getId().
1
2
3
4
5
6
7
8
9
10
11
12
13
public function getId($id) {
$doc = $this->doc;
$nodes = $doc->getElementsByTagName("*");
foreach ($nodes as $node) {
$id_value = $node->getAttribute("id");
if ($id_value == $id) {
return $node;
}
}
}

Metóda getElement()

Tretia metóda vyhľadáva v dokumente na základe elementu a prípadne aj indexu. Ak používateľ zadá iba názov elementu, vrátia sa mu všetky výskyty daného elementu. Ak zadá aj index ako druhý argument metódy, vráti sa mu iba daný element (uzol).
Príklad: Metóda getElement().
1
2
3
4
5
6
public function getElement($element, $index = false) {
$doc = $this->doc;
$nodes = $doc->getElementsByTagName($element);
return $index ? $nodes->item($index) : $nodes;
}

Metóda showNode()

Predposledná metóda zobrazí definovaný fragment v internetovom prehliadači. Ide o alternatívu vlastnosti innerHTML.
Príklad: Metóda showNode().
1
2
3
public function showNode($node) {
echo $this->doc->saveXML($node);
}

Metóda returnNode()

Poslednou metódou je funkcia, ktorá vráti obsah definovaného uzla ako reťazec. Používateľ môže tento reťazec uložiť do súboru alebo databázy, prípadne ďalej spracovať.
Príklad: Metóda returnNode().
1
2
3
public function returnNode($node) {
return $this->doc->saveXML($node);
}

Trieda HTML5

Tak a teraz to dáme všetko dohromady. Nasledujúci programový kód je potrebné uložiť do súboru s názvom HTML5.php. Názov súboru by mal byť dodržaný, najmä ak sa používa základná forma funkcie __autoload(). Samozrejme je možné súbor nazvať ľubovoľne rovnako ako je možné vo funkcii __autoload() zmeniť veľkosť písmen nahrávaných súborov. Pre naše účely je možné súbor nazvať ľubovoľne s tým, že je následne potrebné v príkladoch upraviť hodnotu v príkaze include.
Príklad: Trieda HTML5.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?
/*
* HTML5 Small Library
* Author: Matej Lednár
* (c) 2013
*/
class HTML5 {
// saves HTML5 document
private $doc = null;
// loads HTML5 file
public function loadHTML($file) {
$doc = new DOMDocument();
$doc->load($file);
$this->doc = $doc;
}
// returns element by ID
public function getId($id) {
$doc = $this->doc;
$nodes = $doc->getElementsByTagName("*");
foreach ($nodes as $node) {
$id_value = $node->getAttribute("id");
if ($id_value == $id) {
return $node;
}
}
}
// returns all defined elements or element defined by its position
public function getElement($element, $index = false) {
$doc = $this->doc;
$nodes = $doc->getElementsByTagName($element);
return $index ? $nodes->item($index) : $nodes;
}
// displays node in browser
public function showNode($node) {
echo $this->doc->saveXML($node);
}
// returns HTML source
public function returnNode($node) {
return $this->doc->saveXML($node);
}
}
?>

Použitie triedy HTML5

Ako prvé vytvoríme súbor s názvom html5-demo-1.html. Názov súboru môže byť ľubovoľný, ale je ho potrebné zmeniť vo volaní metódy loadHTML().
Príklad: Súbor s fragmentom HTML5.
1
2
3
4
5
6
7
8
9
<section>
<article id="article1">Demo 1 <b>Demo 1</b> Demo 1</article>
<article id="article2">Demo 2 <b>Demo 2</b> Demo 2</article>
<article id="article3">Demo 3 <b>Demo 3</b> Demo 3</article>
<article id="article4">Demo 4 <b>Demo 4</b> Demo 4</article>
<article id="article5">Demo 5 <b>Demo 5</b> Demo 5</article>
<article id="article6">Demo 6 <b>Demo 6</b> Demo 6</article>
<article>Demo 7 <b>Demo 7</b> Demo 7</article>
</section>
Prvým príkladom zobrazíme obsah elementu s atribútom id a hodnotou article2. V príkladoch je použitá vlastnosť textContent. Ide o alternatívu vlastnosti innerText, ktorá zobrazuje iba textové uzly (odstraňuje značky vnorených elementov). Prvé dva príklady používajú metódu getId(). Ostatné príklady používajú metódu getElement(). Na príkladoch sú demonštrované všetky vytvorené metódy.
Príklad: Zobrazenie textových uzlov v elemente s id.
1
2
3
4
5
6
7
8
include 'HTML5.php';
$doc = new HTML5();
$doc -> loadHTML("html5-demo-1.html");
$node = $doc -> getId("article2");
echo $node -> textContent;
Príklad: Zobrazenie elementu s id v prehliadači.
1
2
3
4
5
6
7
8
include 'HTML5.php';
$doc = new HTML5();
$doc -> loadHTML("html5-demo-1.html");
$node = $doc -> getId("article2");
echo $doc -> showNode($node);
Príklad: Zobrazenie textových uzlov tretieho elementu.
1
2
3
4
5
$doc = new HTML5();
$doc -> loadHTML("html5-demo-1.html");
$node = $doc -> getElement("article");
echo $node -> item(2) -> textContent;
Príklad: Zobrazenie tretieho elementu.
1
2
3
4
5
6
7
include 'HTML5.php';
$doc = new HTML5();
$doc -> loadHTML("html5-demo-1.html");
$node = $doc -> getElement("article");
$doc -> showNode($node -> item(2));
Príklad: Zobrazenie textových uzlov piateho elementu.
1
2
3
4
5
$doc = new HTML5();
$doc -> loadHTML("html5-demo-1.html");
$node = $doc -> getElement("article", 4);
echo $node -> textContent;
Príklad: Zobrazenie piateho elementu.
1
2
3
4
5
6
7
include 'HTML5.php';
$doc = new HTML5();
$doc -> loadHTML("html5-demo-1.html");
$node = $doc -> getElement("article", 4);
$doc -> showNode($node);
Príklad: Zobrazenie obsahu piateho elementu v prehliadači.
1
2
3
4
5
6
7
8
9
10
include 'HTML5.php';
$doc = new HTML5();
$doc -> loadHTML("html5-demo-1.html");
$node = $doc -> getElement("article", 4);
$result = $doc -> returnNode($node);
$result = preg_replace("/</", "&amp;amp;amp;lt;", $result);
echo $result;
V súčasnosti síce nie je jazyk HTML5 v PHP ešte dostatočne podporovaný, ale verím, že s príchodom nových verzií bude tento problém čoskoro odstránený.

Záver

Cieľom tejto malej knižnice bolo demonštrovať jednu z možností prístupu k elementom jazyka HTML5 prostredníctvom atribútu id. Ak máte návrhy na zlepšenie či rozšírenie knižnice alebo príkladov, podeľte sa o ne prostredníctvom komentára.
Autor: Matej Lednár
Dátum: 13.2.2013
Kategória: PHP
Značky: xml, programovanie, php, html, dom, library, knižnica, getelementbyid, foreach, innerhtml, innertext
PHP,XML,programovanie,PHP,HTML,DOM,library,knižnica,getElementById,foreach,innerHTML,innerText
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších