Já pensou que legal seria, se pudessemos criar nossas próprias tags html?
Pois é, dependendo do navegador, dá para fazer isso sim!
"Como?", você deve se perguntar.
Eu respondo: "Simples, seguinte o passo a passo a seguir!"
1) Em seu html, vamos criar uma tag chamada helloWorld, que exibe o texto "Hello World!" em azul na página:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<helloWorld>
</helloWorld>
</body>
</html>
Se você tentar executar a página no navegador agora, nada aparece...
2) Para que o texto seja exibido, vamos criar uma função que execute durante o "onload" ou no final do HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<helloWorld>
</helloWorld>
</body>
<script>
var customizeTags = function () {
}
customizeTags();
</script>
</html>
3) Agora, vamos obter todos os elementos "helloWorld" da página na função, utilizando o método "getElementsByTagName" do objeto "document":
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<helloWorld>
</helloWorld>
</body>
<script>
var customizeTags = function () {
var elements = document.getElementsByTagName('helloWorld');
elements = null;
}
customizeTags();
</script>
</html>
4) Feito isso, para cada elemento obtido, vamos trocá-lo por um novo elemento do tipo "span" com o texto "Hello World!" em azul:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<helloWorld>
</helloWorld>
</body>
<script>
var customizeTags = function () {
var elements = document.getElementsByTagName('helloWorld');
while (elements.length > 0) {
//Obtenho um elemento "helloWorld"
var oldElement = elements[0];
//Obtenho o nó pai (nó de cima)
var parentNode = oldElement.parentNode;
//Crio um novo elemento "span"
var newElement = document.createElement('span');
//Coloco o texto e a característica dele (cor azul)
newElement.innerHTML = 'Hello World!';
newElement.style.color = 'blue';
//Troco o nó "helloWorld" pelo "span"
parentNode.replaceChild(newElement, oldElement);
//"Limpo memória"
newElement = null;
parentNode = null;
oldElement = null;
}
elements = null;
}
customizeTags();
</script>
</html>
Legal, não? :)
Obs.: Não sei se funciona para todo tipo de browser, mas eu testei no
Google Chrome e no
Safari ("tava funfando"). :)
Até mais!
