Skip to content

Instantly share code, notes, and snippets.

@rpragana

rpragana/Seletores_DOM_em_javascript_plano.md

Created May 30, 2017 16:07
Show Gist options
  • Save rpragana/f0bf89b15a9586ab79197484512e783f to your computer and use it in GitHub Desktop.
Save rpragana/f0bf89b15a9586ab79197484512e783f to your computer and use it in GitHub Desktop.
Download ZIP
Seletores DOM em javascript plano
Raw
domselectors-$.js
function $ (selector, el) {
if (!el) {el = document;}
return el.querySelector(selector);
}
function $$ (selector, el) {
if (!el) {el = document;}
return el.querySelectorAll(selector);
//return Array.prototype.slice.call(el.querySelectorAll(selector));
}
Raw
domselectors.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM selectors</title>
</head>
<body>
<div id="div1">Esta é a primeira div</div>
<div id="div2">Segunda div, contendo parágrafos no seu interior.
<p id="p1">Primeiro parágrafo</p>
<p id="p2">Mais um parágrafo</p>
<p>Parágrafo sem id ou outros atributos</p>
<p>Outro parágrafo sem id ou atributos</p>
</div>
<ul>
<li>primeiro ítem</li>
<li id="centro">segundo ítem</li>
<li>terceiro ítem</li>
</ul>
<div id="div3">Mais uma div</div>
<img src="document.gif">
<div id="div4">
<div id="ajuda">Este documento destina-se a testes com seletores
do DOM, utilizando javascript plano (puro ou vanilla).</div>
</div>
<p id="final">Parágrafo final do documento</p>
<script>
// --- selecionando com jQuery ou com javascript nativo
//var divs = $("div");
var divs = document.querySelectorAll("div");
console.log("divs="); console.log(divs)
//var parent = $("#ajuda").parent();
var parent = document.getElementById("ajuda").parentNode;
console.log("parent="); console.log(parent)
//var nextElement = $("#centro").next();
var nextElement = document.getElementById("centro").nextElementSibling;
console.log("nextElement="); console.log(nextElement)
// --- modificando atributos do elemento
//$("img").filter(":first").attr("alt", "fotografia");
document.querySelector("img").setAttribute("alt", "fotografia");
console.log("img="); console.log(document.querySelector("img"))
// --- criando ou clonando novos elementos
//var novaDiv = $("<div/>");
var novaDiv = document.createElement("div");
console.log("novaDiv="); console.log(novaDiv)
//$("body").append($("<p/>"));
document.body.appendChild(document.createElement("p"));
//var clonadoElem = $("#final").clone();
var clonadoElem = document.getElementById("final").cloneNode(true);
console.log("clonadoElem="); console.log(clonadoElem)
// --- removendo elementos
//$("#centro").empty();
var centro = document.getElementById("centro");
while(centro.firstChild) centro.removeChild(centro.firstChild);
console.log("centro="); console.log(centro)
//------------------------------------------------------------
// --- função "ready" (documento carregado, pronto)
//$(document).ready(function() {
// // código
//});
document.addEventListener("DOMContentLoaded", function() {
// código
});
// --- modificando classes nos elementos
var el=document.querySelector("#div2")
//el.addClass("classico")
el.classList.add("classico")
console.log("el="); console.log(el)
//el.toggleClass("classico")
el.classList.toggle("classico")
console.log("el="); console.log(el)
// --- listando todos os nodes (nós) de um documento
var nodes = document.querySelectorAll("*")
var arrnomes=[]
for( var i=0; i < nodes.length; i++) {
arrnomes.push(nodes[i].nodeName)
}
console.log(arrnomes)
</script>
</body>
</html>
Raw
Seletores_DOM_em_javascript_plano.md

DOM selectors in vanilla JS

  • domselectors.html - contém a página html e o script que irá manipular elementos nessa página.
  • domselectors-$.js - contém funções para deixar essa manipulação do DOM semelhante ao jQuery e bibliotecas similares.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment