前端入门06——BOM与DOM

今日内容概要

• JS结束

  BOM与DOM

今日内容详细

BOM与DOM操作

# 截至目前为止 我们虽然已经学会了js语法 但是你会发现跟浏览器和html文件还是一点关系没有
"""
BOM
        浏览器对象模型  Browser Object Model
        js代码操作浏览器

DOM
       文档对象模型    Document Object Model
        js代码操作标签,  通过它，可以访问HTML文档的所有元素
"""

 

 

BOM操作

window对象

window对象指代的就是浏览器窗口
​
1.window.innerHeight  浏览器窗口的高度
900

2.window.innerWidth   浏览器窗口的宽度
1680
​
3.window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px')
# 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
# 扩展父子页面通信window.opener()  了解
​
4.window.close()  关闭当前页面

window子对象

   navigator对象

window.navigator.appName      Web浏览器全称
"Netscape"

window.navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
​
window.navigator.userAgent      掌握  # 用来表示当前是否是一个浏览器(客户端绝大部分信息)
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"
​
"""
扩展:反爬措施
    1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器
        userAgent
        user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
    如何破解该措施
        在你的代码中加上上面的user-agent配置即可
"""
​
window.navigator.platform       浏览器运行所在的操作系统
"MacIntel"
​
# 如果是window的子对象 那么window可以省略不写

screen对象（了解即可）

屏幕对象，不常用。

一些属性：

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度

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()

　　提示框经常用于提示用户在进入页面前输入某个值。

　　当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵

　　如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null

alert('你不要过来啊！！！')
undefined
​
confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
false
confirm('你确定真的要这么做吗?能不能有其他方式能够满足你...')
true
​
prompt('手牌号给我看一下','22号消费888')
"来宾三位"

计时器相关    

• 过一段时间之后触发(一次)

• 每隔一段时间触发一次(循环)

setTimeout()

语法：

var t=setTimeout("JS语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。

clearTimeout()

语法：

clearTimeout(setTimeout_variable)

举个例子：

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法：

setInterval("JS语句",时间间隔)

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

clearInterval()

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

语法：

clearInterval(setinterval返回的ID值)

举个例子：

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

<script>
    function func1() {
        alert(123)
    }
    let t = setTimeout(func1,3000);  // 毫秒为单位 3秒之后自动执行func1函数
​
    clearTimeout(t)      // 取消定时任务  如果你想要清除定时任务 需要日前用变量指代定时任务
​
​
    function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发
    }
    show()
</script>

DOM操作

"""
DOM树的概念

所有的标签都可以称之为是节点

• 文档节点(document对象)：代表整个文档
• 元素节点(element 对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)　

​
JavaScript 可以通过DOM创建动态的 HTML：
​
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
​
​
DOM操作操作的是标签 而一个html页面上的标签有很多 
    1.先学如何查找标签
    2.再学DOM操作标签
    
DOM操作需要用关键字document起手
"""

查找标签

• 直接查找(必须要掌握)

  """
  id查找
  类查找
  标签查找
  """

• document.getElementById           根据ID获取一个标签
  document.getElementsByClassName   根据class属性获取
  document.getElementsByTagName     根据标签名获取标签合集

  # 注意三个方法的返回值是不一样的
  document.getElementById('d1')
  <div id=•"d1">•…•</div>•
  ​
  document.getElementsByClassName('c1')
  HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection
        
  document.getElementsByTagName('div')
  HTMLCollection(3) [div#d1, div, div, d1: div#d1]
                     
                     
  let divEle = document.getElementsByTagName('div')[1]
  divEle
  <div>•div>div•</div>•
  """
  当你用变量名指代标签对象的时候 一般情况下都推荐你书写成
  xxxEle
      divEle
      aEle
      pEle
  """

• 间接查找(熟悉)

  let pEle = document.getElementsByClassName('c1')[0]  # 注意是否需要索引取值
  ​
  pEle.parentElement  # 拿父节点
  <div id=•"d1">•"div
      "<div>•div>div•</div>•<p class=•"c1">•…•</p>•<p>•div>p•</p>•</div>•
  pEle.parentElement.parentElement
  <body>•…•</body>•
  pEle.parentElement.parentElement.parentElement
  <html lang=•"en">•<head>•…•</head>•<body>•…•</body>•</html>•
  pEle.parentElement.parentElement.parentElement.parentElement
  null
  ​
  let divEle = document.getElementById('d1')
  divEle.children  # 获取所有的子标签
  divEle.children[0]
  <div>•div>div•</div>•
  ​
  divEle.firstElementChild
  <div>•div>div•</div>•
  ​
  divEle.lastElementChild
  <p>•div>p•</p>•
  ​
  divEle.nextElementSibling  # 同级别下面第一个
  <div>•div下面div•</div>•
  ​
  divEle.previousElementSibling  # 同级别上面第一个
  <div>•div上面的div•</div>•

• 节点操作

  """
  通过DOM操作动态的创建img标签
  并且给标签加属性
  最后将标签添加到文本中
  """
  let imgEle = document.createElement('img')  # 创建标签
  ​
  imgEle.src = '111.png'  # 给标签设置默认的属性
  "111.png"
  imgEle
  ​
  imgEle.username = 'jason'  # 自定义的属性没办法点的方式直接设置
  "jason"
  imgEle
  <img src=•"111.png">•
  ​
  ​
  imgEle.setAttribute('username','jason')   # 既可以设置自定义的属性也可以设置默认的书写
  undefined
  imgEle
  <img src=•"111.png" username=•"jason">•
  imgEle.setAttribute('title','一张图片')
  imgEle
  <img src=•"111.png" username=•"jason" title=•"一张图片">•
  ​
  let divEle = document.getElementById('d1')
  undefined
  divEle.appendChild(imgEle)  # 标签内部添加元素(尾部追加)
  <img src=•"111.png" username=•"jason" title=•"一张图片">•
  ​
  ​
  """
  创建a标签
  设置属性
  设置文本
  添加到标签内部
      添加到指定的标签的上面
  """
  let aEle = document.createElement('a')
  ​
  aEle
  <a>•</a>•
  aEle.href = 'https://www.mzitu.com/'
  "https://www.mzitu.com/"
  aEle
  <a href=•"https:•/•/•www.mzitu.com/•">•</a>•
  ​
  aEle.innerText = '点我有你好看!'  # 给标签设置文本内容
  "点我有你好看!"
  aEle
  <a href=•"https:•/•/•www.mzitu.com/•">•点我有你好看!•</a>•
  let divEle = document.getElementById('d1')
  undefined
  let pEle = document.getElementById('d2')
  undefined
  divEle.insertBefore(aEle,pEle)  # 添加标签内容指定位置添加
  <a href=•"https:•/•/•www.mzitu.com/•">•点我有你好看!•</a>•
  ​
  ​
  """
  额外补充
      appendChild()
          removeChild()
          replaceChild()
      
      
      setAttribute()  设置属性
          getAttribute()  获取属性
          removeAttribute()  移除属性
  """
  ​
  # innerText与innerHTML
  divEle.innerText  # 获取标签内部所有的文本
  "div 点我有你好看!
  div>p
  div>span"
  ​
  divEle.innerHTML  # 内部文本和标签都拿到
  "div
          <a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div&gt;p</p>
          <span>div&gt;span</span>
      "
      
  divEle.innerText = 'heiheihei'
  "heiheihei"
  divEle.innerHTML = 'hahahaha'
  "hahahaha"
  ​
  divEle.innerText = '<h1>heiheihei</h1>'  # 不识别html标签
  "<h1>heiheihei</h1>"
  divEle.innerHTML = '<h1>hahahaha</h1>'  # 识别html标签
  "<h1>hahahaha</h1>"

• 获取值操作

  # 获取用户数据标签内部的数据
  let seEle = document.getElementById('d2')
  seEle.value
  "111"
  seEle.value
  "333"
  ​
  let inputEle = document.getElementById('d1')
  inputEle.value
  ​
  # 如何获取用户上传的文件数据
  let fileEle = document.getElementById('d3')
  fileEle.value  # 无法获取到文件数据
  "C:fakepath2_测试路由.png"
  ​
  fileEle.files
  FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList
        
  fileEle.files[0]  # 获取文件数据
  File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}

  class、css操作

  let divEle = document.getElementById('d1')
  undefined
  divEle.classList  # 获取标签所有的类属性
  DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]
  ​
  ​
  divEle.classList.remove('bg_red')  # 移除某个类属性
  undefined
  ​
  divEle.classList.add('bg_red')  # 添加类属性
  undefined
  divEle.classList.contains('c1')  # 验证是否包含某个类属性
  true
  divEle.classList.contains('c2')
  false
  ​
  divEle.classList.toggle('bg_red')  # 有则删除无则添加
  false
  divEle.classList.toggle('bg_red')
  true
  divEle.classList.toggle('bg_red')
  false
  divEle.classList.toggle('bg_red')
  true
  divEle.classList.toggle('bg_red')
  false
  divEle.classList.toggle('bg_red')
  true
  ​
  ​
  ​
  # DOM操作操作标签样式 统一先用style起手
  let pEle = document.getElementsByTagName('p')[0]
  undefined
  pEle.style.color = 'red'
  "red"
  pEle.style.fontSize = '28px'
  "28px"
  pEle.style.backgroundColor = 'yellow'
  "yellow"
  pEle.style.border = '3px solid red'
  "3px solid red"

  事件

  """
  达到某个事先设定的条件 自动触发的动作
  """
  # 绑定事件的两种方式
  <button onclick="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)
              }
          }
  """

  原生js事件绑定​

  我们直接写几个案例，看懂即可

• 开关灯案例

  <div id="d1" class="c1 bg_red bg_green"></div>
      <button id="d2">变色</button>
  ​
      <script>
          let btnEle = document.getElementById('d2')
          let divEle = document.getElementById('d1')
          btnEle.onclick = function () {  // 绑定点击事件
              // 动态的修改div标签的类属性
              divEle.classList.toggle('bg_red')
          }
      </script>

• input框获取焦点失去焦点案例

  <input type="text" value="老板 去吗?" id="d1">
  ​
  <script>
      let iEle = document.getElementById('d1')
      // 获取焦点事件
      iEle.onfocus = function () {
          // 将input框内部值去除
          iEle.value = ''
          //  点value就是获取   等号赋值就是设置
      }
      // 失去焦点事件
      iEle.onblur = function () {
          // 给input标签重写赋值
          iEle.value = '没钱 不去!'
      }
  </script>

• 实时展示当前时间       　　　　

<input type="text" id="d1" style="display: block;height: 50px; 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    // 先定义一个全局存储定时器的变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
    // 1 访问页面之后 将访问的时间展示到input框中
    // 2 动态展示当前时间
    // 3 页面上加两个按钮 一个开始 一个结束
    function showTime() {
        let currentTime = new Date();
        inputEle.value = currentTime.toLocaleString()
    }

    startBtnEle.onclick = function () {
        // 限制定时器只能开一个
        if(!t){
            t = setInterval(showTime,1000)  // 每点击一次就会开设一个定时器 而t只指代最后一个
        }
    }
    endBtnEle.onclick = function () {
        clearInterval(t)
        // 还应该将t重置为空
        t = null
    }
</script>

省市联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<select name="" id="d1">
    <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "河北": ["廊坊", "邯郸",'唐山'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市'],
        '上海':['浦东新区','静安区','黄浦区'],
        '深圳':['南山区','宝安区','福田区']
    };
    // 选for循环获取省
    for(let key in data){
        // 将省信息做成一个个option标签 添加到第一个select框中
        // 1 创建option标签
        let opEle = document.createElement('option')
        // 2 设置文本
        opEle.innerText = key
        // 3 设置value
        opEle.value = key  // <option value="省">省</option>
        // 4 将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    // 文本域变化事件  change事件
    proEle.onchange = function () {
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        // 清空市select中所有的option
        cityEle.innerHTML = ''
        // 自己加一个请选择
        let ss = "<option disabled selected>请选择</option>"
        // let oppEle = document.createElement('option')
        // oppEle.innerText = '请选择'
        // oppEle.setAttribute('selected','selected')
        cityEle.innerHTML = ss

        // for循环所有的市 渲染到第二个select中
        for (let i=0;i<currentCityList.length;i++){
            let currentCity = currentCityList[i]
            // 1 创建option标签
            let opEle = document.createElement('option')
            // 2 设置文本
            opEle.innerText = currentCity
            // 3 设置value
            opEle.value = currentCity  // <option value="省">省</option>
            // 4 将创建好的option标签添加到第一个select中
            cityEle.appendChild(opEle)
        }
    }
</script>
</body>
</html>