Day 6-note_原生js操作

1.DOM节点操作

1. 获取节点
   1.1 直接获取
   a）通过id值来获取节点：document.getElementById（id属性） - 返回的是标签对应的节点对象
   补充：Html标签在js中全部都是对象，标签的属性就是对象的属性；双标签的内容对应是innerText和innerHTML属性innerHTML指向的是内容的文本和标签； innerText只指向内容中的文本
   b) 通过class值获取节点: document.getElementsByClassName(class属性值) - 返回一个数组
   c) 通过标签名获取节点: document.getElementsByTagName(标签名) - 返回一个数组
   d)通过name属性获取节点(被淘汰)： document.getElementsByName(name属性值)
   1.2 获取父节点
   节点.parentElement - 获取指定节点对应的父节点
   1.3 获取子节点
   a)获取所有子节点: 节点.children - 获取自定节点所有的子节点(不会获取孙子节点)
   b)获取第一个子节点: 节点.firstElementChild
   c)获取最后一个子节点: 节点.lastElementChild
2. 创建节点
   document.createElement(标签名) - 创建指定标签对象的节点对象
   注意: 创建的节点在没有添加在网页中的时候是不会显示的
   3.添加节点
   节点1.appendChild(节点2) - 在节点1的最后添加节点2
   节点1.insertBefore(节点2, 节点3) - 在节点1中的节点3前出入节点2
3. 拷贝节点
   节点.cloneNode() - 赋值指定节点，产生一个新的节点
4. 删除节点
   a)节点1.removeChild(节点2) - 删除节点1中的节点2
   b)节点.remove() - 删除指定节点

2.DOM操作

1. 什么是BOM
   BOM(browser object model)浏览器对象模型
   js自带一个window对象，指向当前浏览器；js中所有的全局变量都是绑定在window对象上的属性
   在使用的时候，window可以省略
2. window基本操作
   open(url, name属性, 窗口大小 )
   a）打开新的窗口: open(url) - 在新的窗口中打开新页面
   b) 打开新的窗口, 同时设置窗口的宽度和高度
   2)关闭窗口
   窗口对象.close()
   window.close() / close() - 关闭当前窗口
   3)移动当前窗口
   new_window2.moveTo(100, 100)
   4)获取窗口的宽度和高度
   innerWidth/innerHeight - 获取浏览器能够显示内容的部分的宽高
   outerWidth/outerHeight - 整个浏览器的宽高
3. 弹框

1. 只有确定按钮再加提示信息的弹框
   2)一个提示信息，再加确定和取消按钮；根据返回值是true还是false来判断选择是确定还是取消
   3)一个提示信息，再加一个输入框和取消确定按钮；根据返回值是否是null来判断点击的是取消还是确定

3.定时事件

1. 开启定时
   1)setTimeout(函数, 定时时间, 实参列表) - 指定时间后调用指定函数，并且传入指定的参数; 返回一个定时器对象

函数 - 可以是匿名函数，也可以是普通函数的函数名
定时时间 - 单位是毫秒
实参列表 - 函数提供参数

2)setInterval(函数,定时时间，参数列表) - 每隔指定的时间调用一次函数

2. 清除定时
   clearTimeout(定时对象)
   clearInterval(定时对象)

4.自动跳转

    
        
        
    
    
        
5秒后自动跳转
        
        
    

5.事件

js是事件驱动语言

1. 事件三要素: 事件源、事件、事件驱动程序
   事件源发送某个事件就做什么事情(事件驱动程序)
2. 事件的绑定
   1） 在标签内部给标签的事件属性赋值
   注意: 这种方式绑定的时候，this指向的是window
   2）通过给节点对象的事件属性赋值来绑定
   注意: 这种方式绑定的时候，this指向的是事件源
   3）通过addEventListener方法进行绑定

     a.语法
     事件源节点.addEventListener(事件名称,事件驱动程序)
     b.说明
     事件名称 - 事件属性名去掉on
     事件驱动程序 - 事件发生后需要调用的函数
     c.注意
     this是事件源
     可以给同一个节点的同一个事件绑定不同的事件驱动程序

6.常见事件类型

1. onload事件 - 页面加载完成对应的事件(标签加载成功)
2. 鼠标事件
   1）onclick - 鼠标点击事件
   2）onmouseover - 鼠标悬停事件
   3）onmouseout - 鼠标离开事件
3. 键盘事件
   键盘事件一般绑定在输入框对应的标签上
   1）onkeypress - 按下弹起
   2）onkeydown - 按键按下 、 onkeyup - 按键弹起
4. 输入框事件
   1）onchange - 输入框中的输入内容的时候按回车
   2）oninput - 正在输入
5. 事件对象
   每个事件驱动程序中，都可以设置一个参数来表示当前事件对象。不同类型的事件对应事件类型和事件属性不同
   1）鼠标事件对象
   a）clientX/clientY - 鼠标的位置到浏览器左边和顶部的距离
   b）offsetX/offsetY - 鼠标的位置到事件源标签左边和顶部的距离
   2）键盘事件对象
   key - 哪个按键被按下