BOM操作

操作浏览器，需要调用window对象，它是所有浏览器都支持的对象，表示的就是浏览器窗口

window对象可以通过点调用子对象

• window.navigator

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

• window.screen

• window.history

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

• window.location(重点)

  location.href  获取URL
  location.href="URL" // 跳转到指定页面
  location.reload() 重新加载页面

• 弹出框

  警告框(alert)
  确认框(confirm)
  提示框(prompt)

• 计时器相关(重点)

  • setTimeout与clearTimeout(设置单次定时触发，清除)

  • setInterval与clearInterval(循环触发，清除)

    function f1() {
        alert(123);
    }
    
    function clear() {
        var t = setInterval(f1,3000);
        function inner() {
            clearInterval(t);
        }
        setTimeout(inner,9000)
    }
    clear();

DOM操作

通过JS代码操作html页面，实现相应效果

要想操作html页面，实现相应动态效果，第一步还是得先解决查找标签的事情

查找标签

直接查找

document.getElementById
document.getElementsByClassName
document.getElementsByTagName

间接查找

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

js代码在书写时，一定要保证在页面html文件全部加载完毕后才能正常执行，否则报错。两种解决方式

• window.onload = function(里面写js代码)title标签内部
• js写在html文档最下方

节点操作

• 1.创建节点，2.添加自定义属性，3.添加固有属性，4.添加到DOM树中浏览器展示

  // appendChild 直接尾部添加
  
  // 创建标签
  var imgEle = document.createElement('img');
  // 设置自定义属性
  imgEle.setAttribute('id','i1')
  // 设置固有的属性
  imgEle.src = 'longzhu.png'
  // 添加到DOM树中，让浏览器展示出来
  var d1Ele = document.getElementById('d1')
  d1Ele.appendChild(imgEle)

• 1.创建节点，2.添加固有属性和标签文本值，3.指定位置添加标签

  <span>div上面的span</span>
  <div>div
      <p>div里面的第一个p</p>
      <span id="s1">
          div里面的span
      </span>
      <p>div里面的第二个p
          <span>div里面的p里面的span</span>
      </p>
  
  </div>
  <span>div的邻居</span>

  // insertBefore 固定位置添加
  
  // 创建标签
  var aEle = document.createElement("a")
  aEle.href = 'https:www.baidu.com'
  aEle.innerText = '点我点我'
  // 获取参考点标签
  var spanEle = document.getElementById('s1');
  var divEle = document.getElementsByTagName('div')[0];
  // 在d3标签内部，s1标签上方添加创建的a标签
  divEle.insertBefore(spanEle,aEle)

  • innerText和innerHTML的区别

    // 获取一个标签
    var d2Ele = document.getElementById('d2');
    // 仅仅能获取到d2标签的内部文本
    d2Ele.innerText
    // 不仅获取文本，标签页全部获取到
    d2Ele.innerHTML
    
    // 获取标签
    var d2Ele = document.getElementById('d2');
    // 设置内部文本
    d2Ele.innerText = '哈哈'
    d2Ele.innerHTML = '呵呵'
    // 设置内部文本(文本中包含标签)
    d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签
    d2Ele.innerHTML = '<h1>我是h1</h1>' // 能够识别html标签

  1.获取用户输入的操作

  <input type="text">
  <textarea name="" id="t1" cols="30" rows="10"></textarea>

  var inputEle = document.getElementsByTagName('input')[0]
  inputEle.value // 获取到用户输入的值 并且得到用户输入值
  inputEle.value = 'hello world'  // 给input框赋值
  

  • class操作

  <style>
          .c1 {
              width: 400px;
              height: 400px;
              border-radius: 50%;
              border: 3px solid black;
          }
          .bg_red {
              background-color: red;
          }
          .bg_green {
              background-color: green;
          }
      </style>
  <div class="c1 bg_red bg_green"></div>

  // 注意点：通过class获取到的数据是一个数组，需要通过索引拿到单个对象
  
  // 根据class找到相应的标签对象
  var cEle = document.getElementsByClassName('c1')[0]
  // 获取该标签对象的class属性列表并移除背景绿色
  cEle.classList.remove('bg_green')
  
  // 添加属性
  cEle.classList.add('bg-green')
  // 添加属性
  cEle.classList.add('bg-green')
  cEle.classList.contains('bg-red')
  // 有则删除，无则添加
  cEle.classList.toggle('bg-green')
  

  • style样式操作

    // 修改高度样式
    d1Ele.style.height = '200px'
    // 修改宽度样式
    d1Ele.style.width = '200px'
    // 修改背景色样式
    d1Ele.style.backgroundColor = 'blue'

事件绑定

常用事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。         
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

两种绑定事件的方法

• 标签内直接调用相应事件函数
• js代码自动查找标签并绑定事件

(onfocus,onblur)用户输入获取焦点示例

<input type="text" name="" id="inp" value="点击我获取焦点">
<script>
    let inpEle = document.getElementById('inp');
    inpEle.onfocus = function () {  //onfocus 在输入框中获取焦点
        inpEle.value = ''
    };
    inpEle.onblur = function() {
        inpEle.value = '点击我获取焦点'
    }
</script>

(onclick)点击事件案例

<input type="text" name="" id="inp" >
<button id="btn1">开始</button>
<button id="btn2">结束</button>
<script>
    // 定义一个存储定时器的全局变量
    var flag;
    // 先获取代码中需要用到的一些固定标签对象
    var inpEle = document.getElementById('inp');
    var btn1Ele = document.getElementById('btn1');
    var btn2Ele = document.getElementById('btn2');
    // 定义一个展示时间的函数
    var  showTime = function () {
        // 获取当前时间
        var time1= new Date();
        inpEle.value = time1.toLocaleString()
    };
    // 给b1标签绑定点击事件
    btn1Ele.onclick = function () {
         // 先判断flag是否已经指代了一个定时器
        if (!flag){
            flag = setInterval(showTime,1000)
        }

    };
    btn2Ele.onclick = function () {
        // 取消定时器
        clearInterval(flag);
        // 将标志位手动置为布尔值为false的值即可
        flag = null;


    }
</script>

onchange(事件)实现省市联动:

<select name="" id="s1"></select>
<select name="" id="s2"></select>

<script>
    // 先获取需要操作的标签对象
    var s1Ele = document.getElementById('s1');
    var s2Ele = document.getElementById('s2');
    var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
    // 将所有的省渲染到proEle标签内部  for循环获取所有的省
    for (let pro in data){
        // 创建option标签
        let opEle = document.createElement('option');
        // 给option标签设置文本值
        opEle.innerText = pro;
        // 将生成的option标签添加到proEle中
        s1Ele.appendChild(opEle)
    }
    s1Ele.onchange = function () {
        // 先清空cityEle标签内所有的内容
        s2Ele.innerHTML = '';
        // 获取用户选择的省 根据省拿到对应的市
        let choicePro= s1Ele.value;
        let cityList = data[choicePro];
        // for循环创建option标签添加到cityEle标签内
        for (let i =0;i<cityList.length;i++){
            // 创建option标签并添加文本
            let cEle = document.createElement('option');
            // 给option标签设置文本值
            cEle.innerText = cityList[i];
            // 将生成的option标签添加到proEle中
            s2Ele.appendChild(cEle)
        }
        
    }
</script>

window.onload

? 当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

? window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。

? 注意：.onload()函数存在覆盖现象。

Bom与Dom

原文：https://www.cnblogs.com/ZKPython/p/10970419.html