JavaScript中的BOM操作

JavaScript操作浏览器的方法，该方法由浏览器提供，因此需要考虑兼容性

1、提示框/警告框

//输出弹窗
window.alert('弹出警告\n内容如下\'我是警告内容\'')

2、输入框
弹出一个输入框，用于接收输入的数据，其中()内的是提示接受需要输入的内容，
windows.prompt('提示内容')

//提示输入账号
var userName = window.prompt('请输入账号');
//提示输入密码
var userPwd = window.prompt('请输入密码');
console.log(userName,userPwd);

输入的数据,存储的方式是,字符串类型。如果是输入数值,需要计算,必须把数据类型转化为数值
方法1 : parseInt() 获取整数部分

var = res1 = parseInt(window.prompt( '请输入密码' ));
console.log(res1);

方法2 : 执行非加法的不影响数值的运算

//结果减零
var res2 = window.prompt('请输入密码') - 0；
//结果乘1
var res2 = window.prompt('请输入密码') * 1；
//结果除1
var res2 = window.prompt('请输入密码') / 1；

方法3 : 在数值前,添加 + 正号 / - 符号

//- 符号 : 正数获取的负数结果 负数获取的是正数结果
var res2 = -window.prompt('请输入密码')；
console.log(res2)
//+ 正号 : 正数获取的正数结果 负数获取的是负数结果
var res2 = +window.prompt('请输入密码')；
console.log(res2)

3、确认框

window.confirm('提示内容');
点击确定按钮，结果返回为true
点击取消按钮，结果返回为false

//对于操作进行提醒，判断
var res = window.confirm('请问是否要进行删除操作');
console.log(res);

4、转义符
类似于HTML中的字符实体是为了解决输入内容和JavaScript代码的冲突
例如,要在弹框中,实现换行

\n    换行
\'    单引号
\"    双引号
（前三个常用，后面的不常用）
\r    回车
\t    横向跳格 (Ctrl-I)
\\    反斜杠
\f    纵向的间隔

5、获取浏览器的滚动条

获取滚动条即获取浏览器滚动条的高度，宽度。
按有没有文档类型声明：<!DOCTYPE html>

//有声明使用方法
document.documentElement.scrollTop;
//没有使用方法
document.body.scrollTop;

如果获取方式错误，程序不会报错，只是获取的结果是0

var height1 = document.documentElement.scrollTop;
var height2 = document.body.scrollTop;
//其中一个结果为0
console.log(height1 , height2);

示例：

// 浏览器上卷的高度
var height = document.documentElement.scrollTop || document.body.scrollTop
// 浏览器移动的宽度
var width = document.documentElement.scrollLeft || document.body.scrollLeft;
console.log(height , width);

还可以利用属性来设定

// 设定滚动条,移动的宽度和高度
// 直接设定数值就可以,不要加PX
document.documentElement.scrollTop = 500;
document.documentElement.scrollLeft = 500;

JavaScript中的BOM操作

猜你喜欢