Exemplos de uso de JavaScript para acessar e manipular objetos HTML.
Encontre o valor do atributo href de um link
<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" href="https://www.w3schools.com/">W3Schools</a></p>
<p>Click the button to display the value of the href attribute of the link above.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAnchor").href;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o valor do atributo hreflang de um link
<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" hreflang="en-us" href="https://www.w3schools.com/">W3Schools</a></p>
<p>Click the button to display the value of the hreflang attribute of the link above.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAnchor").hreflang;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o valor do atributo id de um link
<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" href="https://www.w3schools.com/">W3Schools</a></p>
<p>Click the button to display the value of the id attribute of the link above.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAnchor").id;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o valor do atributo rel de um link
<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" rel="nofollow" href="https://www.w3schools.com/">W3Schools</a></p>
<p>Click the button to display the value of the rel attribute of the link above.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAnchor").rel;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o valor do atributo de destino de um link
<!DOCTYPE html>
<html>
<body>
<p><a id="w3s" target="_self" href="https://www.w3schools.com/">W3Schools</a></p>
<p>Click the button to display the value of the target attribute of the link above.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("w3s").target;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o valor do atributo type de um link
<!DOCTYPE html>
<html>
<body>
<p><a id="myAnchor" type="text/html" href="https://www.w3schools.com/">W3Schools</a></p>
<p>Click the button to return the value of the type attribute of the link above.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myAnchor").type;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o texto alternativo de uma área do mapa de imagem
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="A beautiful planet" href="venus.htm">
</map>
<p>Click the button to display the alternate text for the "venus" area.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").alt;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre as coordenadas de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>Click the button to display the coordinates for the "venus" area.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").coords;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre a forma de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>Click the button to return the shape of the "venus" area in the image-map.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").shape;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o href de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>Click the button to display the value of the href attribute for the "venus" area.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").href;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre a parte do protocolo do atributo href de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>Click the button to display the protocol of the href attribute for the "venus" area.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").protocol;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre a parte do nome do host do atributo href de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>Click the button to display the hostname of the href attribute for the "venus" area.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").hostname;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre a parte do número da porta do atributo href de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>Click the button to display the port of the href attribute for the "venus" area in the image-map.</p>
<p><b>Note:</b> If the port part is not specified in the URL, or if the port number is 80 (which is default), some browsers will just display 0 or nothing.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").port;
document.getElementById("demo").innerHTML = "Port: " + x;
}
</script>
</body>
</html>
Encontre a parte do nome do caminho do atributo href de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>Click the button to display the pathname of the href attribute for the "venus" area in the image-map.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").pathname;
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
Encontre a parte da string de consulta do atributo href de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm?id=venus">
</map>
<p>Click the button to display the querystring part of the href attribute for the "venus" area.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").search;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre a parte hash do atributo href de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm#description">
</map>
<p>Click the button to display the anchor part of the href attribute for the "venus" area.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").hash;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o valor do atributo alvo de uma área
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" target="_self">
</map>
<p>Click the button to return the value of the target attribute for the "venus" area in the image-map.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("venus").target;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o URL base para todos os URLs relativos em uma página
<!DOCTYPE html>
<html>
<head>
<base id="htmldom" href="https://www.w3schools.com/jsref/">
</head>
<body>
<p>Click the button to display the value of the href attribute of the base element.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("htmldom").href;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o alvo base para todos os links em uma página
<!DOCTYPE html>
<html>
<head>
<base id="htmldom" target="_self" href="https://www.w3schools.com/jsref/">
</head>
<body>
<p>Click the button to display the value of the target attribute of the base element.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("htmldom").target;
document.getElementById("demo").innerHTML = "Base target for all links: " + x;
}
</script>
</body>
</html>
Alterar a cor de fundo de um iframe
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="demo_iframe.htm">
<p>Your browser does not support iframes.</p>
</iframe>
<p>Click the button to change the background color of the document in the iframe.</p>
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("myframe");
x.style.backgroundColor = "red";
}
</script>
</body>
</html>
Encontre a altura de um iframe
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="/default.asp" height="200" width="250">
<p>Your browser does not support iframes.</p>
</iframe>
<p>Click the button to display the height of the iframe.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myframe").height;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o valor do atributo name de um iframe
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="/default.asp" name="iframe_a"></iframe>
<p>Click the button to return the name of the iframe.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myframe").name;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre o atributo source (src) de um iframe
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="/default.asp"></iframe>
<p>Click the button to display the value of the src attribute in the iframe.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myframe").src;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Alterar o atributo source (src) de um iframe
<!DOCTYPE html>
<html>
<body>
<iframe id="myframe" src="/default.asp"></iframe>
<p>Click the button to change the src attribute in the iframe.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myframe").src = "http://www.cnn.com";
}
</script>
</body>
</html>
Encontre o texto alternativo de uma imagem
<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="compman.gif" alt="Crazy computerman" width="107" height="98">
<p>Click the button to display the alternate text of the image.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myImg").alt;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Encontre a altura de uma imagem
<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="compman.gif" width="107" height="98">
<p>Click the button to display the height of the image.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myImg").height;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Clique para exibir uma versão em alta resolução de uma imagem
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage() {
document.getElementById('myimage').src = "compman.gif";
}
</script>
<img id="myimage" onclick="changeImage()" src="compman_lowres.gif" width="107" height="98">
<p>Click the image to display a high resolution version.</p>
</body>
</html>
Encontre a fonte (src) de uma imagem
<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="compman.gif" width="107" height="98">
<p>Click the button to display the src attribute of the image.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myImg").src;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Alterar a origem de uma imagem
<!DOCTYPE html>
<html>
<body>
<img id="myImg" src="compman_lowres.gif" width="107" height="98">
<br><br>
<button onclick="document.getElementById('myImg').src='compman.gif'">On</button>
<button onclick="document.getElementById('myImg').src='compman_lowres.gif'">Off</button>
</body>
</html>
Mude a fonte da lâmpada
<!DOCTYPE html>
<html>
<body>
<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
Encontre o valor do atributo usemap de uma imagem
<!DOCTYPE html>
<html>
<body>
<img id="planets" src="planets.gif" width="145" height="126" usemap="#planetmap">
<map name="planetmap">
<area id="venus" shape="circle" coords="124,58,8" alt="The planet venus" href="venus.htm">
</map>
<p>Click the button to display the value of the usemap attribute of the image.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("planets").useMap;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Alterar a largura da borda de uma tabela
<!DOCTYPE html>
<html>
<head>
<script>
function changeBorder(id) {
document.getElementById(id).style.border = "5px solid";
}
</script>
</head>
<body>
<table style="border:1px solid black" id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<p>
<input type="button" onclick="changeBorder('myTable')" value="Change Border">
</p>
</body>
</html>
Alterar o preenchimento de uma tabela
<!DOCTYPE html>
<html>
<head>
<script>
function padding(id) {
document.getElementById(id).style.padding = "15px";
}
</script>
</head>
<body>
<table id="myTable" style="border:1px solid black">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<p>
<input type="button" onclick="padding('myTable')" value="Change padding">
</p>
</body>
</html>
Encontre o innerHTML de uma célula
<!DOCTYPE html>
<html>
<head>
<script>
function getCellContent(id) {
var x = document.getElementById(id).rows[0].cells;
document.getElementById("demo").innerHTML = x[0].innerHTML;
}
</script>
</head>
<body>
<table id="myTable" style="border: 1px solid black">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<p>
<input type="button" onclick="getCellContent('myTable')" value="Display first cell">
</p>
<p id="demo"></p>
</body>
</html>
Crie uma legenda para uma tabela
<!DOCTYPE html>
<html>
<head>
<script>
function createCaption(id) {
document.getElementById(id).createCaption().innerHTML = "My new caption";
}
</script>
</head>
<body>
<table id="myTable" style="border: 1px solid black">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<p>
<input type="button" onclick="createCaption('myTable')" value="Create caption">
</p>
</body>
</html>
Excluir linhas em uma tabela
<!DOCTYPE html>
<html>
<body>
<table id="myTable" style="padding:8px;border:1px solid black">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>
<input type="button" value="Delete one Row"
onclick="document.getElementById('myTable').deleteRow(0)">
</p>
</body>
</html>
Adicionar linhas a uma tabela
<!DOCTYPE html>
<html>
<head>
<script>
function insRow(id) {
var x = document.getElementById(id).insertRow(0);
var y = x.insertCell(0);
var z = x.insertCell(1);
y.innerHTML = z.innerHTML = "New";
}
</script>
</head>
<body>
<table id="myTable" style="border: 1px solid black">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<p>
<input type="button" onclick="insRow('myTable')" value="Insert row">
</p>
</body>
</html>
Alterar o conteúdo de uma célula da tabela
<!DOCTYPE html>
<html>
<head>
<script>
function changeContent(id, row, cell, content) {
var x = document.getElementById(id).rows[row].cells;
x[cell].innerHTML = content;
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<p>
<input type="button" onclick="changeContent('myTable', 0, 0, 'Hello')" value="Change content">
</p>
</body>
</html>