En JavaScript, a menudo se obtienen elementos de documento, que es la abreviatura inglesa del modelo de objeto de documento HTML. El modelo de objeto de documento para HTML se basa en la programación del navegador. HTML DOM define una serie de objetos estándar utilizados para HTML, así como métodos estándar para acceder y procesar documentos HTML.
A través del DOM, se puede acceder a todos los elementos HTML, junto con el texto y las propiedades que contienen. El contenido se puede modificar y eliminar, y se pueden crear nuevos elementos. HTML DOM es un lenguaje de programación independiente de la plataforma. Puede ser utilizado por cualquier lenguaje de programación como Java, JavaScript y VBScript.
ChildNodes Devuelve la matriz de todos los elementos infantiles del elemento actual, FirsChild devuelve el primer elemento inferior inferior del elemento actual, LastChild devuelve el último elemento infantil del elemento actual, NextSiBling devuelve el elemento inmediatamente después del elemento actual, NodeValue especifica el elemento de la tabla y el Atributo de lectura de lectura/revisión especifica el nodo principal que representa el elemento anterior, el elemento anterior devuelve el elemento inmediatamente antes del elemento actual.
document.getElementById es un elemento en el documento que tiene un valor de atributo de identificación único especificado. document.getElementBytagName Devuelve una matriz de elementos infantiles con TagName especificado en el elemento actual. HaschildNodes () devuelve un valor booleano que indica si el elemento tiene elementos infantiles. Document.getElementBycClassName es para obtener el elemento de nombre de clase en el documento. document.getElementsByName (ElementName): obtenga el nodo a través del nombre. Del nombre, se puede ver que este método no devuelve un elemento de nodo, sino una matriz de nodos con el mismo nombre. Luego, podemos recorrer el atributo del nodo para obtener un bucle para determinar si es el nodo requerido.
El ancho del navegador que desea obtener es el siguiente:
El ancho de área visible de la página web: document.body.clientwidth
La altura del área visible de la página web: document.body.clientHeight
El ancho de área visible de la página web: document.body.offsetwidth (incluido el ancho de la línea de borde)
La altura del área visible de la página web: document.body.offsetheight (incluido el ancho de la línea de borde)
Ancho de texto completo de la página web: document.body.scrollwidth
Texto completo de la página web: document.body.scrollheight
La página web se implementa en un alto nivel: document.body.scrolltop
La izquierda de la página web que se está implementando: document.body.scrollleft
En la parte principal de la página web: Window.screentop
Izquierda del texto principal de la página web: Window.Screenleft
Resolución de pantalla alta: Window.screen.Height
Ancho de resolución de pantalla: Window.screen.Width
Pantalla disponible en la altura del espacio de trabajo: ventana.screen.availheight
Pantalla disponible en el espacio de trabajo: Window.screen.availwidth
Hablemos de ello en detalle usando una página web de comercio electrónico:
<html> <head> <title> </title> <style> *{margen: 0; Pading: 0;} a {Decoración de texto: ninguna; color: blanco;} a: hover {color: rojo;} ul, li, ol {list-style: none; tamaño de fuente: 13px; color: #fff; line-height: 27px;} img {border: none;} img, input, select, textarae {vertical-align: middle} body {width: 1350px; margen: 0 auto; Font-size: 12px;} ol li a {color: #fff;} #header {width: 1350px; Altura: 37px; Antecedentes: URL (122.png) No se repite; Border-Bottom: 1px Solid #C9C9C9; Line-HEight: 37px;} #Main {width: 1350px; Altura: 504px; Antecedentes: #f8f8;} #left {ancho: 182px; Altura: 500px; Antecedentes:#3D4E64; border-radio: 3px; float: izquierda;} #lunbo {ancho: 1160px; Altura: 300px; Antecedentes:#F8F8; Border-Bottom: 2px Solid #6666666; flotante: correcto; margen: 0 auto; margen-top: 10px; posición: relativa;} #lunbo img {ancho: 1160px; Altura: 300px; Pantalla: ninguno; Posición: Absoluto; índice z: 5; } ul {margen-izquierda: 400px;} ul li {list-style: none; borde: 1px Solid #000; Radio fronterizo: 50%; Ancho: 18px; Altura: 18px; Text-Align: Center; flotante: izquierda; margen-top: 300px; margen-izquierda: 10px; índice z: 15; } </ystye> </head> <body> <div id = "header"> <a href = "#"> <h3> Todas las categorías de productos </h3> </a> </div> <div id = "main"> <Div Id = "Left"> <ol style = "margin-top: 12px; margin-left: 14px;"> <p> e-lector> </a> </p> <p> <a href = "#"> Fire Tablets> </a> </p> <p> <a href = "#"> Kindle e-lecter> </a> </li> <p> <a href = "#"> tableta de fuego> </a> </p> <p> <p> <a href = "#"> Kindle e-lector> </a> </li> <p> <a href = "#"> tableta de fuego> </a> </p> <p> <a href = "#"> kindle e-lecter> </a> </li> <p> <a href = "#"> tableta de fuego> </a> </p> <p> <p> <a href = "#"> </p. <p> <a href = "#"> Tablet de fuego> </a> </p> <p> <a href = "#"> Kindle e-lector> </a> </li> <p> <a href = "#"> Tablet de fuego> </a> </p> <p> <a href = "#"> Kindle e-l. href = "#"> Tableta de fuego> </a> </p> <p> <a href = "#"> Tableta de fuego> </a> </p> <p> <a href = "#"> kindle e-l. Tableta> </a> </p> <p> <a href = "#"> kindle e-lecter> </a> </li> <p> <a href = "#"> tableta de fuego> </a> </p> <p> <a href = "#"> Tablet de fuego> </a> </p> <p> <a href = "#"> Kindle E-Readle <p> <a href = "#"> tableta de fuego> </a> </p> <p> <a href = "#"> tableta de fuego> </a> </p> <p> <a href = "#"> Fire Tablet> </a> </p> <p> <a href = "#"> kindle e-l. Tableta> </a> </p> <p> <a href = "#"> kindle e-lecter> </a> </li> <p> <a href = "#"> tableta de fuego> </a> </p> <p> <a href = "#"> kindle e-e-l. e-lector> </a> </li> <p> <a href = "#"> tableta de fuego> </a> </p> </ol> </div> <div id = "lunbo"> <img src = "1.png"> <img src = "2.png"> <img src = "3.png"> <img src = " src = "5.png"> <ul> <li style = "fondo: rojo" onmouseover = "jin (0)" onMouseOut = "chu (0)"> 1 </li> <li onmouseOver = "jin (1)" onMouseOut = "chu (1)"> 2 </li> <li onMouseOver = "jin (2)" onMouseOut = "CHU (2) <li onMouseOver = "jin (3)" onMouseOut = "chu (3)"> 4 </li> <li onMouseOver = "jin (4)" onMouseOut = "chu (4)"> 5 </li> </ul> </div> <ivi = "Div Id =" pie "> <img src =" 121.gif "/> </div> </diviv> </body <scry" p = document.getElementsBytagName ("img"); l = document.getElementsBytagName ("li"); m = 0 onload = function () {s = setInterval ("kaishi ()", 850)} function kaishi () {for (var i = 0; i <5; i ++) {p [i] .style.display = "Ninguno"; l [i] .style.background = "blanco"} m ++; if (m> = 5) {m = 0;} p [m] .style.display = "bloque"; l [m] .style.background = "rojo"} lunbo.onmouseover = function () {clearInterval (s);} lunbo.onmouseout = function () {s = setInterval ("kaishi ()", 850);} function (hand) {para (var i = 0; i <5; i ++). l [i] .style.background = "blanco"} m ++; if (m> = 5) {m = 0;} p [Hand] .style.display = "bloque"; l [Hand] .style.background = "rojo"} function chu (hand) {m = hand; } </script> </html>El artículo anterior JS opera DOM Elements y obtiene la altura y el ancho del navegador es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.