El objeto de artículo DOM se utiliza para representar el elemento HTML <article>. Se puede acceder al elemento del artículo mediante el método getElementById() .
Sintaxis:
document.getElementById("id");
Donde ‘id’ es el ID asignado a la etiqueta del artículo .
Ejemplo-1: En el siguiente programa, se accede al objeto del artículo al hacer clic en el botón y se cambia el color del texto dentro del elemento.
html
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>DOM article Object</h2>
<button onclick="Geeks()">Click Here</button>
<br><br>
<article id="s">A computer science portal for geeks.</article>
<script>
function Geeks() {
var txt = document.getElementById("s");
txt.style.color = "green";
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2: El objeto del artículo se puede crear utilizando el método document.createElement .
html
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>DOM article Object</h2>
<button onclick="Geeks()">Click Here!</button><br><br>
<div><span id = "p"></span></div>
<script>
function Geeks() {
var txt = document.createElement("ARTICLE");
var t = document.createTextNode("A computer
science portal for geeks.");
txt.appendChild(t);
document.getElementById("p").appendChild(txt);
}
</script>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles : los navegadores compatibles con el objeto HTML DOM Article se enumeran a continuación:
- Google Chrome
- Internet Explorer (después de IE 8)
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA