BOOM和DOOM操作

目录

• BOM
  • window对象
  • window的子对象
    • navigator
    • screen对象
    • history
    • location对象
    • 弹出框
    • 计时相关
      • setTimeout
      • clearTimeout
      • setInterval
      • clearInterval
• DOM
  • HTML DOM树
  • 标签查找
    • 直接查找
    • 间接查找
  • 节点操作
    • 创建节点
    • 添加节点
    • 删除节点
    • 替换节点
    • 属性节点
      • 文本节点
      • attribute操作
      • input标签，select标签，textarea标签获取值
    • class操作
    • 指定css操作
• 事件
  • 事件的两种绑定方式
    • 方式一
    • 方式二
  • 常用事件
  • 事件练习
    • 开关灯示例
    • input获取焦点示例
    • 展示当前时间示例
    • 省市联动示例

BOM

BOM操作指的是浏览器对象模型，它可以是JavaScript可以于浏览器进行对话，在JavaScript中与浏览器交互就是对window对象进行操作

window对象

window对象是客户端JavaScript最高层对象之一，由于window对象是其他大部分对象的共同的祖先，在调用window对象的方法和属性是，可以省略window对象的引用，也就是说window.document.write()可以简写成document.write()

window对象常用的方法：

方法	作用
window.innerHeight	浏览器窗口内部的高度
window.innerWidth	浏览器窗口内部的宽度
window.open	打开窗口
window.close	关闭窗口

window的子对象

navigator

判断用户使用的浏览器

navigator.appName  // 得到用户使用的浏览器全程
navigator.appVersion  // 得到用户使用浏览器的版本和厂商
navigator.userAgent  // 浏览器的大部分信息
navigator.platform  // 浏览器所在的操作系统

screen对象

屏幕对象

screen.availWidth  // 获得屏幕可用的宽度
screen.availHeight  // 获得屏幕可用的高度

history

就是操纵浏览器的前一页和后一页的按钮

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

location对象

可以用于获得当前页面的地址，并把浏览器重定向到新的页面

location.href  // 获取当前页面的地址
location.herf = '目标网页的url'  // 跳转到目标界面
location.reload()  // 重新加载当前页面

弹出框

在JavaScript中有三种消息弹出框：

1. 警告框

   用于确保用户可以得到某些信息，使用alert关键字

   alert('警告信息');
   

2. 确认框

   用于使用户可以验证或接受某些信息，需要用户点击确认或者取消按钮才能继续操作，使用confirm关键字

   confirm('确认信息')
   

3. 提示框

   用于提示用户在进入页面前输入某一个值，需要用户输入信息点击确认或者取消才能继续操作，使用prompt关键字

   prompt('提示信息')
   

计时相关

类似于python中的time.sleep，可以让代码在一定时间间隔之后来执行代码

setTimeout

var t = setTimeout('需要执行的语句'，时间（毫秒）)

使用setTimeout方法会返回一个返回值，如果需要取消这个方法，可以使用这个变量名取消，其他情况基本不会去使用

第一个参数是一个字符串，可以是需要执行的语句，也可以是调用一个函数，执行语句要加上引号，对函数的调用不要加引号

第二个参数的单位是毫秒

clearTimeout

clearTimeout(接收setTimeout返回值的变量名)

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

setInterval

可以周期性的调用函数或者计算表达式，如果不被关闭就会一直被弹出，用法与setTimeout类似

var t = setInterval("JS语句",时间间隔)

clearInterval

取消setInterval，用法与clearTimeout相似

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

DOM

DOM操作指的是文档对象模型，它可以访问HTML文档的所有元素

每当页面被加载时，浏览器会创建页面的文档对象模型

HTML DOM树

DOM标准规定HTML文档中的每个成分都是一个节点

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

JavaScript中可以通过DOM创建动态的界面，有如下一些作用

• JavaScript能够改变也i面中所有的HTML元素
• JavaScript能够改变页面中所有HTML元素
• JavaScript能够改变页面所有的css样式
• JavaScript能够对页面所有事件作出反应

标签查找

直接查找

1. 根据id查找doucument.getElementById查找到的结果是是对象本身
2. 根据class属性查找doucument.getElementByClassName查找到的结果是数组，通过索引取值得到对象本身
3. 根据标签名查找document.gteElemenByTagName查找到的结果是数组，通过索引取值得到对象本身

间接查找

1. 父节点查找当前节点对象.parentElement
2. 子节点查找当前节点对象.childrenElement
3. 第一个子节点firstElementChild
4. 最后一个子节点lastElementChild
5. 下一个兄弟标签netxElementSibling
6. 上一个兄弟标签previousElementSibling

节点操作

创建节点

var divEle = document.createElement('需要创建的标签')

这里定义的变量名最好使用标签名+Ele的形式定义，这样就可以一目了然的看到创建的标签类型

添加节点

1. 追加节点

   添加子节点

   somenode.appendChild(需要添加的节点)

   var divEle = doucument.getElementsByClassName('c1')[0]  // 通过类取标签取到的是一个数组，需要先索引取值
   divEle.appendChlid(imgEle)
   

   添加节点到最下方

   somenode.append(需要添加的节点)

   var divEle = document.getElementsByClassName('c1')[0]
   divEle.append(imgEle)
   

   append和appendChild 的区别：

   append可以同时传入多个节点或字符串，且没有返回值

   appendChild只能传入一个节点，不支持字符串

2. 插入节点

   somenode.insertBefor(需要添加的节点，某个节点)

var pEle = doucument.getElementByTagName('p');
var imgEle = doucment.createElement('img');
imgEle.setAttribute('src','https://www.baidu.com');
pEle.appendChild(imgEle)

删除节点

somenode.remove(需要删除的节点)

替换节点

somenode.replace(需要替换的节点，某个节点)

属性节点

文本节点

// 获取文本节点的值
// 获取节点
var divEle = doucument.getElementById('id')
// 获取文本
divEle.innerText
// 获取整个HTML代码
divEle.innerHTML

// 设置文本节点的值
divEle.innerText = '1231230';
// 添加HTML代码
divEle.innerHTML = '<p>2</p>'

// 通过innerText添加的值为文本，就算是HTML代码也只是以文本形式显示
// 没有赋值符号是获取文本，有赋值符号是设置文本

attribute操作

var divEle = document.getElementById("d1");
// 可以设置默认的属性，也可以设置自定义的属性
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性可以直接使用.属性名来获取和设置值
imgEle.src
imgEle.src="..."

input标签，select标签，textarea标签获取值

可以直接使用.value的型式elementNode.value

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class操作

• 获取所有样式类名（字符串）className
• 删除指定类classList.remove()
• 添加类classList.add()
• 判断类是否属于标签classList.contains()
• 存在删除，否则添加classList.toggle()

指定css操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

1. 对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2. 对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

事件

事件指的是当符合某种条件下，自动触发的动作或者响应

事件的两种绑定方式

方式一

在标签内部写发生的事件，在script标签内写事件发生的代码

<div id="d1" onclick="changeColor(this);"> 
    这是一个链接
</div>  <!--这里写发生的事件，this是一个实参，类似于python中的self-->
<script> 
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>   <!--这里写事件发生后的代码，ths是形参，接收this-->

方式二

全部写在body最下面的script标签中

<div id="d2">这是一个链接</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    alter(123);
  }
</script>  <!--这里不需要传入参数，需要的话可以直接this.-->

常用事件

事件	作用
onclick	点击某个对象时调用事件句柄
ondblclick	双击某个对象时调用事件句柄
onfucus	某个元素获得焦点时调用事件句柄
onblur	某个元素失去焦点时调用事件句柄
onselect	在文本框文本被选中时调用事件句柄
onsubmit	点击确认按钮时调用事件句柄，使用的对象时form

事件练习

开关灯示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .c1 {
            height: 400px;
             400px;
            border-radius: 50%;
        }

        .bg_green {
            background-color: green;
        }

        .bg_red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="c1 bg_green bg_red"></div>
    <button id='d1'>变色</button>

    <script>
        // 找到button标签
        let btnEle = document.getElementById('d1')
        // 点击触发事件
        btnEle.onclick = function(){
            // 找到div标签
            var divEle = document.getElementsByClassName('c1')[0]
            // 修改类属性值
            divEle.classList.toggle('bg_red')
        }
    </script>
</body>
</html>

input获取焦点示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text" value="go语言" id="d1">

    <script>
        // 获取input标签
        var iEle = document.getElementById('d1');
        // input标签聚焦事件
        iEle.onfocus = function(){
            iEle.value = ''   
        };

        // input框失去焦点事件
        iEle.onblur = function(){
            iEle.value = 'pyton学习'
        } 
    </script>
</body>
</html

展示当前时间示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
    <input type="text" id="d1">
    <button id="b1">开始计时</button>
    <button id="b2">结束计时</button>
    <script>
        // 定义一个全局变量用来存储定时器
        var t = null;

        // 获取input框标签
        var iEle = document.getElementById('d1');
        // 获取开始计时标签
        var b1Ele = document.getElementById('b1');
        // 获取结束计时标签
        var b2Ele = document.getElementById('b2');

        // 获取一个定时器
        function showTime(){
            // 调用js的date类获得当前时间
            var currentTime = new Date();
            var ctime = currentTime.toLocaleString();
            // 给input标签添加当前时间的属性
            iEle.value = ctime
        }

        // 点击开始时间按钮事件
        b1Ele.onclick = function () {
            if(!t){
                // 让t每隔一秒就加1
                t = setInterval(showTime,1000)
            }
        };

        // 结束事件
        b2Ele.onclick = function () {
            clearInterval(t);
            // 将t给清空，不然下次就不会开始
            t = null
        }
    </script>
</body>
</html>

省市联动示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="d1">省:

</select>


<select name="" id="d2">市:</select>

<script>
    var s1Ele = document.getElementById('d1');
    var s2Ele = document.getElementById('d2');


    var data = {
        "河北省": ["廊坊", "邯郸",'石家庄'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'青岛'],
        "上海":["静安区",'黄浦区','徐汇区']
    };
    // 动态创建option标签 添加到第一个选择框中
    for (let province in data){
        // 创建一个个的option标签
        var optEle = document.createElement('option');
        // 给创建的option标签设置文本和属性
        optEle.innerText = province;
        optEle.value = province;
        // 将创建好的option标签添加到select框中
        s1Ele.appendChild(optEle)
    }
    s1Ele.onchange = function () {
        // 获取用户选择的省 根据省 取到对应的市
        var currentPro = this.value;
        var cityList = data[currentPro];

        // 先将第二个select框中的所有内容清空
        s2Ele.innerHTML = '';
        // 循环市的数组 创建option标签  操作属性  添加到第二个select框中
        for (let i=0;i<cityList.length;i++){
            var optEle = document.createElement('option');
            optEle.innerText = cityList[i];
            optEle.value = cityList[i];
            s2Ele.appendChild(optEle)
        }
    }
</script>
</body>
</html>