Guía completa de JavaScript: Objetos, sintaxis, eventos y más

JavaScript
2015
Autor: Sergio Santos Gil

JavaScript - Sergio Santos Gil 2
Introducción.............................................................................................................................
Sintaxis.................................................................................................................................
Caracteres Especiales............................................................................................................
Expresiones Regulares .............................................................................................................
Objetos Predefinidos................................................................................................................
Objeto Date ..........................................................................................................................
Objeto Number .....................................................................................................................
Objeto Math..........................................................................................................................
Objeto String ........................................................................................................................
Objeto Navigator..................................................................................................................
Objeto Screen .......................................................................................................................
Objeto Document..................................................................................................................
Objeto Location....................................................................................................................
Objeto Window.....................................................................................................................
Objeto Array.........................................................................................................................
Eventos ....................................................................................................................................
DOM........................................................................................................................................
Título 3..............................................................................................................................
JavaScript

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas
web dinámicas.
Una página web dinámica es aquella que incorpora efectos como texto que aparece y
desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes
de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es
necesario compilar los programas para ejecutarlos.
Sintaxis
La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación como Java
y C. las normas básicas que definen la sintaxis de JavaScript son:
No se tienen en cuenta los espacios en blanco y las nuevas líneas.
Se distinguen las mayúsculas y minúsculas.
No se define el tipo de variable. Al crear una variable no es necesario iniciar el tipo
de dato que almacenará, de esta forma una misma variable puede almacenar diferentes
tipos de datos durante la ejecución del script.
No es necesario terminar cada sentencia con el carácter de punto y coma. Aunque
es muy recomendable usarlo ya que sin el punto y coma es menos legible el código.
Se pueden incluir comentarios. Los comentarios se usan para añadir información en
el código fuente del programa.
JavaScript define dos tipos de comentarios:
o Comentarios de una sola línea (//).
o Y comentarios de bloque (/* */).

El código JavaScript se adjunta en el código HTML mediante las etiquetas <script></script>
en cualquier parte del documento, aunque se recomienda definir el código dentro de la
cabecera del documento.
El lenguaje JavaScript se puede guardar en ficheros independientes con la extensión .js,
aunque tenemos que añadirlos en nuestras páginas web mediante el atributo src de la etiqueta
<script> entre comillas.
Caracteres especiales
Carácter HTML Unicode
& & u0022
< < u003C
> > u003E
í &itilde; u00ED
  u00A0
“ " u0022
‘ ' u0027
© © u00A9
® ® u00AE
€ € u20AC
° ° u00B0
² ² u00B2
³ ³ u00B3
µ µ u00B5
¼ ¼ u00BC
½ ½ u00BD
¾ ¾ u00BE
π π u03C0
Carácter HTML Unicode
Á Á u00C1
á á u00E1
É É u00C9
é é u00E9
Í Í u00CD
í í u00ED
Ó Ó u00D3
ó ó u00F3
Ú Ú u00DA
ú ú u00FA
Ü Ü u00DC
ü ü u00FC
Ṅ Ñ u00D1
ñ ñ u00F1

Las expresiones regulares nos permite ver si una cadena de texto cumple un determinado
formato, por ejemplo, si todo son dígitos, si tiene formato de fecha y hora, etc. También nos
permiten extraer partes de esa cadena de texto que cumplan ese formato, por ejemplo, si
dentro de un texto más o menos largo hay una fecha, podemos extraerla fácilmente.
Carácter Función
/^ Inicio de la expresión
$/ Final de la expresión
* Los caracteres anteriores se pueden poner 0 o más veces
+ Los caracteres anteriores se tienen que poner 1 o más veces
? Los caracteres anteriores se puede poner 0 o una vez como máximo
. Cualquier carácter individual, salvo el salto de línea
x|y Se debe poner el valor x o y
{n} Exactamente tiene que aparecer n veces los caracteres anteriores
{n, m} Como mínimo tiene que aparecer n veces y como máximo m
[abc] Cualquiera de los caracteres entre corchetes
[^abc] Cualquiera de los caracteres que NO esté entre corchetes
d Cualquier carácter de dígito ([0-9])
D Cualquier carácter que NO sea dígito ([^0-9])
w Cualquier carácter alfanumérico, incluido barra baja
W Cualquier carácter que NO sea alfanumérico
t Tabulación
r Retorno de carro
n Salto de línea
f Salto de página
s Cualquier carácter individual de espacio en blanco (espacios,
tabulaciones, saltos de línea y de página)
S Cualquier carácter individual que NO sea un espacio en blanco
b Límite de palabra (como un espacio en blanco o un retorno de carro)
B Cualquiera que NO sea un límite de palabra

Objeto Date
Los objetos de tipo Date nos sirven para manejar fechas, teniendo en cuenta que en
JavaScript las fechas se expresan como el número de milisegundos transcurridos desde el
1 de enero de 1970 a las 00:00:00 UTC (esta fecha se conoce como origen o época UNIX).
variable = new Date([parámetros]);
Los parámetros en la sintaxis precedente pueden ser:
Nada: crea la fecha de hoy día y la hora.
Una cadena representando una fecha: "Mes día, año horas:minutos:segundos". Si
se omite las horas, minutos, o segundos, el valor será configurado como cero.
Un conjunto de valores enteros para año, mes y día.
Un conjunto de valores enteros para año, mes, día, hora, minuto y segundos.
Método Función
getDate() Devuelve el día del mes (1-31).
getDay() Devuelve el día de la semana (0-6), siendo 0 domingo y 6 el sábado.
getMonth() Devuelve el mes (0-11), siendo 0 enero y 11 diciembre.
getFullYear() Devuelve el año expresado en 4 dígitos.
getHours() Devuelve la hora (0-23).
getMinutes() Devuelve los minutos (0-59).
getSeconds() Devuelve los segundos (0-59).
getMiliseconds() Devuelve los milisegundos (0-999).
getTime() Devuelve los milisegundos transcurridos desde la época UNIX.
parse(fecha) Devuelve la cantidad de milisegundos transcurridos desde la época UNIX hasta
la fecha introducida.
setDate(diaMes) Establece el día del mes (1-31).
setMonth(mes) Establece el mes (0-11).
setFullYear(año) Establece el año con 4 dígitos.
setHours(horas) Establece la hora (0-23).
setMinutes(minutos) Establece los minutos (0-59).
setSeconds(segundos) Establece los segundos (0-59).
setMiliseconds(milisegundos) Establece los milisegundos (0-999).
setTime(milisegundos) Establece la fecha como número de milisegundos desde la época UNIX.
toDateString() Convierte la fecha del objeto Date en una cadena de caracteres.
toLocaleDateString() Devuelve la fecha en cadena (diaSemana, dia, mes, año) en el formato del
idioma local.
toLocaleString() Devuelve la fecha en cadena completa en el formato de idioma local.
toLocaleTimeString() Devuelve la hora en cadena (hora:minuto:segundo).
toTimeString() Convierte la parte de tiempo de un Date en cadena de caracteres.

Objeto number
El objeto Number sirve para crear objetos constantes del tipo numérico.
variable = new Number(número);
Método Función
toString() Devuelve una representación alfanumérica de un número.
toExponential() Representa un número en notación exponencial (e+0).
toFixed() Representa un número en notación de punto fijo. Si no es proporciona un
valor para los dígitos decimales, el valor será 0.
toPrecision() Representa un número en notación exponencial o de punto fijo con un número
especificado de dígitos.
Constante Valor
Number.MAX_VALUE El mayor número que se puede representar en JavaScript (1,79E+308 aprox.).
Number.MIN_VALUE El menor número que se puede representar en JavaScript (5,00E+324 aprox.).
Number.NaN Establece el valor NaN.
Number.NEGATIVE_INFINITY Un valor que es menor que el mayor número negativo que se puede
representar (-infinity).
Number.POSITIVE_INFINITY Un valor mayor que el mayor número que se puede representar (infinity).

Objeto math
El objeto Math es un objeto de nivel superior, predefinido en JavaScript, el cual no
necesita constructor. Tanto las propiedades como los métodos deben anteponer la constante
Math para poder emplear.
Propiedad Valor
Math.E Constante de Eleur. Base de logaritmos neperianos (2.7818…).
Math.LN10 Logaritmo neperiano de 10 (2.302 aprox.).
Math.LN2 Logaritmo neperiano de 2 (0.693 aprox.).
Math.LOG10E Logaritmo en base 10 de E (0.434 aprox.).
Math.LOG2E Logaritmo en base 2 de E (1.442 aprox.).
Math.PI Constante de PI.
Math.SQRT1_2 Raíz de ½ (0.707 aprox.).
Math.SQRT2 Raíz de 2 (1.442 aprox.).
Método Función
abs(valor) Devuelve el valor absoluto del valor introducido.
acos(valor) Devuelve el arcoseno en radianes (entre 0 y π) de un valor.
asin(valor) Devuelve el arcoseno en radianes (entre – π/2 y + π/2) de un valor.
cons(valor) Devuelve el coseno de un valor, expresado en radianes.
sin(valor) Devuelve el seno de un valor, expresado en radianes.
tan(valor) Devuelve la tangente de un valor, expresado en radianes.
ceil(valor) Función techo: devuelve el entero mayor o igual que el valor introducido.
floor(valor) Función suelo: devuelve el entero menor o igual que el valor introducido.
log(valor) Devuelve el logaritmo natural del valor.
max(valor1,valor2…,valorN) Devuelve el mayor número de los introducidos.
min(valor1,valor2…,valorN) Devuelve el menor número de los introducidos.
pow(base exponente) Devuelve el resultado de elevar base a exponente.
random() Devuelve un número aleatorio comprendido entre 0 (incluido) y 1 (excluido).
round(valor) Devuelve el resultado de redondear el valor a su entero más próximo.
sqrt(valor) Devuelve la raíz cuadrada del valor introducido.

Objeto String
El objeto predefinido String sirve para manejo de cadena de caracteres.
Con la propiedad length podemos averiguar la longitud de la cadena de caracteres
asociada al objeto. Si es una frase, también se cuenta como carácter los espacios en blanco.
Método Función
anchor(nombre) Crea un anclaje HTML.
big() Devuelve la cadena en formato grande.
small() Devuelve la cadena en formato pequeño.
fixed() Devuelve la cadena con formato TT.
bold() Devuelve la cadena en negrita.
italics() Devuelve la cadena en cursiva.
strike() Devuelve la cadena tachada.
sub() Devuelve la cadena con el formato subíndice.
sup() Devuelve la cadena con el formato superíndice.
toUpperCase() Devuelve la cadena en mayúsculas.
toLowerCase() Devuelve la cadena en minúsculas.
fontcolor(color)
Modifica el color de la cadena. El color se puede especificar en
formato “texto” y en formato “#RRGGBB”.
fontsize(número) Modifica el tamaño de la fuente.
charAt(numero) Devuelve el carácter en la posición indicada como parámetro.
charCodAt(carácter) Devuelve en código ASCII el carácter introducido como
parámetro.
concat(cadenas) Concatena dos o más cadenas de caracteres.
replace(cadena, nuevaCadena) Busca la cadena introducida y las reemplaza por la nueva cadena
especificada.
match(cadena) Devuelve todas las coincidencias encontradas en una array.
search(cadena) Devuelve la posición de la coincidencia o el valor -1 si no existe
ninguna.
split(separador[, límite])
Divide la cadena en trozos y los devuelve en un array, pasándole
el separador de las palabras.
link(url) Inserta en la cadena un hipervínculo de la dirección introducida.
indexOf(valor[, inicio])
Devuelve el índice de de la primera aparición del valor
especificado dentro de la cadena desde la posición inicio. Si se
omite inicio empieza a buscar desde el primer carácter
empezando desde la izquierda de la cadena.
lastIndexOf(valor[, fin])
Devuelve el índice de la primera aparición del valor especificado
dentro de la cadena desde la posición fin. Si se omite la posición
fin empieza a buscar desde e primer carácter desde la derecha de
la cadena.
trim() Eliminan los espacios al principio y al final de la cadena.
fromCharCode(códigos) Convierte valores Unicode en caracteres.
substring(índiceA[, índiceB])
Devuelve una subcadena que está comprendida entre dos índices
de la cadena, sin incluir el índiceB. Si este se omite, se llega
hasta el final de la cadena.

substr(inicio[, longitud]) Devuelve una subcadena a partir de los parámetros. Si se omite
la longitud, se considera hasta el final de la cadena.
slice(inicio, fin)
Extrae un trozo de la cadena desde el inicio hasta el fin, sin
incluirlo, introducidos o el final de la cadena si es omitido.
Si el valor de fin es negativo, indica la posición comenzando por
la parte derecha de la cadena.
Objeto Screen
El objeto predefinido Screen corresponde a la pantalla utilizada por el usuario. Este objeto
no posee ningún método, solamente propiedades de sólo lectura.
Propiedad Valor
widht Corresponde a la anchura de la pantalla.
availWidth Corresponde a la anchura disponible de la pantalla para el uso de ventanas.
height Corresponde a la altura total de la pantalla.
availHeight Corresponde a la altura disponible de la pantalla para el uso de ventanas.
colorDepth Corresponde al número de bits usados para representar los colores que puede
mostrar la pantalla.
pixelDepth Indica el número de bits utilizados para proporcionar el color en la pantalla
del sistema donde se ejecuta el navegador.
Objeto Navigator
El objeto Navigator permite acceder, sólo lectura, a algunas características del navegador.
Propiedad Valor
appCodeName Nombre en código o alias del navegador utilizado.
appName Nombre del navegador.
appVersion Versión del navegador.
cookieEnabled Determina si las cookies están habilitadas o no.
language Idioma del navegador.
mimeTypes Un array con los tipos MIME que soporta el navegador.
plattform Plataforma en la que se ejecuta el navegador.
userAgent Devuelve una información completa del naveagdor.
Método Función
javaEnabled() Informa si el navegador está habilitado para soportar la ejecución de
programas escritos en JAVA.

Objeto Document
El objeto Document se construye a partir de la marca <body> del lenguaje HTML. Sobre él
pueden actuar los distintos eventos del ratón.
Array Contenido
plugins Array de plugins del documento.
layers Array que contiene las capas (<layer>) del documento.
images Array que contiene las imágenes cargadas en el documento.
applets Array que contiene los applets del documento.
links Array que contiene los enlaces (<a href>) del documento.
froms Array que contiene los formularios definidos en el documento.
anchors Array que contiene los puntos de anclaje (<a name>).
Propiedad Valor
bgColor Color de fondo del documento.
linkColor Color de los enlaces.
alinkColor Color de los enlaces activos.
vlinkColor Color de los enlaces visitados.
fgColor Color por defecto del texto.
lastModified Fecha en la que fue modificado el documento por última vez.
domain Nombre del servidor web del que procede el documento.
title Título del documento.
URL URL completa del documento actual.
referrer URL del documento a través del cual se cargó el documento actual.
Método Función
write() Escribe texto en el propio documento.
writeln() Igual que write() pero con un salto de línea al final.
close() Cierra el documento activo.
getSelection() Devuelve una cadena con el texto seleccionado por el usuario.
home() Carga la página de inicio.
open() Abre un documento.

Objeto Location
El objeto Location contiene información sobre la dirección de la página actual (URL).
Propiedad Valor
hash Nombre de un anclaje de la URL (#).
host Nombre del servidor, su alias, o su
dirección IP y su número de puerto.
hostname Nombre del servidor en el que está
definido el servicio.
href Cadena que representa la dirección
completa.
pathname Directorios que acompañan a la URL de
un recurso.
port Puerto en el que está definido el servicio
protocol Protocolo de comunicación especificado
por la URL.
search Parámetros que acompañan a la URL
después de una ?.
Método Función
reload() Recarga la página actual.
replace() Carga la URL especificada y la sustituye
por la entrada actual.

Objeto Array
Los arrays están diseñados para facilitar el acceso a listas de datos y la realización de
operaciones con esas listas; para referirse a un dato de la lista sólo hay que indicar la
posición (incide) que ocupa dentro de ella, teniendo en cuenta que el primer elemento tiene
asociado el índice 0.
La estructura for(variable in objeto) nos permite recorrer un array. Y la propiedad length
nos indica y establece la longitud de un array (se puede editar).
Método Función
concat(array)
Devuelve un array cuya lista está compuesta por los elementos
del array al que se aplica, seguidos de los del parámetro
introducido.
foreach(función)
Para cada elemento del array llama a la función especificada
enviándole como argumentos el valor del elemento, su índice y
el array completo.
indexOf(valor) Nos devuelve la posición de un elemento en el array.
Si no existe, devuelve el valor -1.
lasindexOf(valor) Como el anterior pero empieza a buscar por detrás.
join(separador)
Devuelve una cadena de caracteres compuesta por los
elementos de la lista del array separados mediante el
separador especificado.
pop() Elimina el último elemento del array y lo devuelve.
push(elemento/s) Añade uno o más elementos al final del array y devuelve la
longitud restante de la lista.
reverse() Invierte el orden de los elementos del array y lo devuelve con
el nuevo orden.
shift() Elimina el primer elemento del array y lo devuelve.
slice(inicio[, fin])
Devuelve un array con los elementos comprendidos entre el
índice inicio incluido y el índice fin excluido, si se omite,
utiliza todos los elementos a partir de inicio.
sort() Ordena los elementos a partir de la lista y devuelve el array
ordenado.
splice(inicio, eliminar[, elemento/s])
Sirve para eliminar o añadir elementos a partir de la posición
inicio de un array. Distintos valores eliminar:
Distinto de 0: se elimina ese número de elementos e
inicio, y se insertan los elemento/s. Devuelve un array
con los elementos eliminados.
Igual a 0: se insertan los elemento/s en la posición
inicio desplazando los elementos existentes. No
devuelve nada.
unshift(elemento/s) Añade uno o más elementos al principio del array y devuelve
la longitud resultante.

Objeto window
El objeto Window representa una ventana o marco del navegador. Es el elemento raíz de
la estructura de objetos de cada página HTML.
Array Contenido
frames Array de marcos (frames) de la ventana actual.
Propiedad Valor
closed Devuelve true si esa ventana está cerrada.
defaultStatus Mensaje por defecto que se muestra en la barra de estado de esa ventana.
document Objeto documento asociado a la ventana.
history Objeto historial de las URLs visitadas.
innerHeight Altura del área de contenido de la ventana (px).
innerWidth Anchura del área de contenido de la ventana (px).
length Número de marcos en la ventana.
location Objeto location asociado a la ventana.
locationbar Barra de dirección del navegador.
menubar Barra de menú del navegador.
name Nombre de la ventana.
opener Referencia al objeto window que abrió una nueva ventana.
outerHeight Altura exterior de la página en px.
outerWidth Anchura exterior de la página en px.
parent Representa el nombre de la ventana o marco que contiene la ventana actual.
self Representa la ventana actual.
status Cadena con el mensaje de la barra de estado.
statusbar Barra de estado de la ventana.
toolbar Barra de herramientas del navegador.
top Representa la ventana de nivel superior en una estructura de marcos.
window Representa la ventana actual, igual que self.
Método Función
alert() Muestra una ventana de mensajes.
back() Carga la URL anterior de la lista del objeto history correspondiente a la
ventana del nivel superior.
blur() Desactiva una página.
clearInterval(var) Cancela un temporizador iniciado con setInterval().
clearTimeout(var) Cancela un temporizador iniciado con setTimeout().
close() Cierra la ventana especificada (puede que solo funcione tras open().
confirm() Genera un cuadro de dialogo con los botones Aceptar y Cancelar.
find() Busca una cadena de texto en el contenido de la ventana especificada.
focus() Asigna el foco a un objeto.
forward() Carga la siguiente URL de la lista del objeto history.
home() Carga la URL definida como “home” en el navegador.
moveTo(x, y) Mueve la ventana a las coordenadas especificadas.
moveBy(x, y) Mueve la ventana actual el número de pixeles especificados.

Método Función
open(URL, nombre, opciones)
Abre nuevas ventanas del navegador. Las opciones
pueden ser (“opción=valor”):
height: altura de la ventana en px.
menubar: si es yes, crea una barra de menú en
la ventana.
resizable: si es yes, el usuario podrá
redimensionar la ventana.
scrollbars: si es yes, aparecerán barras de
desplazamiento.
status: si es yes, la nueva ventana tendrá barra
de estado.
toolbar: si es yes, la ventana tendrá barra de
herramientas.
width: ancho de la ventana en px.
print() Imprime el contenido de la ventana.
prompt() Genera un cuadro de diálogo con un cuadro de texto
para que el usuario introduzca valores.
resizeBy(x, y) Redimensiona la ventana actual el número de pixeles
especificados.
resizeTo(x, y) Redimensiona la ventana a los nuevos valores de
ancho y alto.
scrollBy(x, y) Desplaza la ventana actual el número de pixeles
especificados.
scrollTo(x, y) Desplaza la ventana actual a las coordenadas
especificadas.
setInterval(expresion, ms) Establece un temporizador cíclico que se encarga de
evaluar una expresión regularmente.
setTimeout(expresion, ms) Establece un temporizador que evalúa una expresión
una vez trascurrido el tiempo asignado.
stop() Detiene el proceso de carga de la página actual.

En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles eventos
que se le pueden asignar. Un mismo tipo de evento (por ejemplo, pinchar el botón izquierdo
del ratón) puede estar definido para varios elementos XHTML diferentes y un mismo
elemento, puede tener asociados varios eventos diferentes.
El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés
de la acción asociada al evento.
Evento Descripción Elementos para los que está definido
Eventos de Ratón
onclick Pinchar y soltar el ratón Todos los elementos
ondblclick Pinchar dos veces seguidas con el ratón Todos los elementos
onmousedown Pulsar (sin soltar) un botón del ratón Todos los elementos
onmousemove Mover el ratón Todos los elementos
onmouseout El ratón "sale" del elemento (pasa por encima de
otro elemento)
Todos los elementos
onmouseover El ratón "entra" en el elemento (pasa por encima
del elemento)
Todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón Todos los elementos
Eventos de Teclado
onkeydown Pulsar una tecla Elementos de formulario y <body>
onkeypress Cuando se mantiene pulsada una tecla Elementos de formulario y <body>
onkeyup Soltar una tecla pulsada Elementos de formulario y <body>
Eventos de HTML
onload La página se ha cargado completamente <body>
onunload Se abandona la página (por ejemplo al cerrar el
navegador)
<body>
onabort Se produce cuando un usuario detiene la carga de
la página
<body>
onerror Se produce cuando no se puede cargar la página <body>
onselect Seleccionar un texto <input>, <textarea>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onsubmit Enviar el formulario <form>
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Al modificadar el tamaño de la ventana del
navegador
<body>
onfocus Seleccionar un elemento <button>, <input>, <label>, <select>,
<textarea>, <body>
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>,
<textarea>, <body>
onBeforeUnload
Se ejecuta antes de abandonar la página, justo
antes de que se ejecute onunload. El documento
aún está visible y el evento aún se puede cancelar.
Objeto window

El Modelo de Objetos del Documento (DOM) es una interfaz de programación de
aplicaciones (API) para documentos validos HTML y bien construidos XML. Define la
estructura lógica de los documentos y el modo en que se accede y manipula.
El DOM permite un acceso a la estructura de una página HTML mediante el mapeo de los
elementos de esta página en un árbol de nodos. Cada elemento se convierte en un nodo y
cada porción de texto en un nodo de texto. Los elementos comúnmente son asociados a las
etiquetas que tienen atributos y contienen nodos hijos. Sin embargo, los nodos de textos no
poseen atributos e hijos.
Los nodos se pueden ser:
 elementos: hace referencia a las etiquetas HTML.
 atributos: representan los atributos de las etiquetas.
 texto: representan el texto contenido en las etiquetas.
 comentario: hace referencia a los comentarios del documento.
Para ordenar la estructura del árbol del DOM, existe una serie de reglas:
En el árbol de nodos, al nodo superior (document), se le denomina raíz.
Cada nodo, exceptuando el nodo raíz, posee un nodo padre.
Un nodo puede poseer cualquier número de hijos.
Una hoja es un nodo sin hijos.
Los nodos que comparten el mismo padre, son hermanos.

Para acceder a los distintos nodos de un documento se emplean los siguientes métodos del
objeto document:
getElementById(id): accede al elemento o nodo a través conociendo su atributo id.
getElementByTagName(elemento): devuelve un array con todos los elementos de la
misma familia especificada.
getElementsByClassName(clase): devuelve un array con todos los elementos en el
documento con el nombre de la clase especificada.
Propiedades y métodos de los nodos:
Propiedad Valor
innerHTML Obtiene el texto en formato HTML del nodo. También
podemos cambiar su valor.
outerHTML Obtiene el texto en formato HTML del nodo, incluyendo las
etiquetas. También podemos cambiar su valor.
nodeName Obtiene el nombre del elemento en mayúsculas.
nodeValue Obtiene el contenido del elemento. En caso de acceder al valor
de un atributo, devuelve su valor.
nodeType Representa el número asociado al tipo de nodo:
1. elemento 6. entidad
2. atributo 8. comentario
3. texto 9. documento
ownerDocument Representa el elemento raíz del nodo.
firstChild Primer hijo del nodo.
lastChild Último hijo del nodo.
childNodes Array con todos los hijos del nodo.
parentNodes Padre del nodo.
previousSibling Contiene el hermano siguiente del nodo.
nextSibling Contiene el hermano anterior del nodo.
attributes Array que posee todos los atributos del nodo.
Método Función
hasChildNodes() Devuelve un booleano especificando si el nodo contiene (true)
o no (false) nodos hijos.
appendChild(nodo) Añade un nodo al elemento especificado.
removeChild(nodo) Elimina un nodo del elemento.
replaceChild(nuevo, viejo) Reemplaza el nodo viejo por el nuevo.
insertBefore(nuevo. viejo) Inserta un nuevo nodo anteriormente al nodo viejo.
insertAdjacentHTML(posición, código)
Inserta el código nuevo en la posición indicada:
beforebegin: código como hermano mayor del nodo.
afterbegin: código como primer hijo del nodo.
beforeend: código como el último hijo del nodo.
afterend: código como hermano menor del nodo.
getAttribute(atributo) Devuelve el valor del atributo especificado. Null si no existe.
setAttribute(atributo, valor) Cambia o crea el atributo indicado otorgándole el nuevo valor.
removeAttribute(atributo) Elimina el atributo indicado.

Guía completa de JavaScript: Objetos, sintaxis, eventos y más

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Similar a Guía completa de JavaScript: Objetos, sintaxis, eventos y más

Similar a Guía completa de JavaScript: Objetos, sintaxis, eventos y más (20)

Más de Sergio Santos

Más de Sergio Santos (17)

Último

Último (20)

Guía completa de JavaScript: Objetos, sintaxis, eventos y más