Ejemplos de uso de JavaScript para acceder y manipular objetos HTML.
Encuentre el valor del atributo href de un enlace
<!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>
Encuentre el valor del atributo hreflang de un enlace
<!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>
Encuentre el valor del atributo id de un enlace
<!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>
Encuentre el valor del atributo rel de un enlace
<!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>
Encuentre el valor del atributo de destino de un enlace
<!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>
Encuentre el valor del atributo tipo de un enlace
<!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>
Encuentra el texto alternativo de un área de mapa de imágenes
<!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>
Encuentra las coordenadas de un á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>
Encuentra la forma de un á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>
Encuentra el href de un á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>
Encuentre la parte del protocolo del atributo href de un á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>
Encuentre la parte del nombre de host del atributo href de un á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>
Encuentre la parte del número de puerto del atributo href de un á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>
Encuentre la parte del nombre de ruta del atributo href de un á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>
Encuentre la parte de la cadena de consulta del atributo href de un á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>
Encuentra la parte hash del atributo href de un á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>
Encuentre el valor del atributo objetivo de un á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>
Encuentre la URL base para todas las URL relativas de una 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>
Encuentre el objetivo base para todos los enlaces en una 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>
Cambiar el color de fondo de un 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>
Encuentra la altura de un 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>
Encuentre el valor del atributo de nombre de un 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>
Encuentre el atributo fuente (src) de un 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>
Cambiar el atributo de fuente (src) de un 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>
Encuentra el texto alternativo de una imagen.
<!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>
Encuentra la altura de una imagen.
<!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>
Haga clic para mostrar una versión de alta resolución de una imagen.
<!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>
Encuentra la fuente (src) de una imagen
<!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>
Cambiar la fuente de una imagen
<!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>
Cambiar la fuente de la bombilla.
<!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>
Encuentre el valor del atributo usemap de una imagen
<!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>
Cambiar el ancho del borde de una tabla
<!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>
Cambiar el relleno de una mesa
<!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>
Encuentra el HTML interno de una celda
<!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>
Crear un título para una tabla
<!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>
Eliminar filas en una tabla
<!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>
Agregar filas a una tabla
<!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>
Cambiar el contenido de una celda de tabla
<!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>