JS对浏览器的操作

BOM

对window(浏览器窗口)的操作
window.innerHeight 查看浏览器高度
window.innerWidth 查看浏览器宽度
window.open(‘完整的网页地址’,’ ',‘新建窗口的大小和位置’)新建窗口页面
window.close() 关闭网页
navigator
window.navigator.appname 检测浏览器(一般都是 Netscape)
window.navigator.appVersion 检测浏览器的平台和版本信息
window.navigator.userAgent 检测浏览器的useragnet信息(也是判定是否是一个浏览器登录的一个凭证)
window.navigator.platform 检测浏览器的操作系统和（或）硬件平台
history
window.history.back() 回到上一页
window.history.forward() 跳转下一页
location
window.location.href 获取当前页面的url
window.location.href=url 跳转到指定的url
window.location.reload() 刷新页面

弹出框
alert(‘警告符，没有返回值‘)
confirm(‘提示符,有返回值true,false’)
prompt(‘提示’,‘回答(弹窗后可输入),如果填写则为默认值,如果不填写,为空。’)

计时器
t=setTimeout(方法,时间(1秒=1000)); 多少秒后执行方法(执行一次)
clearTimeout(t); 取消定时任务

function func1() {
    alert(123)
}
let t = setTimeout(func1,3000);  // 毫秒为单位 3秒之后自动执行func1函数

clearTimeout(t)      // 取消定时任务  如果你想要清除定时任务 需要日前用变量指代定时任务

t=setInterval(方法,时间(1秒=1000)); 每隔多少秒后执行一次
clearInterval(t)

function func2() {
    alert(123)
}
function show(){
    let t = setInterval(func2,3000);  // 每隔3秒执行一次
    function inner(){
        clearInterval(t)  // 清除定时器
    }
    setTimeout(inner,9000)  // 9秒中之后触发
}
show()

DOM

所有的标签都可以称之为是节点
直接查找
document.getElementById(‘id’) 通过ID查找
document.getElementByClassName(‘class’)通过类查找
document.getElementByTagName(‘tagname’) 通过标签查找
间接查找
标签.parentElement 拿父节点
标签.children 获取所有子标签
标签.firstElementChild 获取第一个子标签
标签.lastElementChild 获取最后一个子标签
标签.nextElementSibling 同级别下下一个标签
标签.previousElementSibling 同级别下上一个标签

节点操作
document.createElement(‘标签’) 创造标签
标签.setAttribute(‘属性值’,‘属性名’) 为标签添加属性(默认属性和自定义属性都可以添加)
标签.属性值=属性名 给标签设置默认的属性(不能添加自定义的属性)
标签.appendChild(标签) 标签内部添加元素(标签)(尾部添加)
标签.innerText=‘文本内容’ 给标签设置文本内容
外标签.insertBefore(子标签1,子标签2) 添加标签内部指定位置添加
标签.value 获取值(无法获取文件数据)
标签.files 获取文件数据
关于innerText与innerHTML
标签.innerText 获取标签内部所有文本
标签.innerHTML 获取标签内部所有的文本和标签

对标签内部的属性进行操作
标签.classList 获取标签所有的类属性
标签.classList.remove(‘标签内已有属性’) 删除属性
标签.classList.add(‘标签内未有属性’) 增加属性
标签.classList.contains(‘属性’)该属性是否存在
标签.classList.toggle(‘属性’) 有则删除,没有则添加

标签.style.color=‘颜色英文’ 改变颜色
标签.style.fontSize=‘文字大小’ 改变文字大小
……等等 只要css中存在的都可以通过标签.style.css更改

事件(达到某个事先设定的条件 自动触发的动作)

onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

绑定事件的两种方式

< button οnclick=“func1()”>点我< /button>
< button id=“d1”>点我< /button>

< script>
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById(‘d1’);
btnEle.onclick = function () {
alert(222)
}
< /script>

script标签既可以放在head内 也可以放在body内
但是通常情况下都是放在body内的最底部,如果未放在最下面可能会出现明明有属性却未找到的现象，因此推荐这样做！
等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {
// 第一种绑定事件的方式
function func1() {
alert(111)
}
// 第二种
let btnEle = document.getElementById(‘d1’);
btnEle.onclick = function () {
alert(222)
}
}