El objeto base en HTML DOM se usa para representar el elemento HTML <base> .
Esta etiqueta se usa para establecer u obtener las propiedades del elemento <base>. Se puede acceder a este elemento utilizando el método getElementById() .
Sintaxis:
document.getElementById("Base_ID");
Este «Base_ID» se asigna al elemento HTML <base> .
Propiedades del objeto:
- href: se utiliza para establecer o devolver el atributo href en el elemento base.
- target: se utiliza para establecer o devolver el atributo de destino en un elemento base.
Ejemplo-1: Devolver el valor href del elemento base.
html
<!DOCTYPE html>
<html>
<head>
<base id="Geek_Base"
href="https://www.geeksforgeeks.org">
<title>
HTML | DOM Base Object
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML | DOM Base Object</h2>
<button onclick="myGeeks()">
Click
</button>
<h4><p id="Geek_p" style="color:green"></p>
</h4>
<script>
function myGeeks() {
// Accessing base object.
var x =
document.getElementById(
"Geek_Base").href;
document.getElementById(
"Geek_p").innerHTML = x;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: Devolver el valor objetivo del elemento base, que es _blank en este caso.
html
<!DOCTYPE html>
<html>
<head>
<base id="Geek_Base" target="_blank">
<title>
HTML | DOM Base Object
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML | DOM Base Object</h2>
<button onclick="myGeeks()">
Click
</button>
<h4><p id="Geek_p" style="color:green"></p>
</h4>
<script>
function myGeeks() {
var x =
document.getElementById(
"Geek_Base").target;
document.getElementById(
"Geek_p").innerHTML = x;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-3: devolución del valor objetivo del elemento base.
html
<!DOCTYPE html>
<html>
<head>
<base id="Geek_Base"
target="_parent">
<title>
HTML | DOM Base Object
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>HTML | DOM Base Object</h2>
<button onclick="myGeeks()">
Click
</button>
<h4><p id="Geek_p" style="color:green">
</p>
</h4>
<script>
function myGeeks() {
var x =
document.getElementById(
"Geek_Base").target;
document.getElementById(
"Geek_p").innerHTML = x;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles:
- Google Chrome
- Mozilla Firefox
- Borde
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA