Sabemos que una implementación completa de JavaScript debe estar compuesta por tres partes: ECMAScript (Core), BOM (modelo de objeto de navegador) y DOM (modelo de objeto de documento).
Hoy aprendo principalmente Bom y Dom.
Nacido:
BOM proporciona muchos objetos para acceder a las funciones del navegador, que no tienen nada que ver con el contenido de la página web (este es el negocio DOM). En la actualidad, BOM ha sido trasladado a la especificación HTML5 por W3C.
Objeto de la ventana:
El núcleo de BOM representa una instancia del navegador. Es una interfaz para acceder a la ventana del navegador a través de JavaScript y un objeto global especificado por ECMAScript. Esto significa que cualquier objeto, variable y función definido en la página web tiene la ventana como su objeto global, por lo que tiene permiso para acceder a métodos como ParesInInt (). (Extracto de la elevación III). Además, si una página web contiene marcos, cada cuadro tiene su propio objeto de ventana y se guarda en la colección de marcos (índice 0 inicios, LTR, TTB).
En primer lugar, las variables y funciones en el entorno de ejecución global son todos los géneros y métodos de objetos de ventana. Por supuesto, hay una pequeña diferencia entre las variables globales y los atributos de la ventana directamente definidos. Las variables globales (para ser precisas, deben declararse explícitamente las variables globales) no pueden usar Eliminar, mientras que los atributos de la ventana están bien. Además, hay otro detalle para tener en cuenta que tratar de acceder a las variables no declaradas se equivocará, pero no hay problemas para usar los objetos de la ventana de consulta.
Entonces, ¿cuáles son las propiedades o métodos comunes de la ventana?
1.Name, cada objeto de ventana tiene un atributo de nombre, que contiene el nombre del marco. Por lo general, para comprender las relaciones y marcos de las ventanas.
2. Método de posición de la ventana: Moveto (x coordenada de la nueva posición, coordenada y de la nueva posición), MoveBy (movimiento horizontal x, movimiento vertical y). Estos dos métodos no se aplican al marco.
3. Atributos del tamaño de la ventana: Innerwidth/Altura (tamaño de área de vista (menos el ancho del borde)/ *es decir, Safari, Firefox */), Outerwidth/Altura (devuelve el tamaño de la ventana del navegador/ *es decir, Safari, Firefox */). En Chrome, interno y exterior devuelven el tamaño del área de la vista.
Por supuesto, puede cambiar el tamaño de la ventana por resizeto (nuevo ancho de la ventana, nueva altura de la ventana), resize (hasta el ancho original y aumentar y en comparación con la altura original). Este método de canción de amor no se aplica a la estructura del marco.
4.Window.open (url, objetivo de ventana, cadena de características, si la nueva página reemplaza el booleano de la página cargada actualmente en el historial del navegador) se utiliza para navegar a una URL específica o abrir una nueva ventana. Si se especifica el objetivo de la ventana y el objetivo de la ventana es el nombre de una ventana o marco existente, la URL especificada se cargará en la ventana o marco que ha sido renombrado. De lo contrario, la nueva ventana que se abre se nombrará como la ventana de destino. Por supuesto, las palabras clave que los objetivos de la ventana pueden especificar son _elf, _parent, _top, _blank.
<a href = // www.vevb.com> Haga clic en mí </a> <script> Var link = document.getElementsByTagName ("A") [0]; alerta (link.nodeName); Window.Onload = function () {link.onclick = function () {window.open (link.href, "bueno", "width = 400px, hight = 300px"); devolver falso; }} </scriptLa configuración específica de la cadena de características no se detallan aquí. Si está interesado, puede hacer clic aquí
5. Como lenguaje único, JS todavía permite configurar los valores de tiempo de espera (ejecución del código después del evento especificado) y los valores de tiempo de intervalo (bucle una vez cada tiempo especificado) para programar la ejecución del código en un momento específico.
Tiempo de espera de la llamada: setTimeout (cadena de código JS, tiempo de milisegundos). Como un lenguaje único, la cola de tareas JS solo puede ejecutar una pieza de código a la vez. Si la cola de tareas está vacía después del intervalo de tiempo establecido, se ejecutará la cadena de código. De lo contrario, debe esperar hasta que se ejecute el código anterior antes de ejecutar.
var al = setTimeOut (function () {alerta ("bueno");}, 5000); alerta (AL); // 2Aquí, llamé a una función anónima después de 5 segundos para salir bien. Un cuadro de advertencia apareció en la ventana para mostrar 2. Se puede ver que la función SetTimeOT () devuelve una ID numérica, que es única. Luego podemos borrar la llamada de tiempo de espera a través de esta ID y podemos usar ClearTimeOut (ID) para borrarla.
Llamada indirecta: setInterval (), los parámetros que acepta son los mismos que SetTimeOut (), y también devuelve una ID numérica y se borra con ClearTimeOut ().
6. Métodos de cuadro de diálogo del sistema: alerta (), confirmar (), solicit (), etc. están escritos en mi blog anterior, haga clic aquí
Objeto de ubicación
En lugar de ser un objeto en la BOM, la ubicación es una propiedad en el objeto de la ventana. Por supuesto, también es propiedad del objeto de documento en el DOM que se discutirá más adelante. Es decir, Window.location y document.location, consulte el mismo objeto.
Lista de atributos del objeto de ubicación, modificar estos atributos puede cargar una nueva página y generar un nuevo registro en el historial. Usar Ubication.Replace () ya no generará nuevos registros en registros históricos.
| picadillo | "#contenido" | Devuelve hash en URL, no "" |
| anfitrión | "www.google.com" | Devuelve el nombre del servidor y el número de puerto (si corresponde) |
| nombre de host | "www.google.com" | Devuelve el nombre del servidor sin el número de puerto |
| href | "www.google.com" | Devuelve la URL completa de la página actual y las llamadas asignar () |
| nombre de ruta | ''/Wileycda/' | Volver al nombre del directorio |
| puerto | "8080" | Devuelve el número de puerto, si no, devuelve una cadena vacía |
| protocolo | "http:" | Volver al protocolo utilizado por la página |
| Buscar | "? = JavaScript" | Devuelve la cadena de consulta, comenzando con un signo de interrogación |
Objeto Navigator: un estándar de facto utilizado para identificar navegadores, y sus propiedades y métodos se utilizan principalmente para detectar los tipos de navegadores.
El resto son como objetos de historia (guarda registros históricos) y objetos de pantalla (que muestran capacidades del cliente). Dado que la programación en JS no es muy efectiva, no las repetiré.
--------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------
DOM:
DOM es una API que se extiende para HTML basada en XML, y DOM se basa en árboles de nodo para expandirse.
En primer lugar, es necesario estar claro que el nodo del documento es el nodo raíz de cada nodo. El nodo del documento tiene y solo un nodo infantil, a saber, el HTML (elemento de documento).
Tipo de nodo:
Una interfaz en DOM1 es implementada por todos los tipos de nodos (nodos de texto, nodos de atributos, nodos de elementos), y esta interfaz se implementa como un tipo de nodo en JS.
Atributo Nodetype, propiedad de cada nodo. Denotado por 12 valores numéricos, elemento-1, atributo-2, texto-3 ...
Atributo NodeName, para el nodo del nodo Element, el valor de NodeName es el nombre de la etiqueta.
Atributo NodeValue, para el nodo de nodo de elemento, el valor de NodeValue es nulo.
Relación de nodo: cada nodo tiene el atributo de nodos infantiles, que guarda el objeto Nodelist (objeto de matriz de clases). Cada nodo tiene una propiedad ParentNode, señalando el nodo principal. Los nodos en los nodos de los niños tienen el mismo parentnode. Use las propiedades anteriores y nextsiBling para acceder a los nodos hermanos. Al mismo tiempo, los nodos infantiles [0] == FirstChild, ChildNodes [ChildNodes.length-1] == LastChild.
Nodo de operación: appendChild (), presione un nodo al final de Nodelist y devuelva el nodo recién agregado. InsertBore (), devuelva un nodo al encabezado Nodelist Unshift y devuelve un nuevo nodo. ReplaceChild (NewChild, TargetChild), reemplaza el nodo de destino. El nodo original todavía está en el documento, pero no hay ubicación. RemoVeChild (tragetchild), elimina el nodo y el efecto es similar a ReplaceChild (). Clonechild (booleano), cuando es verdadero, significa replicación completa (todo el nodo y nodo infantil), falso significa replicación básica.
Tipo de documento:
Representa un documento, el objeto de documento es una instancia de HTMLDDocument (heredado del tipo de documento), que representa la página completa de HTML. Al mismo tiempo, el objeto Douent también es una propiedad del objeto de la ventana, por lo que se puede acceder como un objeto global. document.firstchild == html. document.body == cuerpo. document.doctype ---> referencia a <! Doctype>. Doucment.title ---> Título Document.URL ---> Ubicación.url.
Encuentre elementos: getElementById (), getElementsBytagName (), getElementsByClassName ().
Escritura de documentos: Write (), WriteLn (), Open (), Close ()
Tipo de elemento:
getAttribute (), obtenga la función para la clase, use "clase", en lugar de classname, y el atributo de clase se puede obtener cuando se usa element.classname.
setAttribute (), establece la función, si la función existe, reemplácela. De lo contrario, cree.
RemoveAttribute () elimina completamente las características del elemento.
createElement (), crea un nuevo elemento.
Tipo de texto:
CreateteTextNode (), crea nodos de texto. Si un nodo de texto está conectado a un nodo compatriota vecino, los dos textos se conectarán sin espacios.
La composición del artículo anterior de JavaScript ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------