JavaScript 中最常见的 BOM对象 详解
程序员文章站
2022-07-06 16:47:19
一.BOM对象1.BOM简述作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）window对象-----BOM对象。2.消息框函数名描述alert()显示带有一段消息和一个确认按钮的警告框。confirm()显示带有一段消息以及确认按钮和取消按钮......
一.BOM对象
1. BOM简述
作用：用来执行浏览器的相关操作。（例如：浏览器的地址、弹出消息等）
window对象-----BOM对象。
2.消息框
|
函数名 |
描述 |
|
alert() |
显示带有一段消息和一个确认按钮的警告框。
|
|
confirm() |
显示带有一段消息以及确认按钮和取消按钮的确认框。
确认框： 确定返回true 取消返回false |
|
prompt() |
显示可提示用户输入的提示框。
点击确定获得用户输入数据 |
代码:
<script>
//警告框，用来警告和提示
//alert("xxx");
//带提示的输入框
//点击确定： 返回用户输入的信息
//点击取消： 返回null
/*var xx = prompt("请输入用户名：");
alert(xx);*/
//确认框
//点击确定：返回true
//点击取消：返回false
var x = confirm("是否删除？");
alert(x);
</script>
3. location对象
location 对象包含浏览器 地址栏 的信息。
代码:
<script>
function run1(){
alert(location.href);
}
function run2(){
//内网路径： 相对、绝对
//外网路径：http://
location.href="demo.html";
}
</script>
</head>
<body>
<input type="button" value="点我获取当前地址" onclick="run1()"/>
<input type="button" value="点我设置当前地址" onclick="run2()"/>
<a href="demo.html">demo</a>
</body>
4. history对象（了解）
历史列表对象
代码:
<script>
function run1(){
history.forward();//history.go(1);
}
</script>
</head>
<body>
<h1>demo1</h1>
<a href="demo2.html">demo2</a>
<input type="button" value="前进" onclick="run1()"/>
</body>
<script>
function run1(){
history.back();//history.go(-1);
}
</script>
</head>
<body>
<h1>demo2</h1>
<a href="demo1.html">demo1</a>
<input type="button" value="后退" onclick="run1()"/>
</body>
二. 操作元素的内容体-innerHTML
|
属性名 |
属性说明 |
|
元素对象.innerHTML |
获取某个元素的内容体信息
|
|
元素对象.innerHTML=值 |
设置某个元素的内容体信息 |
代码:
<script>
function run1(){
//1、获取font标签对象
var f1 = document.getElementById("f1");
//2、对象.innerHTML获取内容体
alert(f1.innerHTML);
}
function run2(){
//1、获取font标签对象
var f1 = document.getElementById("f1");
//2、设置标签内容体
f1.innerHTML = "<b><i>今天天气不错，拉开吧</i></b>";
}
function run3(){
//1、获取font标签对象
var f1 = document.getElementById("f1");
//2、设置标签内容体
f1.innerHTML += "<b><i>今天天气不错，拉开吧</i></b>";
}
</script>
</head>
<body>
<font id="f1" color="blue" size="7">今天窗帘拉上了</font><br/>
<input type="button" value="点击获取font标签的内容体" onclick="run1()"/><br/>
<input type="button" value="点击设置font标签的内容体" onclick="run2()"/><br/>
<input type="button" value="点击追加font标签的内容体" onclick="run3()"/><br/>
</body>
看完恭喜你,又知道了一点点!!!
你知道的越多,不知道的越多!
~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!
注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~
本文地址：https://blog.csdn.net/qq_43705131/article/details/107166373
上一篇： 一颗芯片引发的XR革命
下一篇： eclipse自动补全快捷键设置
推荐阅读