JavaScript DOM 篇

DOM Documento Modelo de objetos (Document Object Model)

Como llegar los elementos de la página

1. La adquisición ID

getElementById (ID);

<body> 
   <div id = " tarjeta " > 
       黎明的那道光
    </ div> 
   <script> 
       document.getElementById ( tarjeta );
   </ script> 
</ body>

console.dir () elementos de impresión del objeto de nuestro retorno, una mejor vista de la parte interior de las propiedades y métodos

2. Obtener bajo el nombre de la etiqueta

Uso document.getElementsByTagName () puede devolver un conjunto de etiquetas con el nombre especificado

<Ul> 
        <li> Hay una triste </ li> 
        <li> invierno del norte, si es demasiado caliente en el verano de Shanghai </ li> 
        <li> No se encuentra </ li> 
        <li> del mundo un mejor y te ring con el anillo hebilla </ Li> 
    </ UL> 
    <script> // Obtener un elemento de recogida de objetos de la matriz se almacena en un pseudo var LIS = document.getElementsByTagName ( ' Li ' ); 
        la console.log (LIS); 　　　　  la console.log (lis [0]); // obtener la primera Li
     </ script>

También puede obtener todos los elementos secundarios dentro de la etiqueta con su nombre especificado de un (elemento padre) elemento

element.getElementsByTagName ( 'nombre de etiqueta');

3. Obtener el nuevo método por el HTML5

document.getElementsByClassName ( 'nombre de la clase') // Devuelve un nombre de clase de objeto elemento de la colección

querySelector () Devuelve el primer elemento de un selector de objeto, que requiere atención selector de signo
querySelectorAll () Devuelve todos los objetos de elemento selector

<Div clase = " caja " > 123 </ div> 
   <div clase = " caja " > 456 </ div> 
   <script> var Grupo Cajas = document.getElementsByClassName ( ' Box ' ); 
       las console.log (boxs); // 2.querySelector () devuelve el primer elemento de un selector de objeto, que selector requiere atención signo más
        // 3.querySelectorAll () devuelve todo elemento selector objetos var NUM = document.querySelector ( ' .box ' ); 
       la console.log (NUM); </ script>

4. Obtener elementos especiales (cuerpo o etiquetas HTML)

La obtención de document.body cuerpo;

Obtiene html document.documentElement;

Evento tres elementos:

Origen del evento, tipo de evento, controladores de eventos

<El botón de lo anterior Identificación del mencionado = " Bot " > El ligar </ el botón> 
   <script> // implementar cuadro de diálogo emergente, haga clic en el botón
        // evento Objeto 1. origen de evento que se activará en aquí para el botón var BTN = document.getElementById ( ' Bot ' );
        // 2. cómo activar este tipo de tiempo de evento es un clic de ratón o ratón sobre, etc. 
       btn.onclick = function () { // implementos pop-up de diálogo Académico clics de ratón 
           de alerta ( ' Académico ' ); 
       } < / script>

paso eventos

1. Obtener el origen del evento

2. Dar de alta (acontecimiento de unión) evento

3. Añadir el (programa de asignación de funciones teniendo) gestor de eventos

js El DOM puede editar el contenido, la estructura y el estilo de la estructura de web, se puede utilizar para modificar los elementos de mando DOM en el interior del elemento de contenido, atributos, etc.

Cambiar el contenido de elementos:

contenido element.innerText desde la posición inicial a la posición final, pero su etiqueta HTML se elimina. Mientras tanto los espacios y saltos de línea serán eliminados

element.innerHTML posición inicial a la posición final de todo el contenido, incluyendo etiquetas HTML, conservando espacios y saltos de línea

<Body> 
  <el botón> muestra la hora actual del sistema </ el botón> 
  <div> Tiempo </ div> 
  <script> // lograr div clic en el botón en el texto en la hora actual
       // 1. Obtener elementos var BTN = document.querySelector ( ' Botón ' );
       var div = document.querySelector ( ' div ' );
       // 2. evento de registro 
      btn.onclick = function () { 
          div.innerText = getDate (); // si la frase no es una función, la después de la renovación directamente fuera de tiempo, no haga clic en el botón

}

      getDate función () {
           var FECHA = new new una Fecha ();
           var año = el Date.getFullYear ();
           var meses El Date.getMonth = () + 1. ;
           var una fecha = Date.getDate ();
           var Día = Date.getDay () ;
           var RRA = [ " Domingo " , " Lunes " , " Martes " , " Miércoles " , " Miércoles " , " Jueves " , "Viernes ' ' Sábado ' ];
           retorno  ' hoy ' + años + ' en ' + + El mes ' mayo ' + + a fechas ' Día ' + arr [Día]; 
      }
   </ script> 
</ body>

Diferencia innerText (no estándar) y innerHTML (estándar W3C, más comúnmente utilizados) de

① la antigua no identifica la etiqueta html, que identifican

<Div> </ div> 
  <script> var div = document.querySelector ( ' div ' ); 
      div.innerText = ' <strong> Hoy: </ strong> 2019 ' ; // salida <strong> Hoy: </ strong> 2019 
      div.innerHTML = ' <strong> hoy: </ strong> 2019 ' ; // prensa sobre la salida del efecto 
  </ script>

② Ambas propiedades se leen y escriben, se puede obtener el interior etiqueta de contenido

<P> 
      I texto
       <span> 345 </ span> 
  </ P> 
  <Script> var P = document.querySelector ( ' P ' ); 
      la console.log (p.innerText); // I texto 345 
      Console. log (p.innerHTML); / * I texto 
                                 <span> 345 </ span> * / 
  </ script>

propiedades de los elementos Modificar

Supongo que te gusta