Manipulación de elementos HTML a través de JavaScript
Este artículo discutirá manipulación de elementos HTML a través de Javascript. También explicaremos el procedimiento para agregar elementos HTML, agregar elementos HTML, cambiar el contenido de los elementos HTML, encontrar y obtener elementos HTML y eliminar elementos HTML y sus nodos infantiles. Además, los ejemplos relacionados con AppendChild (), InsertBore (), InnerHTML Propiedad, GetElementById (), GetElementByClassName (), QuerySelectorAll (), remove () y eliminar los métodos. Entonces, comencemos!
Cómo agregar elementos HTML a través de JavaScript usando el método AppendChild ()
El método JavaScript appendChild () se utiliza para agregar un elemento HTML como el hijo del nodo principal especificado. Este método se utiliza para mover elementos HTML.
Sintaxis del método appendchild ()
parentnode.appendChild (niendo);Aquí el parentnode es el elemento html que queremos declarar como padre, mientras que el nodo infantil ¿El elemento HTML recién creado se agregó al nodo principal?.
Ejemplo: Cómo agregar elementos HTML a través de JavaScript usando el método appendChild ()
En este ejemplo, le mostraremos cómo usar el "añadir Niño()Método para agregar los elementos HTML a través de JavaScript. En primer lugar, agregaremos un encabezado y un párrafo usando el
y
Elementos HTML:
Esto es linuxhint.comunicarse
Agregar elementos HTML a través de JavaScript.
Este es el párrafo principal.
Este es el segundo párrafo.
En el siguiente paso, crearemos un nuevo
elemento "párrafo"Al utilizar el"createElement ()"Método del objeto de documento:
Ejecute el programa anterior en su editor de código favorito o en cualquier Sandbox de codificación en línea; Sin embargo, utilizaremos el JSBIN para este propósito:
Como puede ver en la salida dada a continuación, se agrega un nuevo elemento HTML que tiene el contenido de texto "Este es un nuevo nodo":
Cómo agregar elementos HTML a través de JavaScript usando el método InsertBore ()
Si desea agregar un elemento HTML como un nodo infantil antes del nodo especificado, puede invocar el "insertBefore ()"Método JavaScript.
Sintaxis del método insertMethod ()
parentnode.insertBefore (NewNode, EXISTNODE);Aquí el "nodo"Es el elemento HTML recién creado que desea agregar", "existente"Es el elemento antes del cual insertará su elemento HTML y el"parentnode"¿Es el elemento HTML que ha especificado como el nodo principal.
Ejemplo: cómo agregar elementos HTML a través de JavaScript usando el método InsertBefore ()
En el ejemplo anterior, hemos utilizado el método appendChild () para agregar el nuevo elemento HTML como el último hijo del HTML principal. Sin embargo, también puede usar el JavaScript "insertBefore ()Método para agregar un elemento HTML antes del elemento especificado. El ejemplo a continuación le enseñará el uso de "insertBefore ()" método.
En primer lugar, agregaremos un encabezado y algunos párrafos de la siguiente manera:
Esto es linuxhint.comunicarse
Agregar elementos HTML a través de JavaScript.
Este es el párrafo principal.
Este es el segundo párrafo.
A continuación, crearemos un nuevo elemento "párrafo"Elemento HTML, y luego defina un nodo de texto infantil para él:
La ejecución del programa anterior agregará el "párrafo"Html antes"P1":
Cómo cambiar el contenido de los elementos HTML a través de JavaScript utilizando la propiedad InnerHTML
El HTML DOM le permite cambiar el contenido HTML utilizando el "innerhtml" propiedad. El "innerhtml"Se usa generalmente en páginas web para generar contenido HTML dinámico, como formularios de comentarios, formularios de registro y enlaces.
Sintaxis de la propiedad JavaScript innerhtml
elemento.innerhtml = valorAquí, "elemento"Es el elemento HTML que ha seleccionado para cambiar su contenido y"valor"¿Es el contenido que estableceremos.
Ejemplo 1: Cambiar el contenido de los elementos HTML a través de JavaScript
Este ejemplo le mostrará cómo usar el "innerhtml"Propiedad JavaScript para modificar el contenido de un elemento HTML. En primer lugar, agregaremos un elemento de encabezado con el
etiqueta de encabezado y un párrafo con el
Etiqueta HTML:
Cambiar elementos HTML usando JavaScript
Una cadena de prueba
Ahora, queremos cambiar el contenido del ""Elemento tiene la identificación"P1". Para hacerlo, utilizaremos el "documento.método getElementById () "para obtener el elemento especificado. Después de eso, estableceremos el contenido de nuestro
elemento a "Esto es linuxhint.comunicarse":
Hemos cambiado el contenido del párrafo anterior
Consulte la salida dada a continuación, que obtuvimos al ejecutar el programa anterior:
Cómo encontrar y obtener elementos HTML por ID a través de JavaScript
La mayoría de los desarrolladores de JavaScript utilizaron el getElementById () Método para encontrar y obtener elementos HTML que tengan identificaciones únicas. Si ha pasado una ID que no pertenece a ningún elemento HTML, el método getElementById () mostrará el valor nulo.
Sintaxis del método GetElementById ()
documento.getElementById (ElementId)Aquí el "elemento"Representa la identificación única del elemento HTML que desea encontrar y obtener en su código JavaScript.
Ejemplo: Busque y obtenga elementos HTML por ID a través de JavaScript
En el siguiente ejemplo, agregaremos elementos HTML, como un encabezado con el
etiqueta y tres elementos de párrafo con el
etiqueta. Tenga en cuenta que también hemos agregado "IDS"Con los elementos del párrafo:
Esto es linuxhint.comunicarse
Encuentre y obtenga elementos HTML por ID en JavaScript
Este es un programa JavaScript que utiliza el método "getElementsByID"
En el siguiente paso, encontraremos y obtendremos el elemento que tiene la identificación "P1"Al usar el"documento.getElementById ()" método. Después de Ding So, cambiaremos el contenido del elemento HTML recuperado:
Cómo encontrar y obtener elementos HTML por classname a través de JavaScript
El "getElementsByClassName ()El método se utiliza para encontrar y obtener elementos HTML que tengan la misma clase. Cuando intenta obtener un elemento HTML utilizando el nombre de la clase, el intérprete JavaScript devolverá todos los objetos que pertenecen a la misma clase. Después de eso, puede realizar operaciones específicas en esos elementos HTML.
Sintaxis del método GetElementsByClassName ()
documento.GetElementsByClassName (ClassName)Aquí el "nombre de la clase"Representa el nombre de clase de los elementos HTML que debe encontrar y obtener en su programa.
Ejemplo: Busque y obtenga elementos HTML por classname a través de JavaScript
En el siguiente ejemplo, hemos agregado un encabezado y algunos elementos de párrafo con el nombre de clase "C1":
Esto es linuxhint.comunicarse
Encuentre y obtenga elementos HTML por nombre de clase en JavaScript
texto en el primer párrafo
texto en el segundo párrafo
A continuación, buscaremos los elementos HTML que tienen "C1"Como su clase utilizando el método GetElementsByClassName () y almacenará las colecciones de los objetos en" "a":
Aquí está el resultado que obtuvimos al ejecutar el programa JavaScript anterior:
Cómo encontrar y obtener elementos HTML por el selector CSS a través de JavaScript
En html, el QuerySelectorAll () El método devuelve un objeto nudelista estático que comprende una colección de los elementos infantiles de un elemento coincidente con los selectores CSS especificados. Los números de índice se utilizan para encontrar y obtener los nodos, comenzando en 0.
Sintaxis del método QuerySelectorAll ()
elemento.QuerySelectorAll (selectores)El método QuerySelectorAll () toma "selectores"Como argumento; Una cadena DOM comprende uno o más selectores CSS válidos.
Ejemplo: Busque y obtenga elementos HTML por selector CSS a través de JavaScript
En el programa JavaScript otorgado a continuación, hemos utilizado el método QuerySelectorAll () para encontrar y obtener los elementos HTML del párrafo que tienen "C1"Como nombre de clase:
Esto es linuxhint.comunicarse
Encuentre y obtenga elementos HTML por nombre de clase en JavaScript
texto en el primer párrafo
texto en el segundo párrafo
Consulte la salida del método JavaScript QuerySelectorAll ():
La ejecución del programa JavaScript anterior mostrará el siguiente resultado:
Cómo eliminar los elementos HTML a través de JavaScript usando el método DeMem ()
El javascript "eliminar()El método se utiliza para eliminar el elemento HTML especificado del modelo de objeto de documento (DOM).
Sintaxis del método remove ()
nodo.eliminar()Aquí, "nodo"Representa el elemento HTML que desea eliminar a través de JavaScript.
Ejemplo: Eliminar elementos HTML a través de JavaScript usando el método de remove ()
En el siguiente, hemos agregado un elemento HTML de encabezado, un párrafo
y un elemento que comprende dos párrafos y como nodos infantiles:
Esto es linuxhint.comunicarse
Agregar elementos HTML a través de JavaScript.
Este es el párrafo principal.
Este es el segundo párrafo.
A continuación, agregaremos un botón y adjuntaremos un "al hacer clic" controlador de eventos. Según el siguiente código, cuando haremos clic en el "Eliminar elemento"Botón, invocará el"myFunction ()" método:
En el "myFunction ()"Método, en primer lugar, utilizamos el"documento.GetElementByid"Para encontrar el elemento que queremos eliminar especificando su"identificación", Entonces invocaremos el"eliminar()" método:
La salida dada por debajo significa que "P1"HTML se elimina de nuestro programa JavaScript con la ayuda del"eliminar()" función:
Cómo eliminar los elementos HTML infantiles a través de JavaScript utilizando el método RemoVeChild ()
En JavaScript, el "removechild ()"Se utiliza para eliminar un nodo HTML infantil específico de un elemento HTML.
Sintaxis del método RemoVeChild ()
parentnode.RemoVCHILD (NiDNODE)Aquí, el ParentNode es el elemento HTML que hemos especificado como un "padre"Nodo, y ChildNode es el elemento HTML que queremos eliminar del elemento principal.
Eliminar elementos HTML infantiles a través de JavaScript usando el método removeChild ()
En este ejemplo, intentaremos eliminar el elemento infantil de nuestro elemento HTML definido:
Esto es linuxhint.comunicarse
Agregar elementos HTML a través de JavaScript.
Este es el párrafo principal.
Este es el segundo párrafo.
Para eliminar un elemento infantil, en primer lugar, debe crear un "padre"Elemento HTML y especifique el elemento HTML que actúa como padre en su código JavaScript. En nuestro caso, hemos agregado "div1":
Como puede ver, el elemento infantil del elemento HTML se elimina con éxito:
Conclusión
El modelo de objeto de documento (DOM) en JavaScript es una interfaz de desarrollador que le permite manipular el diseño, la estructura y el contenido de los elementos HTML de su sitio web. Este artículo discutió manipular elementos HTML a través de JavaScript. También hemos explicado el procedimiento para agregar elementos HTML, agregar elementos HTML, cambiar el contenido de los elementos HTML, encontrar y obtener elementos HTML y eliminar elementos HTML y sus nodos infantiles. Además, los ejemplos relacionados con AppendChild (), InsertBefore (), InnerHTML Property, GetElementById (), GetElementsByClassName (), QuerySelectorAll (), remove () y eliminar los métodos también se proporcionan.