1. Encuentra los elementos:
document.getElementById ("id"); Encuentre según ID y encuentre como máximo uno;
var a = docunment.getElementById ("id"); Coloque el elemento encontrado en la variable;
document.getElementsByName ("nombre"); encontrar según el nombre, y se encuentra la matriz;
document.getElementsBytagName ("nombre"); Encuentre la matriz de acuerdo con el nombre de la etiqueta;
document.getElementsByClassName ("Nombre") Buscar de acuerdo con ClassName, y se encuentra la matriz;
2. Contenido de operación:
1. Elementos no formados:
(1) Obtener contenido:
alerta (a.innerhtml); Se obtienen el código y el texto HTML en la etiqueta, y se obtienen todos los contenidos en la etiqueta.
Por ejemplo: hay tal div en el cuerpo:
<div id = "me"> <b> pruébalo </b> </div>
Use innerhtml para obtener el contenido en el DIV en el script:
var a = document.getElementById ("me");
alerta (a.innerhtml);
Los resultados son los siguientes:
alerta (a.inntaxt); Solo toma el texto adentro
alerta (a.outerhtml); Incluye el contenido de la etiqueta en sí (comprensión simple)
(2) Establecer contenido:
a.innerhtml = "<font color = rojo> hello world </font>";
Si el resultado es el siguiente con el código de contenido de configuración, se reemplaza el contenido en el DIV:
a.innteText presentará el contenido tal como está
Contenido de Borrar: Asigne una cadena vacía
2. Elementos de formulario:
(1) Hay dos formas de obtener contenido:
var t = document.f1.t1; Formulario Formulario Formulario ID se ingresa con T1 en F1;
var t = document.getElementById ("id"); Consíguelo directamente con ID.
alerta (T.Value); Obtiene el valor del valor en la entrada;
alerta (t.innerhtml); Obtenga el valor aquí <ExteAea> </extAREA>;
(2) establecer contenido: t.value = "cambio de contenido";
3. Un pequeño punto de conocimiento:
<a href = "http://www.baidu.com" onClick = "return false"> gire a baidu </a>; Si se agrega FLASE de retorno, no saltará, el valor predeterminado es return verdadero saltará. Lo mismo es cierto para los botones. Si la FLASE de retorno se establece en el botón, no se realizará el envío. Esto se puede usar para controlar el salto de envío.
3. Propiedades de operación
Primero, use la ID del elemento para encontrar el elemento y guárdelo en una variable:
var a = document.getElementById ("id");
Luego puede operar en las propiedades del elemento:
A.SetAttribute ("Nombre del atributo", "Valor de atributo"); Establecer un atributo, agregarlo o cambiarlo;
A.GetAttribute ("Nombre del atributo"); Obtenga el valor del atributo;
A.RemoveAttribute ("Nombre del atributo"); eliminar un atributo.
Ejemplo 1: Haz una pregunta. Si la respuesta de entrada es correcta, aparecerá correctamente y el error aparecerá errores;
Aquí hay un atributo Daan escrito en el texto, que contiene el valor de respuesta. Al hacer clic para verificar la respuesta, la entrada de contenido de Cheak es la misma que la respuesta:
Código en el cuerpo:
<Form> ¿En qué año fue la fundación de la República de China? <input type = "text" daan = "1912" value = "" id = "t1" name = "t1" /> <input type = "button" onClick = "check ()" id = "t2" name = "t2" valor = "verificar la respuesta" /> < /form>
Código en JS:
function check () {var a = document.getElementById ("t1"); var a1 = a.value; var a2 = a.getAttribute ("daan"); if (a1 == a2) {alerta ("¡Felicitaciones por responder correctamente!"); } else {alerta ("Idiot!"); }}Resultados cuando la respuesta es correcta:
Ejemplo 2: El botón Aceptar, cuenta regresiva a 10 segundos, el botón Aceptar se vuelve sumible. Aquí, el atributo de operación: DISPABILIDAD se usa para cambiar el estado del botón. Cuando discapacitada = "Discapacitada" no está disponible.
Código en el cuerpo:
<Form> <input type = "Subt" id = "b1" name = "b1" valor = "de acuerdo (10)" discapacitado = "discapacitado" /> < /form>
Código en JS:
var n = 10; var a = document.getElementById ("b1"); function bian () {n--; if (n == 0) {a.removeattribute ("discapacitado"); a.value = "de acuerdo"; devolver; } else {a.value = "de acuerdo ("+n+")"; Window.setTimeout ("bian ()", 1000); }} window.setTimeout ("bian ()", 1000);Resultados de la ejecución:
4. Estilo de operación
Primero, use la ID del elemento para encontrar el elemento y guárdelo en una variable:
var a = document.getElementById ("id");
Luego puede operar en las propiedades del elemento:
a. ; Opere las propiedades de este estilo de identificación.
El estilo es un estilo en CSS, y todos los estilos se pueden operar con código.
document.body.style.backgroundcolor = "color"; Color de fondo de toda la ventana.
Clase de estilo de operación: a.classname = "Hoja de estilo de estilo" opera un lote de estilos
Ejemplo 1: conmutación automática y manual de imágenes de pantalla;
El código en el cuerpo, para hacer un DIV con imagen de fondo y objetos de control en ambos lados:
<div id = "tuijian" style = "Background-Image: url (imges/tj1.jpg);"> <div id = "p1" onClick = "dodo (-1)"> </div> <div id = "p2" onClick = "dodo (1)"> </div> </div>
Código en Stylesheet:
<style type = "text/css"> *{margen: 0px auto; relleno: 0px; Font-Family: "Microsoft Yahei"; } #tuijian {ancho: 760px; Altura: 350px; Background-Repeat: sin repetición; } .pages {top: 200px; Color de fondo:#000; Posición de fondo: centro; Background-Repeat: sin repetición; Opacidad: 0.4; Ancho: 30px; Altura: 60px; } #p1 {background-image: url (imges/prev.png); flotante: izquierda; margen: 150px 0px 0px 10px; } #p2 {background-image: url (imges/next.png); flotante: correcto; margen: 150px 10px 0px; } </style>El código en JS llama principalmente a la función huan () cada 3 segundos para modificar el estilo de la imagen de fondo. Al hacer clic en el interruptor izquierdo y derecho, se cambiará manualmente y el interruptor automático se detiene:
<script language = "javaScript"> var jpg = new Array (); jpg [0] = "url (imges/tj1.jpg)"; jpg [1] = "url (imges/tj2.jpg)"; jpg [2] = "url (imges/tj3.jpg)"; var tjimg = document.getElementById ("tUijian"); var xb = 0; var n = 0; function huan () {{{{{xb++; if (xb == jpg.length) {xb = 0; } tjimg.style.backgroundimage = jpg [xb]; if (n == 0) {var id = window.settimeout ("huan ()", 3000); }} función dodo (m) {n = 1; xb = xb+m; if (xb <0) {xb = jpg.length-1; } else if (xb> = jpg.length) {xb = 0; } tjimg.style.backgroundimage = jpg [xb]; } window.setTimeout ("huan ()", 3000); </script>El efecto es el siguiente:
5. Operaciones de elementos relacionados:
var a = document.getElementById ("id"); encontrar a;
var b = a.nextsibling, encuentre el siguiente elemento par de A, preste atención a los espacios que contienen;
var b = A. Previoussibling, encuentre el elemento par de A anterior de A, preste atención a los espacios que contienen;
var b = A.ParentNode, encuentre el elemento principal anterior de A;
var b = a.childnodes, se encuentra la matriz y se encuentra el siguiente elemento infantil de A;
var b = a.firstchild, el primer elemento infantil, último último, los nodados [n] encuentran el número del primero;
alerta (nodos [i] instancia de texto); Determine si es texto, devuelve verdadero, no flase, use si para determinar si su valor es falso y puede eliminar espacios.
6. Creación, adición y eliminación de elementos:
var a = document.getElementById ("id"); encontrar a;
var obj = document.createElement ("nombre de la etiqueta"); crear un elemento
obj.innerhtml = "hola mundo"; Al agregar, primero debe crear un elemento.
A.appendChild (OBJ); Agregue un elemento infantil a a.
A.Removechild (OBJ); Eliminar un elemento infantil.
A. SelectedIndex en la lista: el número de seleccionado;
//a.options sor.selectIndex] Elimine el objeto de opción del subíndice de acuerdo con el índice.
7. Operación de cadena:
var s = nueva cadena (); o var s = "aaaa";
var s = "hola mundo";
alerta (s.tolowercase ()); a minúsculas touppercase () a mayúsculas
alerta (S.Substring (3,8)); interceptar desde la tercera posición hasta la octava posición
alerta (S.Substr (3,8)); Comienza a interceptar desde la tercera posición, interceptar ocho caracteres de longitud y no escribir los siguientes números hasta el final.
S.Split (''); Desmontar a los personajes según los personajes especificados, ponerlos en una matriz y ordenarlos automáticamente
S. La longitud es la propiedad
S.Indexof ("Mundo"); la primera ocurrencia del mundo en la cadena no regresa -1
s.lastindexof ("o"); o donde la última ocurrencia de s.lastindexof ("o"); o en la cadena
8. Operación de fecha y hora
var d = nueva fecha (); hora actual
d.setfulfyear (2015,11,6);/*Restar 1 configuración en el mes que desea establecer*/
d.Entently
d.getMonth (): Tómese el mes, y cuanto menos se eliminen;
d.getDate (): Toma el cielo;
d.getday (): Take el día de la semana
d.gethours (): Take the Hour;
d.getMinutes (): tomar minutos; D.GetSeconds (): Tomar segundos
d.setfulfyear (): Establezca el año y preste atención a -1 al establecer el mes.
9. Operación de funciones matemáticas
Math.ceil (); El entero más pequeño mayor que el decimal actual
Math.floor (); El entero más grande del número decimal actual de peces pequeños
Math.sqrt (); cuadrado abierto
Math.round (); redondo(); redondo
Math.random (); Número aleatorio, entre 0-1
10. Algunos consejos
Cotizaciones dobles afuera, y las citas dobles en el interior se cambian a citas individuales;
Al establecer la altura de la fila en el DIV, no importa cuán alto sea la configuración, la fila ocupada está en la posición media de forma predeterminada (la mitad de las áreas superiores e inferiores de la div - [predeterminada] centrada verticalmente).
El valor tomado del cuadro de texto es una cadena, y debe convertirse en un número usando parseInt ().
s.match (reg); S representa una cadena, Reg representa una cadena y los dos coinciden. Si las dos cadenas no coinciden, se devuelve un nulo.
La explicación detallada anterior de JavaScript-DOM Operation-Window. Objeto Document es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.