• BOM操作
  • window对象
    • navigator对象
    • history对象
    • location对象
    • 弹框系列
      • 警告框
      • 确认框
      • 提示框
    • 计时器
      • 单次定时
      • 循环定时
• DOM操作
  • 直接查找
    • 通过标签名查找标签
    • 通过class值查找标签
    • 通过id值查找标签
  • 间接查找
  • DOM操作标签
    • 标签命名建议
    • 动态创建一个a标签并添加到页面指定位置
    • 标签设置默认属性
    • 标签设置自定义属性
    • 标签获取和移除指定属性
    • innerText与innerHTML
  • DOM获取值操作
  • 属性操作
    • 类属性操作
    • 样式操作
  • 事件
    • 给标签绑定事件的两种方法
  • 事件案例
    • 数据校验
    • 搜索框案例
    • 省市联动案例

BOM操作

Browser Object Model是指浏览器对象模型。通过BOM，JavaScript能与浏览器进行交互

window对象

一些常用的Window方法：
window.innerHeight 浏览器窗口的内部高度
window.innerWidth 浏览器窗口的内部宽度
window.open() 打开新窗口
window.close() 关闭当前窗口

window.innerHeight
window.innerWidth
window.open('https://taobao.com')  //打开新标签
window.open('https://taobao.com','','width=300,height=300')  //打开子标签
window.close()  //只能关闭自己新建的窗口

navigator对象

navigator.appName　 　Web浏览器全称
navigator.appVersion　　 Web浏览器厂商和版本的详细字符串
navigator.userAgent　 客户端绝大部分信息
navigator.platform　　　 浏览器运行所在的操作系统

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36'
navigator.platform
'Win32'

history对象

window.history.forward() 前进一页
window.history.back() 后退一页

window.history.back()

location对象

window.location.href 获取页面的url地址
window.location.reload() 刷新页面
window.location.href = url 跳转到指定页面

window.location.href
window.location.reload()
window.location.href = 'https://www.baidu.com/'

弹框系列

警告框

alert("请关闭ad_block插件")

确认框

confirm('请确认您的用户邮箱是否正确')
获取用户是点击取消还是确认，返回false和true

提示框

prompt('注册成功')
获取用户输入的内容，也可通过第二个参数添加默认内容

计时器

单次定时

var t = setTimeout(showMsg,9000) 9秒钟之后自动执行showMsg
clearTimeout(t) 取消定时器

循环定时

var s = setInterval(showMsg,3000) 每隔3秒执行一次
clearInterval(s) 取消定时器

function showMsg() {
  alert('欢迎来到淘多多购物网')
  }
var t = setInterval(showMsg,3000)
function clearMsg() {
  clearInterval(t)
}
setTimeout(clearMsg, 12000)

DOM操作

Document Object Model是指文档对象模型，通过它可以操作HTML文档的所有元素
但是HTML页面上有很多相同的标签 所以我们在操作HTML标签之前还要先学会如何查找标签(js查找标签)

直接查找

通过标签名查找标签

document.getElementsByTagName('div') 数组套标签对象

通过class值查找标签

document.getElementsByClassName('c1') 数组套标签对象

通过id值查找标签

document.getElementById('d1') 标签对象本身

    
    


    
div1
        div1>span1
    
    
div2
        

            div2>p1
        
    
    
div3
        
            div3>span2
        
    
    
p2
    span3

document.getElementsByTagName('span')
document.getElementsByTagName('div')]
document.getElementsByClassName('c1')
document.getElementsByClassName('c2')
document.getElementById('d5')
document.getElementById('d1')

间接查找

parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
提示：方法得出的标签对象还可以继续点击上述方法

var d3Element = document.getElementById('d3')
d3Element.parentElement
d3Element.parentElement.nextElementSibling.children
d3Element.parentElement.nextElementSibling.nextElementSibling.nextElementSibling

DOM操作标签

标签命名建议

在给标签起变量名的时，因为该变量指向的是一个标签，建议使用xxxEle格式
eg:

动态创建一个a标签并添加到页面指定位置

var aEle = document.createElement('a')  // 创建a标签
aEle.href = 'https://www.jd.com/'  // 设置href属性
aEle.innerText = '点击跳转京东'   // 设置文本内容
var brEle = document.createElement('br')  //创建br标签
var divEle = document.getElementById('qaq')  // 查找标签
divEle.append(brEle)  //di内部追加br标签
divEle.append(aEle)  // div标签内部追加标签

标签设置默认属性

比如id，class等设置的时候可以直接通过点的方式
divEle.id = 'd1'

标签设置自定义属性

比如username，password等设置的时候需要使用setAttribute
divEle.setAttribute('username','trump')
注意：
setAttribute()既可设置自定义属性也可设置默认属性

标签获取和移除指定属性

divEle.getAttribute("age") 获取指定属性
divEle.removeAttribute("age") 移除指定属性

innerText与innerHTML

获取值的时候
innerText只会获取文本内容
innerHTML获取文本和标签
设置值的时候
innerText不识别标签语法
innerHTML识别标签语法

DOM获取值操作

1.获取普通值数据
例如：input、option、textarea等
标签对象.value
2.获取文件数据
标签对象.value 只能获取到文件路径
标签对象.files 获取到一个数组，可以通过索引获取具体文件对象

属性操作

类属性操作

样式操作

标签对象.style.属性名
divEle.style.height = '1000px'

事件

达到某个条件就自动触发的功能
eg:
用户点击某个标签弹出警告框 双击某个标签提示信息

给标签绑定事件的两种方法

• 方式1

    
    


    

        ^^点我有惊喜^^
    

  

• 方式2

    
    


    

        ^^点我有惊喜^^
    

  

事件案例

数据校验

获取用户名和密码，校验是否符合，并展示相应提示
办法：给普通按钮绑定一个点击事件，触发校验动作

    
    



    






    

        username:
        
    
    

        password:
        
    
    

        


    
    

搜索框案例

    
    


    

        搜索
    
    

省市联动案例

    
    


省市：
    

    

市区：