Descripción
El interface Node es la base que representa cualquier elemento del DOM (Document Object Model). De esta manera todos los objetos se tratarán de manera similar.
Sintaxis
Node
Constructores
N/A
Propiedades
- baseURI
- childNodes
- firstChild
- isConnected
- lastChild
- nextSibling
- nodeName
- nodeType
- nodeValue
- ownerDocument
- parentNode
- parentElement
- previousSibling
- textContent
Métodos
- appendChild()
- cloneNode()
- compareDocumentPosition()
- contains()
- getRootNode()
- hasChildNodes()
- insertBefore()
- isDefaultNamespace()
- isEqualNode()
- isSameNode()
- lookupPrefix()
- lookupNamespaceURI()
- normalize()
- removeChild()
- replaceChild()
Eventos
N/A
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Templates HTML5</title>
</head>
<body>
<h1>Templates HTML5</h1>
<table id="ciudades">
<thead>
<tr>
<td>Ciudad</td>
<td>País</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<template id="ciudad">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
<script>
if ('content' in document.createElement('template')) {
const tbody = document.querySelector("tbody");
const template = document.querySelector("#ciudad");
// Clona la plantilla
const clone = template.content.cloneNode(true);
let td = clone.querySelectorAll("td");
td[0].textContent = "Barcelona";
td[1].textContent = "Spain";
tbody.appendChild(clone);
// Clona nuevamente la plantillax11
const clone2 = template.content.cloneNode(true);
td = clone2.querySelectorAll("td");
td[0].textContent = "Paris";
td[1].textContent = "Francia";
tbody.appendChild(clone2);
}
</script>
</body>
</html>