This article describes the JavaScript browser object model BOM. Share it for your reference, as follows:
The window object is located at the top level of the BOM hierarchy. It contains some very important child objects, including location, navigation, document, screen, history. The location object contains the URL information of the current page. Some information is read-only, and some information can be read and written, such as the href attribute. We can not only obtain the URL information of the current page through the href attribute, but also modify the href attribute to jump to the new page.
<html>
<body>
<script type='text/javaScript'>
("");
="";
</script>
</body>
</html>
The history object saves the history of the pages the user has visited since he opened the browser. However, some pages will not be recorded, for example, pages loaded using the replace() method of the location object will not be recorded in the history object.
The navigator object represents the browser itself, which contains some very useful information for the browser, such as the version number, browser type, and the operating system used by the user.
The screen object contains information about the display capabilities of the client service.
<html>
<body>
<script type='text/javascript'>
switch(){
case 1:
case 4:
= "white";
break;
case 8:
case 15:
case 16:
= "blue";
break;
case 24:
case 32:
= "skyblue";
break;
default:
= "white";
}
("Your screen supports "+ + " bit color");
</script>
</body>
</html>
A document is one of the most important objects. The document object contains three array properties links[], images[], forms[]. These three arrays represent the collection of all objects created by <A>, <img>, and <form> in the page respectively.
<html>
<body>
<img name=img1 src="images/" border=0 width=200 height=150>
<script type='text/javaScript'>
var myImages = new Array("images/","images/","images/","images/");
var imgIndex = prompt("Enter a number from 0 to 3","");
['img1'].src = myImages[imgIndex];
</script>
</body>
</html>
<html>
<head>
<script type='text/javascript'>
var imagesArray=new Array("images/","images/","images/","images/");
function changeImg(imageNumber){
var newImage = imagesArray[(()*3)];
alert([imageNumber].src);
while([imageNumber].(newImage)!=-1){
newImage = imagesArray[(()*3)];
}
[imageNumber].src = newImage;
return false;
}
</script>
</head>
<body>
<img name='img1' src="images/" width=150 height=200 onclick="return changeImg(0)">
<img name='img2' src="images/" width=150 height=200 onclick="return changeImg(1)">
</body>
</html>
<html>
<head>
<script type='text/javascript'>
function linkPage(){
alert('You Clicked?');
return false;
}
</script>
</head>
<body>
<A href='' name='link' onclick="return linkPage()">
Click Me
</A>
</body>
<script type='text/javaScript'>
['link'].href="";
</script>
<html>
Through these three arrays, you can access the corresponding objects created for the tag. You can modify the page image by modifying the properties of the img object, and change the URL of the hyperlink object by modifying the properties of the hyperlink object.
For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of JavaScript DOM skills》、《Summary of JavaScript replacement operation skills》、《Summary of JavaScript value transfer operation skills》、《Summary of JavaScript encoding operation skills》、《Summary of json operation skills in JavaScript》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.