¿Qué es Dom? DOM es un conjunto de interfaces API basadas en la programación del navegador (en este tutorial, se puede decir que es la programación DHTML). W3C tiene algunas diferencias sutiles en cada navegador. Entre ellos, el navegador de Mozilla es el más similar al estándar. JavaScript simple debe combinar DOM para realizar la programación DHTML, y puede producir hermosos efectos y aplicarse a la web. Esto es casi lo mismo que otros idiomas, al igual que C/C ++ requiere soporte de biblioteca. De lo contrario, es simplemente una investigación gramatical. Lo que más nos preocupa es que DOM conecta páginas web con scripts y otros lenguajes de programación. DOM pertenece al navegador, no al contenido central especificado en la especificación del idioma JavaScript.
Encontrar elementos
1. Busque directamente
| Nombre del método | describir |
| getElementById (ID) (documento) | Obtenga elementos en el documento con un valor de atributo de identificación único especificado |
| getElementsBytagName_r (nombre) | Devuelve una matriz de elementos infantiles con nombre de etiqueta especificado en el elemento actual |
| document.getElementsByClassName | Obtenga la colección de etiquetas basada en atributos |
| getAttribute (nombre) | Devuelve el valor de atributo del elemento, el atributo se especifica por nombre |
1> document.getElementById ('id')
<body> <div id = "zhang"> no guapo </div> <script type = "text/javaScript"> var i = document.getElementById ('zhang'); // Encuentra la identificación especificada i.innertext = 'muy guapo'; // InnteText Modifique la cadena especificada </script> </body>Efecto de visualización, cuando abrimos, es decir, se modificará para ser muy guapo.
2> getElementsBytagName_r (nombre)
<body> <div name = "zhang"> no guapo </div> <script type = "text/javaScript"> var i = document.getElementBytagnmae ('zhang'); // Encuentra el nombre especificado Nombre i.innertext = 'muy guapo'; // InnteText Modifique la cadena especificada </script> </body>El mismo efecto de visualización
3> Document.getElementsByClassName
<Body> <Viv> no guapo </iv> <script type = "text/javaScript"> var i = document.getElementClassName ('zhang'); // Encuentra el nombre de clase especificado i.innertext = 'muy guapo'; // InnteText Modifique la cadena especificada </script> </body>2. Búsqueda indirecta
| Nombre de atributo | describir |
| nodos de niños | Devuelve una matriz de todos los elementos infantiles del elemento actual |
| nodos de niños | Devuelve todos los elementos infantiles del elemento actual |
| Primero | Devuelve el primer elemento inferior infantil del elemento actual |
| último | Devuelve el último elemento hijo del elemento actual |
| nextsiBling | Devuelve el elemento inmediatamente después del elemento actual |
| Anteriormente | Devuelve el elemento inmediatamente anterior al elemento actual |
| sargento | Devuelve su elemento de etiqueta de nodo principal |
| niños | Devolver todos sus subtítulos |
| Firstelementcild | Devuelve el primer elemento subtítulo |
| LastElementChild | Devuelve el último elemento subtag |
| nextElementtsibling | Vuelve下一个兄弟标签元素 |
| Elemento anterior | Volver al elemento de etiqueta de hermanos anterior |
Con W3C DOM, puede escribir scripts simples del navegador cruzado, aprovechando al máximo la potencia y la flexibilidad de XML para usar XML como medio de comunicación entre el navegador y el servidor.
Elementos de operación
1. Propiedades y métodos DOM W3C utilizados para crear contenido dinámicamente
| Propiedades/métodos | describir |
| document.createElement_x (TagName) | El método CreateElement_X en el objeto de documento puede crear elementos especificados por TagName. Si la cadena Div se usa como parámetro de método, se generará un elemento DIV |
| document.createTextNode (texto) | El método CreateTextNode del objeto de documento creará un nodo que contiene texto estático. |
| <ememem> .AppendChild (ChildNode) | El método AppendChild agrega el nodo especificado a la lista del nodo infantil del elemento actual (como un nuevo nodo infantil). |
| <ememem> .SetAttribute (nombre, valor) | Estos métodos respectivamente obtienen y establecen el valor del atributo de nombre en el elemento |
| <ememem> .insertbefore (NewNode, TargetNode) | Inserte el nodo del nodo como el nodo infantil del elemento actual en frente del elemento TargetNode |
| <ememem> .removeattribute (nombre) | Este método elimina el nombre del atributo del elemento |
| <ememem> .removechild (ChildNode) | Este método elimina el elemento infantil del nodo del elemento |
| <ememem> .replaceChild (Newnode, Oldnode) | Este método reemplaza el nodo OldNode con el nodo NewNode |
| <ememem> .haschildnodes () | Este método devuelve un valor booleano que indica si el elemento tiene elementos infantiles |
2. Contenido de etiqueta
Innertext Obtener el contenido de texto de la etiqueta Innerhtml Obtener el valor de contenido HTML Obtenga el valor, es decir, el valor del formulario enviado por el formulario
Es decir, lo siguiente es lo siguiente:
<Div> 1111 </div> <div> 2222 </div> <input type = "text" value = "zhang yanlin"> <script> document.getElementsByClassName ("zhang"). Innertext = 123; // Obtenga la etiqueta con el nombre de clase Zhang y cambie el contenido a 123 document.getElementsByClassName ("yan"). Innerhtml = 456; // Obtenga la etiqueta con el nombre de clase yan y cambie el contenido a 456 document.getElementsByClassName ("Lin"). Value = "Zhang Yanlin es guapo"; // Obtenga la etiqueta con el nombre de clase Lin y cambie el contenido a Zhang Yanlin es guapo </script>3. Atributos
atributos // Obtener todos los atributos de la etiqueta setAttribute (clave, valor) // Establecer atributo de etiqueta getAttribute (key) // Obtener el atributo de etiqueta especificado
A través de propiedades personalizadas, puede presentar un caso de seleccionar todo, desanimarse y anularse. El código es el siguiente:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <input type = "button" value = "seleccione todo" en el ciclk = "checkAll ();"> <input type = "bootle" value = "oncclick =" CanCleall (); value = "undelect" onClick = "recvall ();"> </div> <div id = "i1"> <ul> <li> <input type = "checkbox" value = "1"> baloncesto </li> <li> <input type = "checkbox" value = "2"> fútbol </li> <li> <input type = "checkbox" valor = "3" "Volleyball </li> </ul ul Checkall () {var b = document.getElementsByClassName ("C1"); for (var i = 0; i <b.length; i ++) {var check = b [i]; check.ecked = true}} function CANCLeAll () {var b = document.getElementsByClassName ("C1"); for (var i = 0; i <var i = 0; i <b.length; i ++) {var check = b [i]; check.ecked = false}} función recvall () {var b = document.getElementsByClassName ("C1"); for (var i = 0; i <b.length; i ++) {var check = b [i]; if (check.ecked) {check.ecked = false} else {check.ecked = true}}} </script> </body> </html> Seleccione All, reverse, cancele los casosNota: OnClick es un evento de clic, que se mencionará más adelante
4. Operación de clase
ClassName // Obtenga todos los nombres de clase ClassList.remove (CLS) // Elimine la clase especificada ClassList.Add (CLS) // Agregar clase
Esta cosa es muy útil. Por ejemplo, en JD.com, cuando nuestro mouse se coloca en todos los productos, muchos productos aparecen a continuación. Los productos están ocultos y solo aparecen después de que el evento de activación es definir un atributo oculto CSS. Después de colocar el mouse, se elimina el atributo oculto CSS; Se elimina el mouse y se agrega el atributo oculto.
<! DocType html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> escondar </title> <style> .Hide {display: none; } </style> </head> <body> <span onMouseOver = "moúver ();"> Pon algo de él, pero desaparece sin ponerlo </span> <div id = "zhangyanlin" style = "font-size: 60px"> zhang yanlin es tan guapo </div> <scrute> function mOUNover () { document.getElementById ("Zhangyanlin"). ClassList.Remove ("Ocultar"); } function moUout () {document.getElementById ("Zhangyanlin"). ClassList.Add ("Ocultar"); } </script> </body> </html> despertemos el cerebro con un estuche5. Operación de etiqueta
Podemos crear etiquetas a través de DOM y agregarlas a la ubicación especificada. Aquí hay dos métodos para operar etiquetas
// Method one var zhang = "<input type='text' />";xxx.insertAdjacentHTML("beforeEnd",zhang);xxx.insertAdjacentElement('afterBegin',document.createElement('a')) //Note: the first parameter can only be 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd' // Method dos var etiqueta = document.createElement ('div') xxx.appendchild (etiqueta) // Agregar un elemento div xxx.insertbefore (etiqueta, xxx [1]) // Insertar a la posición especificada, puede usar el índice <! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <div> <div> <input type = "text"/> <input type = "button" value = "add" onclick = "adictelement (this)"; ";"; ";"; ";"; ";"; ";"; ";"; ";" /> </div> <div style = "Position: relative;"> <ul id = "CommentList"> <li> Alex </li> <li> Eric </li> </ul> </div> </div> <script> Función Addelement (ths) {// Obtenga el valor de entrada var val = ths.previouselementsiBling.Value; ths.PreviousElementBling.value = ""; var commentslist = document.getElementById ('CommentList'); // La primera forma, Método de cadena // var str = "<li>" + val + "</li>"; // 'BefeBegin', 'Afterbegin', 'Beforeend', 'AfterEd' // Beforeend interno Último // antes de la parte superior externa // Afterbegin Close-Fitting // After Effer Endold Pared Pasting //commentList.insertadjacenthtml("beforend",str); // El segundo método es el método de elemento var tag = document.createElement ('li'); tag.inntext = val; var temp = document.createElement ('a'); temp.inntext = 'Baidu'; temp.href = "http://etiantian.org"; tag.appendChild (temp); // commentList.appendChild (etiqueta); CommentList.insertbefore (Tag, CommentList.children [1]); } </script> </body> </html> Agregar estuche de operación de etiqueta6. Operación de estilo
<body> <div id = i1> zhang yanlin es guapo </div> <script> var obj = document.getElementById ('i1'); obj.style.fontSize = "32px"; obj.style.backbackgroundcolor = "rojo"; </script> </body>Los efectos son los siguientes:
Tomemos un caso. Solo mirar los puntos de conocimiento es aburrido. A menudo vemos la fuente más oscura en el cuadro de entrada, lo que le impide ingresar algo. Cuando haces clic, desaparece. Es una operación mágica. Se logra a través del DOM. Solo lee el código sin decir muchas tonterías.
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> .bb {color: #9a9a9a; } .aa {color: negro; } </style> </head> <body> <input value = "por favor ingrese el contenido" onfocus = "inpatu (this);" onblur = "onBtu (this);"> <script> función inpatu (ths) {ths.classname = "aa"; VAR text = ths.value; if (text == "Por favor ingrese contenido") {ths.value = ""; }} function onBtu (ths) {var text = ths.value; if (text == "Por favor ingrese contenido" || text.trim (). longitud == 0) {ths.classname = "bb"; ths.value = "Por favor ingrese contenido"; }} </script> </body> </html> Intruper el cuadro de entrada solicitante7. Operación de posición
Altura total de documento Documento. Documento.
¿Pensaste que hay un regreso a la parte superior en la esquina inferior derecha de la página web y luego volver a la parte superior en un punto más mínimo? Sí, es para calcular estas alturas; Y cuando baje el mouse, el estilo correspondiente de la barra de menú a la izquierda cambiará.
<! DocType html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <syle> body {margin: 0px; } img {border: 0; } ul {relleno: 0; margen: 0; Estilo de lista: Ninguno; } H1 {relleno: 0; margen: 0; } .clearfix: After {content: "."; Pantalla: bloque; Altura: 0; claro: ambos; Visibilidad: oculto; } .wrap {ancho: 980px; margen: 0 auto; } .pg-Header {Background-Color: #303A40; -webkit-box-shadow: 0 2px 5px rgba (0,0,0, .2); -Moz-box-shadow: 0 2px 5px rgba (0,0,0, .2); Shadow de caja: 0 2px 5px RGBA (0,0,0, .2); } .pg-header .logo {float: izquierda; relleno: 5px 10px 5px 0px; } .pg-header .logo img {vertical-align: middle; Ancho: 110px; Altura: 40px; } .pg-header .nav {line-height: 50px; } .pg-header .nav ul li {float: izquierda; } .pg-header .nav ul li a {display: block; Color: #ccc; relleno: 0 20px; Decoración de texto: ninguna; tamaño de fuente: 14px; } .pg-header .nav ul li a: hover {color: #fff; Color de fondo: #425A66; } .pg-body {} .pg-body .catalog {posición: absoluto; Arriba: 60px; Ancho: 200px; Color de fondo: #FAFAFA; Abajo: 0px; } .pg-body .catalog.fixed {posición: fijo; arriba: 10px; } .pg-cuerpo .catalog .catalog-item.active {color: #fff; Color de fondo: #425A66; } .pg-body .content {posición: absoluto; Arriba: 60px; Ancho: 700px; margen izquierda: 210px; Color de fondo: #FAFAFA; desbordamiento: auto; } .pg-body .content .section {altura: 500px; borde: 1px rojo sólido; }</style><body onscroll="ScrollEvent();"><div> <div> <div> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div> <ul> <li> <a href = "#"> HOME </a> </li> <li> <a href = "#"> función 1 </a> </li> <li> <a href = "#"> función 2 </a> </li> </ul> </div> </div> </div> </div> <div> <div Id = "CaTalog"> <Viv Auto-to = " 1 </a> </div> <div auto-to = "function2"> <a> imagen 2 </a> </div> <div ago-to = "function3"> <a> imagen 3 </a> </div> </div> <div it = "content"> <div menú = "function1"> <h1> capítulo 1 </h1> </div> <iv menú = "function2"> <h1> <h1> <Div menú = "function3"> <h1> Capítulo 3 </h1> </div> </div> </div> </script> <script> function scrollevent () {var bodyscrolltop = document.body.scrolltop; if (bodyscrolltop> 50) {document.getElementsByClassName ('catálogo') [0] .classList.add ('fijo'); } else {document.getElementsByClassName ('catálogo') [0] .classList.remove ('fijo'); } var content = document.getElementById ('content'); Secciones VAR = Content.Children; for (var i = 0; i <sections.length; i ++) {var current_section = sections [i]; // La altura absoluta de la etiqueta actual desde la varilla superior scofftop = current_section.offsettop + 60; // La etiqueta actual desde la parte superior, la altura relativa var oftop = scofftop - bodyscrolltop; // La altura de la etiqueta actual VAR HIEMPT = Current_Section.ScrollHeight; if (Offtop <0 && -Offtop <Height) {// La etiqueta actual agrega activo // otra eliminación de los menus de VAR activo = document.getElementById ('catálogo'). Children; var current_menu = menus [i]; current_menu.classlist.add ('activo'); for (var j = 0; j <menus.length; j ++) {if (menus [j] == current_menu) {} else {menus [j] .classList.remove ('activo'); } } romper; }}}} </script> </body> </html> Menú de desplazamiento <! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> .pg-top {posición: fijo; Color de fondo: #0095BB; Altura: 40px; Ancho: 40px; Abajo: 50px; Derecha: 40px; Color: Whitesmoke; } .Hide {Display: None; } </style> </head> <body onscroll = "func ();"> <div style = "altura: 3000px;" id = "i1"> <h1> zhang yanlin </h1> </div> <div id = "i2"> <a href = "javascript: void (0);" onClick = "gotop ();"> volver a la parte superior </a> </div> <script> function func () {var scrollTop = document.body.scrolltop; var i1 = document.getElementById ("i2"); if (scrolltop> 20) {i1.classList.remove ("escondite")} else {i1.classList.add ("escondite")}} function gotop () {document.body.scrolltop = 0; } </script> </body> </html> Volver a la cima8. Otras operaciones
Console.log Box Box Alerta Pop-up Combres Confirmar confirmar casilla // url y actualizar ubicación.href obtenga urllocation.href = "url" redirección ubicación.reload () recarga // temporizador setinterval múltiple temporizador transparente transparente transparente múltiplo múltiple setTimer setTimeOut Timero de timer Único Clear Temperador único Temporizante
Déjame contarte sobre el temporizador. El temporizador es más útil. Por ejemplo, cuando eliminemos un correo electrónico, encontraremos una ventana emergente de conversación. El correo electrónico ha sido eliminado. Este es un solo temporizador. Se puede usar múltiples temporizador cuando tiene necesidades específicas.
// múltiples casos de temporizador <input type = "button" value = "interval" onClick = "interval ();"> <input type = "button" value = "stopInterval" onClick = "stopInterval ();"> <script> Function Interval () {s1 = setInterval (function () {console.log (123) // Salida continua 123}, 500); s1 = setInterval (function () {console.log (123)}, 500); } function stopInterval () {ClearInterval (S1); // borrar un temporizador múltiple} </script>Temporizador único
<div> <input type = "button" value = "delete" onClick = "delete ();"> <input type = "button" value = "keal el estado actual" onClick = "undElete ();"> <div ID = "status"> </div> </div> <script> function delete () {document.getElementByid ("status"). t1 = setTimeout (ClearStatus, 1500); } function clearStatus () {document.getElementById ("status"). Innertext = ""; } function undElete () {ClearTimeOut (T1); // Después de borrar el temporizador, seguirá mostrando} </script>evento
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> // event <button id = "btn1" onclick = "func ();"> botón </boton> <script> var btn = document.getEngetByid ("btn1"); función func () {alert ("procesamiento de tiempo normal")} </script> // nivel 0 de procesamiento de eventos <button id = "btn2"> nivel 0 de procesamiento botón </botón> <script> var btn = document.getElementById ("btn2"); btn.onclick = function () {alert ("botón de procesamiento de nivel 0")}; // btn.onclick = null; // Borrar procesamiento de eventos, se sobrescribirán múltiples eventos, dejando solo el último evento </script> // Evento de procesamiento de nivel 2 de procesamiento <botón ID = "BTN3"> Botón de procesamiento de nivel 2 </botón> <script> var btn = document.getElementById ("btn3"). AddEventListener ("click", function () {alerta ("segundo nivel de procesamiento 1")}); var btn1 = document.getElementById ("btn3"). addEventListener ("hacer clic", function () {alert ("evento de procesamiento secundario 2")}); // no sobrescribido </script> <botón id = "btn4"> botón compatible completo </boton> <script> var btn = document.getElementById ("btn4"); if (btn.addeventListener) {btn.addeventListener ("hacer clic", demo); } else if (btn.attachevent) {btn.attachevent ("onclick", demo); } else {btn.onclick = demo; } función demo () {alerta ("Manejo de eventos de compatibilidad integrado")} </script> </body> </html>Lista de eventos:
| propiedad | ¿Cuándo ocurre este evento (cuándo se activa) |
| onabort | La carga de imágenes se interrumpe |
| en el franco | El elemento pierde el enfoque |
| en el cambio | El contenido del área ha sido modificado |
| encerrar | El mango del evento llamó cuando el usuario hace clic en un objeto (ejecutando el ejemplo del código anterior al hacer clic en la etiqueta de entrada) |
| ondblclick | El mango del evento llamado cuando el usuario hace doble clic en un objeto |
| onderror | Se produjo un error al cargar un documento o imagen. |
| en el tope | Los elementos ganan enfoque |
| oneydown | Se presiona una tecla de teclado |
| OnKeyPress | Se presiona y se lanza una tecla de teclado. |
| OnKeyUp | Se lanza un teclado |
| encendido | Se carga una página o una imagen |
| ondumedown | Se presiona el botón del mouse |
| municipal | Después de que el mouse se mueva |
| en el mouseut | El mouse se elimina de un elemento |
| en el mouseo | Mueva el mouse sobre un elemento |
| en el mouse | Se libera el botón del mouse |
| ineset | Se hace clic en el botón de reinicio |
| onreSizar | La ventana o el marco se redimensionan |
| en selección | Texto seleccionado |
| en la subsidio | Se hace clic en el botón de confirmación |
| onunLoad | Página de salida de usuario |
Nota: Una etiqueta puede unir múltiples eventos, esta etiqueta está funcionando actualmente y el evento encapsula el contenido del evento actual.
Tengamos algunos casos, de lo contrario siento que no lo he visto después de leerlo
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> <style> ul {list-style: none; relleno: 0; margen: 0; } ul li {float: izquierda; Color de fondo: #038CAE; Color: blanco; relleno: 15px 20px; } .clearfix: después de {display: block; contenido: '.'; Altura: 0; Visibilidad: oculto; claro: ambos; } .Hide {Display: None; } .tab-Menu {border: 1px solid #dddddd; } .tab-Menu .title {Background-Color: #dddddd; } .tab-Menu .title .Active {Background-Color: White; Color: negro; Borderto: 2px rojo sólido; } .tab-Menu .content {border: 1px solid #dddddd; Min-altura: 150px; } </style></head><body> <div> <div> <div> <ul> <li target = "h1" onclick="Show(this);">Price Trends</li> <li target = "h2" onclick="Show(this);">Market Distribution</li> <li target = "h3" onclick="Show(this);">Others</li> </ul> </div> <div id = "Content"> <Div Con = "H1"> Content1 </iv> <div Con = "H2"> Content2 </div> <div Con = "H3"> Content3 </div> </iv> </div> </div> </div> </div> </div> </div> <script> show de funciones (ths) {var objetivo = ths.getatribe ('objetivo'); ths.classname = 'activo'; Var Brother = ths.ParentElement.ndren; for (var i = 0; i <brother.length; i ++) {if (ths == hermano [i]) {} else {hermano [i] .removeattribute ("class"); }} var content = document.getElementById ("contenido"). Children; for (var j = 0; j <content.length; j ++) {var current_content = content [j]; var con = current_content.getAttribute ("con"); if (con == Target) {current_content.classlist.remove ("escondite"); } else {current_content.classname = "ocultar"; }}}} </script> </body> </html> Caso del menú de etiqueta <! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <body> <input type = "button" onClick = "func ();" value = "Click Me"/> <div id = "i1"> <div> 123 </iv> <div alex = "sb"> 123 </div> <div> 123 </div> <divse alex = "sb"> 123 </div> <div> 123 </div> <!-<input type = "text">-<!-<input type = "contraseña">-> <! ----> <<tiv div> <script) {// i1 // i1 Todos los niños, bucle cada niño, juzga si Alex = 'Sb' var i1 = document.getElementById ('i1'); var divs = i1.children; for (var i = 0; i <divs.length; i ++) {var current_div = divs [i]; resultado var = current_div.getAttribute ('alex'); // console.log (resultado); if (resultado == "SB") {current_div.inntext = "456"; }}} </script> </body> </html> Cambie los valores de los elementos a través de atributos personalizadosEl artículo anterior tiene una comprensión profunda de los objetos DOM JavaScript. Este artículo es todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.