HTML DOM中一些常用的对象、属性和方法

最新推荐文章于 2022-05-23 17:07:37 发布

钱多多666

最新推荐文章于 2022-05-23 17:07:37 发布

阅读量416

点赞数

文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/weixin_44519237/article/details/111824805

版权

HTML DOM中一些常用的对象、属性和方法

常用的重要对象

Window对象
Navigator 对象
Screen 对象
History 对象
Location 对象

Window对象中常用的属性和方法

window对象指得就是当前网页的整个页面。

属性

window.frames.length 		//窗口中的元素个数

通过window.frames可以获取当前网页中所有元素（标签）的集合，集合的长度就是所有元素的个数。

方法

window.alert();				//警告框
window.confirm();			//确认框
window.prompt();			//提示框

这是window对象用的比较多的三个方法，通过这些方法可以在网上中进行弹窗操作。

这是确认框

var b = window.confirm("确定？");

在这里插入图片描述这是警告框

window.alert("yes");

在这里插入图片描述这是提示框

window.prompt("账号：");

在这里插入图片描述

Navigator对象中常用的属性

window对象指得就是当前使用的浏览器。

属性

navigator.appCodeName 			//浏览器的代码名
navigator.appName 				//浏览器的名称
navigator.appVersion 			//浏览器平台和版本信息
navigator.browserLanguage 		//浏览器的语言
navigator.platform 				//浏览器的编译平台
navigator.userAgent 			//客户机发送服务器的用户表头

我们平时使用的浏览器各不相同，有Chrome，有火狐，有IE等等，版本也都不一样，型号和版本的差异，可能会导致对我们写的HTML网页不兼容，所以我们提供通过Navigator对象来获取浏览器的信息，然后进行判断，可以有效的处理不兼容问题。

	document.write(navigator.appCodeName+"<br/>");
    document.write(navigator.appName+"<br/>");
    document.write(navigator.appVersion+"<br/>");
    document.write(navigator.platform+"<br/>");
    document.write(navigator.browserLanguage+"<br/>");
    document.write(navigator.userAgent+"<br/>");

在这里插入图片描述

Screen对象中常用的属性

screen对象指得就是当前使用的显示器屏幕。

属性

screen.width 				//显示器屏幕宽度
screen.height 				//显示器屏幕高度
screen.availWidth 			//显示器屏幕可用宽度 (除 Windows 任务栏之外)
screen.availHeight 			//显示器屏幕可用高度 (除 Windows 任务栏之外)

我们可以通过以上方法获取显示器屏幕的宽高长度
在这里插入图片描述另外，平时我们除了需要获取显示器屏幕的宽度长度，我们也常常需要获取网页的宽度长度，那么我们就需要用到这两条代码：

window.innerWidth 			//网页宽度
window.innerHeight 			//网页高度

在这里插入图片描述
随着我们拖动网页的大小，数值会发生相应变化

Screen对象中常用的方法

History对象指得就是网页的历史信息，通过这些历史信息，我们可以实现网页的前进和后退，我们平时使用的浏览器中都有下图中的按钮，这些按钮就是通过对历史信息的操作来实现的。
在这里插入图片描述

方法

window.history.back(); 			//后退一步
window.history.forward(); 		//前进一步
window.history.go(n);			//前进或后退指定步数

我们可以自己创建按钮元素，通过点击事件来调用前进后退的方法。

<body>
    <button onclick=forward()>前进</button>
    <button onclick=back()>后退</button>
    <button onclick=forward2()>前进两步</button>
    <button onclick=back2()>后退两步</button>
</body>
<script>
    function forward(){
        window.history.forward();
    }
    function back(){
        window.history.back();
    }
    function forward2(){
        window.history.go(2);
    }
    function back2(){
        window.history.go(-2);
    }
</script>

在这里插入图片描述

网页中的前进和后退按钮就是通过back()和forward()方法实现的。
其中go()方法中传入的参数可以为正数，也可以是负数。正数代表前进n步，负数代表后退n步。

Location对象中常用的属性和方法

location对象指得就是当前网页信息。

属性

Location 对象属性和方法

window.location.href 			//设置或返回网页地址

我们可以通过该属性来获取当前网页的网址信息，可可以通过该属性设置网站的信息。

属性

window.location.reload() 		//刷新网页

我们可以通过该方法来进行刷新网页，平时浏览器中的刷新按钮就是通过该方法实现的。

<body>
    <button onclick="window.location.href='http://www.baidu.com'">点击跳转到百度</button>
    <button onclick="window.location.reload()">刷新</button>
    <script type="text/javascript">
        document.write("<br/>当前地址："+window.location.href);
    </script>
</body>

在这里插入图片描述