In JavaScript, Document document elements are often obtained, which is the English abbreviation of the HTML document object model. Document Object Model for HTML is based on browser programming. HTML DOM defines a series of standard objects used for HTML, as well as standard methods for accessing and processing HTML documents.
Through the DOM, all HTML elements can be accessed, along with the text and properties they contain. The contents can be modified and deleted, and new elements can be created. HTML DOM is platform-independent and programming language. It can be used by any programming language such as Java, JavaScript, and VBScript.
childNodes returns the array of all child elements of the current element, firsChild returns the first lower child element of the current element, lastChild returns the last child element of the current element, nextSibling returns the element immediately following the current element, nodeValue specifies the table element, and the read/write attribute parentNode specifies the parent node representing the element previousSibling returns the element immediately before the current element.
document.getElementById is an element in the document that has a specified unique ID attribute value. document.getElementByTagName returns an array of child elements with specified tagname in the current element. hasChildNodes() returns a boolean value indicating whether the element has child elements. document.getElementBycClassName is to get the class name element in the document. document.getElementsByName(elementName): Get the node through name. From the name, it can be seen that this method returns not a node element, but an array of nodes with the same name. Then, we can loop through the node's attribute to obtain a loop to determine whether it is the required node.
The width of the browser you want to get is as follows:
The visible area width of the web page: document.body.clientWidth
The visible area height of the web page: document.body.clientHeight
The visible area width of the web page: document.body.offsetWidth (including the width of the edge line)
The visible area height of the web page: document.body.offsetHeight (including the width of the edge line)
Full text width of the web page: document.body.scrollWidth
Full text of the web page: document.body.scrollHeight
The web page is rolled out at a high level: document.body.scrollTop
The left of the web page being rolled out: document.body.scrollLeft
On the main part of the web page: window.screenTop
Left of the main text of the web page: window.screenLeft
High screen resolution: window.screen.height
Width of screen resolution: window.screen.width
Screen Available Workspace Height: window.screen.availHeight
Screen Available Workspace Width: window.screen.availWidth
Let’s talk about it in detail using an e-commerce webpage:
<html> <head> <title></title> <style> *{ margin:0; padding:0;} a{ text-decoration:none; color:white;} a:hover{color:red;} ul,li,ol{list-style:none; font-size:13px; color:#fff;line-height:27px;} img{border:none;} img,input,select,textarae{vertical-align: middle} body{ width:1350px; margin:0 auto; font-size:12px;} ol li a{color:#fff;} #header{width:1350px; height:37px; background:url(122.png) no-repeat; border-bottom:1px solid #c9c9c9; line-height:37px;} #main{width:1350px; height:504px; background:#f8f8;} #left{width:182px; height:500px; background:#3d4e64; border-radius:3px;float:left;} #lunbo{width:1160px; height:300px; background:#f8f8; border-bottom:2px solid #666666; float:right; margin:0 auto; margin-top:10px; position:relative;} #lunbo img{width:1160px; height:300px; display:none; position:absolute; z-index:5; } ul{margin-left:400px;} ul li{ list-style:none; border:1px solid #000; border-radius:50%; width:18px; height:18px; text-align:center; float:left; margin-top:300px; margin-left:10px; z-index:15; } </style> </head> <body> <div id="header"><a href="#"><h3>All product categories</h3></a></div> <div id="main"> <div id="left"> <ol style="margin-top:12px; margin-left:14px;"> <p><a href="#">Kindle e-reader></a></p> <p><a href="#">Fire tablets></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Kindle e-reader></a></li> <p><a href="#">Fire Tablet></a></p> </ol> </div> <div id="lunbo"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <ul> <li style="background:red"onmouseover="jin(0)"onmouseout="chu(0)">1</li> <li onmouseover="jin(1)"onmouseout="chu(1)">2</li> <li onmouseover="jin(2)"onmouseout="chu(2)">3</li> <li onmouseover="jin(3)"onmouseout="chu(3)">4</li> <li onmouseover="jin(4)"onmouseout="chu(4)">5</li> </ul> </div> <div id="footer"><img src="121.gif"/></div> </div> </body> <script> 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="none"; l[i].style.background="white" } m++; if(m>=5){m=0;} p[m].style.display="block"; l[m].style.background="red" } lunbo.onmouseover=function(){clearInterval(s);} lunbo.onmouseout=function(){s=setInterval("kaishi()",850);} function jin(hand){ for(var i=0;i<5;i++){ p[i].style.display="none"; l[i].style.background="white" } m++; if(m>=5){m=0;} p[hand].style.display="block"; l[hand].style.background="red" } function chu(hand){ m=hand; } </script></html>The above article Js operates DOM elements and obtains browser height and width is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.