2021-08-06 JS,DOM

JS

事件：

当执行某件事情|某个动作触发一段js代码的执行,触发一个函数的执 行,函数js已经定义好了，事件就已经发生了

事件的组成：

​ 事件源: 谁触发的事件
​ 事件名: 触发了什么事件
​ 事件监听: 谁管这个事情，谁监视？
​ 事件处理:发⽣了怎么办

分类

​ 键盘事件

​ 键盘按下、抬起

​ 鼠标事件

​ 单击事件，双击事件、移入、移出

​ 焦点事件

​ 聚焦、失焦

​ 文档事件

​ window.onload待里面内容全部加载完成之后才触发函数的执行

​ 表单事件

​ 焦点事件

​ change表单元素内容改变触发时间

一些常用事件：

​ onload：当⻚⾯或图像加载完后⽴即触发
​ onblur：元素失去焦点

​ onfocus：元素获得焦点
​ onclick：⿏标点击某个对象
​ onchange：⽤户改变域的内容
​ onmouseover：⿏标移动到某个元素上
​ onmouseout：⿏标从某个元素上离开
​ onkeyup：某个键盘的键被松开
​ onkeydown：某个键盘的键被按下

优点：

1. 验证用户输入的数据。
2. 增加页面的动感效果。
3. 增强用户的体验度

JS中对象与JSON的区别

js中的对象：{}

• 键值对数据的集合
  • 键值对：key：value
  • 两个键值对之间使用","分隔
  • key：字符串，引号可以省略当key非标准的标识符的命名形态,需要通过""
  • value：可以为JS中的任意类型
• JSON
  • 是一种轻量级的数据交换格式。它基于 ECMAScript 的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
  • JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
  • ‘{键值对}’
  • key：是字符串，要用”“括起来
  • value：数值型，字符串”“，对象，数组，null，boolean

    <script>
        /*1.字面量创建方式*/
        var obj = {
            name : "laopei",
            age : 18,
            son : [
                {name:"xiaopei",age:5},
                {name:"xiaoxiaopei",age:2}
            ],
            car : null,
            teach : function(){
                console.log("裴校越讲越嗨,越嗨越快!!!");
            }
        };

        console.log(obj);
        //获取对象的属性值
        console.log(obj.name);

        //2.new Object() 创建一个空对象
        var obj2 = new Object();
        /*为对象添加属性*/
        obj2.name='haha';
        obj2.age=18;
        console.log(obj2);

        //3.Object.create(null) 创建一个空对象
        var obj3 = Object.create(null);
        console.log(obj3);

        //  JSON解析器 : 通过JSON解析器解析json效率较高
        /*json串-->js对象*/
        var json = '{"a": "Hello", "b": "World"}';
        console.log(JSON.parse(json));

        /*jjs对象-->son串*/
        var obj4 = {name:"zhangsan",age:18,'gender':true};
        console.log(JSON.stringify(obj4));
    </script>

计时器

1. 重复执行计时器：setInterval
2. 延迟执行计时器：setTimeout

停止重复执行计时器：

​ 定时器编号 = setInterval（）

​ clearInterval(定时器的编号)

	<div id="box"></div>
    <script>
        var box = document.getElementById("box");
        //延迟执行定时器
        /*5秒中之后div中显示文本哈哈*/
       /* setTimeout(function (){
            box.innerHTML="哈哈";
        },5000);*/

        /*重复执行定时器*/
        //每隔1s钟div中显示数字,每次叠加
        var timer = setInterval(fn,1000);
        var i = 0;
        function fn(){
            i++;
            box.innerHTML = i;
            if(i==10){
                /*清除定时器*/
                clearInterval(timer);
            }
        }
    </script>

DOM（Document Object Model ）⽂档对象模型

DOM 赋予了我们操作文档中内容的能力，可以通过DOM操作页面中的节点,插入,删除,修改…

节点

加载 HTML ⻚⾯时，Web 浏览器⽣成⼀个树型结构，⽤来表示⻚⾯内部结构。DOM 将这种树型结构理解为由节点组成，组成⼀个节点树。

获取节点

注意：操作 dom 必须等节点初始化完毕后，才能执⾏。

处理⽅式两种:
（1）把 script 调⽤标签移到html末尾即可；
（2）使⽤onload事件来处理JS，等待html 加载完毕再加载 onload 事件 ⾥的 JS。

window.onload = function () { //预加载 html 后执⾏};

• getElementById()：根据id获取DOM对象，如果id重复，那么以第一个为准
• getElementsByTagName()：根据标签名获取DOM对象数组
• getElementsByClassName():根据样式名获取DOM对象数组
• getElementsByName()：根据name属性值 获取DOM对象数组

说明：href=“javascript:void(0)”：伪协议，表示不执⾏跳转，⽽执⾏指定的点击事件。

创建节点与插入节点

创建：

• createElement()：创建一个新的节点，需要传⼊节点的标签名称，返回创建的元素对象
• createTextNode()：创建⼀个⽂本节点，可以传⼊⽂本内容
• innerHTML：也能达到创建节点的效果，直接添加到指定位置了

插入：

• write()：将任意的字符串插⼊到⽂档中
• appendChild()：向元素中添加新的⼦节点，作为最后⼀个⼦节点
• insertBefore()：向指定的已有的节点之前插⼊新的节点newItem：要插⼊的节点exsitingItem：参考节点 需要参考⽗节点

插入图片：

// 创建图⽚
 var img = document.createElement("img") ; 
 /*
 // 设置属性第⼀种⽅式
 // 设置img标签的src属性
 // img.src ="http://www.baidu.com/img/bd_logo1.png";
 */ 
 // 设置属性第⼆种⽅式
 // setAttribute() ⽅法添加指定的属性，并为其赋指定的值。
 // 设置img的src属性

间接查找节点

• childNodes ：返回元素的⼀个⼦节点的数组
• firstChild ：返回元素的第⼀个⼦节点
• lastChild ：返回元素的最后⼀个⼦节点
• nextSibling ：返回元素的下⼀个兄弟节点
• parentNode ：返回元素的⽗节点
• previousSibling ：返回元素的上⼀个兄弟节点

查找 与 删除 与替换

DOM操作节点:

• 替换 父节点.replaceChild(新节点,原节点)
  使用新节点替换源节点
  返回被替换的节点
  注意: 当新节点是原页面中的已经存在的节点,实现移动的效果,被替换的元素节点删除

• 删除 父节点.removeChild(子节点)
  返回被删除的节点

• 克隆节点 源节点.cloneNode(boolean)
  true : 克隆当前元素包含所有的子元素->深拷贝
  false : 只克隆当前元素不可隆子元素->浅拷贝

操作表单

通过jsDOM操作表单

1. 获取表单节点
   1. 根据id,class,name……
   2. document. 表单name属性值
2. 获取表单中的表单元素
   1. 根据id,class,name……
   2. 表单节点.表单元素name属性值
3. 获取表单元素的值
   1. 表单元素.value

• 常用事件
  • oninput：只要输入内容就会触发
  • onchange：在失去焦点的时候校验，如果内容有改变就会触发
  • onsubmit：当前表单被提交的时候触发（绑定给表单而非按钮）
• 表单的提交方式
  • 按钮 onclick + submit(） 在按钮的点击事件中做数据的校验，满足条件调用表单submit()方法做提交
  • 提交按钮 onclick + return boolean -->不满足要求时做拦截表单的提交
  • 表单添加onsubmit事件，当表单被提交时候触发，配合return函数名（）的调用–>拦截提交