浏览器抓取网页(Window代表当前浏览器的地址栏代表的是怎样的？)
优采云 发布时间: 2022-03-13 21:07浏览器抓取网页(Window代表当前浏览器的地址栏代表的是怎样的？)
物料清单
窗户
表示整个浏览器的窗口，window也是网页中的一个全局对象
航海家
表示当前浏览器的信息，通过这些信息可以识别不同的浏览器
地点
表示当前浏览器的地址栏信息。您可以通过Location获取地址栏信息，也可以操作浏览器跳转到页面。
历史
表示浏览器的历史，通过它可以操作浏览器的历史
屏幕
表示用户屏幕的信息，通过它可以获取用户显示器的相关信息
航海家
判断浏览器
var ua = navigator.userAgent;
控制台.log(ua);
if(/firefox/i.test(ua)){
alert("你是火狐！！！");
}else if(/chrome/i.test(ua)){
alert("你是 Chrome");
}否则如果(/msie/i.test(ua)){
alert("你是IE浏览器~~~");
}else if("ActiveXObject" in window){
alert("你是IE11，开*敏*感*词*~~~");
}
历史
对象可用于操纵浏览器向前或向后翻页
长度
属性，可以获取链接数作为访问
背部（）
可用于返回上一页，与浏览器的返回按钮相同
向前（）
可以跳转到下一页，和浏览器的前进按钮一样
走（）
1：表示向前跳转一个页面等价于forward()
2：表示向前跳转两页
-1：表示跳回一页
-2：表示跳回两页
可用于跳转到指定页面
它需要一个整数作为参数
地点
该对象封装了浏览器地址栏的信息
如果直接打印位置，可以在地址栏中获取信息
如果直接修改location属性为完整路径，或者相对路径，我们的页面会自动跳转到这个路径，并生成对应的历史记录
位置 = "";
分配（）
location.assign("");
用来跳转到其他页面，效果和直接修改位置一样
重新加载（）
location.reload(true);
用于重新加载当前页面，同刷新按钮
如果在方法中传入一个true作为参数，会强制刷新缓存，刷新页面
代替（）
location.replace("01.BOM.html");
可以用新页面替换当前页面，调用后页面也会跳转
不生成历史记录，不能使用返回键返回
设置间隔（）
一个函数可以每隔一段时间执行一次
范围：
1.回调函数，每隔一段时间就会调用一次
2.每次调用之间的时间，以毫秒为单位
返回值：
返回 Number 类型的数据
此编号用作计时器的唯一标识符
var timer = setInterval(function(){
count.innerHTML = 数字++；
if(num == 11){
//关闭定时器
清除间隔（定时器）；
}
},1000);
clearInterval() 可用于关闭需要定时器的标识符作为参数的定时器方法，该方法将关闭该标识符对应的定时器
多姆
事件
是用户和浏览器之间的交互
例如：单击按钮、移动鼠标、关闭窗口。. .
绑定点击事件
这个与点击事件绑定的函数称为点击响应函数
btn.onclick = 函数（）{
alert("你还在点~~~");
};
加载事件
在整个页面加载后触发
Window 绑定一个 onload 事件
window.onload = 函数（）{
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定点击响应函数
btn.onclick = 函数（）{
警报（“你好”）；
};
};
dom查询
获取按钮对象
var btn = document.getElementById("btn");
编辑按钮文本
btn.innerHTML = "我是按钮";
查找所有 li 节点
var lis = document.getElementsByTagName("li");
查找 name=gender 的所有节点
var 输入 = document.getElementsByName("gender");
如果需要读取元素节点属性，
使用 element.Attribute 名称 示例：element.id element.name element.value 注意：类属性不能这样使用，读取类属性时需要使用 element.className
返回#city 的所有子节点
childNodes 属性将获取所有节点，包括文本节点
var cns = city.childNodes;
children属性可以获取当前元素的所有子元素
var cns2 = city.children;
firstChild 可以获取当前元素的第一个子节点（包括空白文本节点）
var fir = phone.firstChild;
firstElementChild 获取当前元素的第一个子元素
冷杉 = phone.firstElementChild;
内部文本
该属性可以获取元素内部的文本内容
previousElementSibling 获取上一个兄弟元素
var pe = and.previousElementSibling;
文档中有一个属性body，里面保存了对body的引用
var body = document.body;
document.documentElement 保存 html 根标签
var html = document.documentElement;
document.all 代表页面中的所有元素
var all = document.all;
document.querySelector()
var div = document.querySelector(".box1 div");
需要选择器字符串作为参数，可以根据CSS选择器查询元素节点对象
document.querySelectorAll()
box1 = document.querySelectorAll(".box1");
这个方法类似于querySelector()，不同的是它将符合条件的元素封装成一个数组并返回
操作 CSS
修订
element.style.stylename = 样式值
这种名称在 JS 中是非法的。比如background-color需要把这个样式名改成驼色，去掉-，然后-后面的字母大写
如果样式中写了!important，那么此时样式的优先级最高
框1.style.width = "300px";
框1.style.height = "300px";
框1.style.backgroundColor = “*敏*感*词*”；
读
element.style.stylename
框1.style.width
获取元素当前显示的样式
element.currentStyle.style 名称（仅IE浏览器支持）
getComputedStyle() 方法用于获取元素的当前样式。该方法是window的方法，可以直接使用，需要两个参数。
第一种：获取样式的元素
第二种：可以传入一个伪元素，一般为null
该方法返回一个对象，该对象封装了当前元素对应的样式
样式可以通过 object.stylename 读取
获取指定元素当前样式的函数
函数getStyle（obj，名称）{
如果（window.getComputedStyle）{
//普通浏览器方式，带getComputedStyle()方法
返回 getComputedStyle(obj , null)[name];
}别的{
//IE8方式，没有getComputedStyle()方法
返回 obj.currentStyle[名称]；
}
//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
}
可见宽度和高度
客户宽度客户高度
框1.clientWidth
只读，不可修改
没有px，return是一个数字，可以直接计算
元素宽度和高度，包括内容区域和填充
元素的整个宽度和高度
偏移宽度偏移高度
框1.偏移宽度
当前元素的定位父级
偏移父
var op = box1.offsetParent;
抵消
左偏移
当前元素相对于其定位的父元素的水平偏移
偏移顶部
当前元素相对于其定位的父元素的垂直偏移量
滚动区域的宽度和高度
滚动宽度滚动高度
滚动距离
向左滚动
可以得到水平滚动条滚动的距离
滚动顶部
可以得到垂直滚动条滚动的距离
满足scrollHeight - scrollTop == clientHeight 表示垂直滚动条已经滚动到最后
当scrollWidth - scrollLeft == clientWidth 满足时，水平滚动条滚动到最后
日期对象
JS中使用Date对象表示时间
创建一个日期对象
var d = 新日期（）；
创建指定时间对象
日期格式 月/日/年 时:分:秒
var d2 = new Date("2/18/2011 11:10:30");
获取日期（）
获取当前日期对象是天
var date = d2.getDate();
获取日（）
获取当前日期对象是星期几
将返回 0-6 值 0 代表星期日，1 代表星期一
var day = d2.getDay();
获取月份（）
获取当前时间对象的月份
将返回值 0-11 0 表示 1 月 1 日表示 2 月 11 日表示 12 月
var 月 = d2.getMonth();
getFullYear()
获取当前日期对象的年份
var year = d2.getFullYear();
获取时间（）
获取当前日期对象的时间戳
时间戳，指 1970 年 1 月 1 日 0:00:00 GMT
var time = d2.getTime();
日期对象
JS中使用Date对象表示时间
创建一个日期对象
var d = 新日期（）；
创建指定时间对象
日期格式 月/日/年 时:分:秒
var d2 = new Date("2/18/2011 11:10:30");
获取日期（）
获取当前日期对象是天
var date = d2.getDate();
获取日（）
获取当前日期对象是星期几
将返回 0-6 值 0 代表星期日，1 代表星期一
var day = d2.getDay();
获取月份（）
获取当前时间对象的月份
将返回值 0-11 0 表示 1 月 1 日表示 2 月 11 日表示 12 月
var 月 = d2.getMonth();
getFullYear()
获取当前日期对象的年份
var year = d2.getFullYear();
获取时间（）
获取当前日期对象的时间戳
时间戳，指 1970 年 1 月 1 日 0:00:00 GMT
var time = d2.getTime();
数学
由 Math.PI 表示的 Pi
abs() 可以用来计算一个数的绝对值
console.log(Math.abs(-1));
Math.ceil() 可以对数字进行四舍五入，如果有数值小数位自动四舍五入。
Math.floor() 可以对数字进行四舍五入，小数部分会四舍五入
Math.round() 可以对数字进行四舍五入
//console.log(Math.ceil(1.1));
//console.log(Math.floor(1.99));
//console.log(Math.round(1.4));
数学随机（）
可用于生成0-1之间的随机数
生成一个 0-x 之间的随机数
Math.round(Math.random()*x)
在 xy 之间生成一个随机数
Math.round(Math.random()*(yx)+x)
for(var i=0 ; i //console.log(Math.round(Math.random()*10));
//console.log(Math.round(Math.random()*20));
//console.log(Math.round(Math.random()*9)+1);
//console.log(Math.round(Math.random()*8)+2);
//生成一个1-6之间的随机数
console.log(Math.round(Math.random()*5+1));
}
max() 可以得到多个数的最大值
min() 可以得到多个数字中的最小值
var max = Math.max(10,45,30,100);
var min = Math.min(10,45,30,100);
Math.pow(x,y) 返回 x 的 y 次幂
console.log(Math.pow(12,3));
Math.sqrt() 用于取数字的平方根
console.log(Math.sqrt(2));
