前端-王卓凡-20230518

键盘事件

• keydown 键盘按下
• keypress 键盘按下（不识别一些功能键，shift、ctrl、↑ 、→之类的）
• keyup 键盘抬起
• 键盘上每一个键都有一个对应的键值，可以通过判断键值来判断是哪一个按键
• 
  
  

加载事件

• onload  等页面中的资源(元素，图片,引入的css等等)加载完毕后执行代码
• 使用传统的绑定方式的话只能写一个onload事件，使用箭头函数可以同时绑定多个
• window.addEventListener('load',执行函数)
  
  

窗口改变事件

• onresize  窗口大小发生改变的事件
• 
  
  

模板字符串

• ES6中新增加的语法：模板字符串  
  `XXXXXX,XX${变量},XXXXXXX`
• 
  
• 相比普通的写法，加入变量时更加方便
  
  

获取选择器内容

• innerHTML 得到所有内容（包括格式和标签）
• innerText 只会得到文本内容
• 例file:///C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20230512091529567.png?lastModify=1684920717
  
  

节点

• nodeType:节点类型
  •     整个文档（document）就是一个大的节点
  •      div元素叫元素节点          nodeTyep == 1
  •      class='box'  id='dv'  属性节点   nodeTyep == 2
  •      '我是box元素'  这是文本节点  nodeTyep == 3
  •      这是一个div  这是注释节点   nodeTyep == 8
    
    
  
  

关系节点父节点

• 元素.parentNode
• 
  
  

子节点

• 元素.childNodes  获得子元素中所有节点，包括文本节点
• 元素.children 获得子元素中元素节点（常用）(是一个数组)
• 
  
• 元素.firstChild 获取第一个子元素，包括文本节点
• 元素.firstElementChild 获取第一个元素节点（推荐这个）
• 元素.lastChild 获取最后一个子元素，包括文本节点
• 元素.lastlastElementChild获取最后一个元素节点（推荐这个）
• 
  
  

兄弟节点

• 元素.nextSibling  获取下一个兄弟元素，包括文本节点
• 元素.nextElementSibling 获取下一个兄弟元素节点（推荐这个）
• 
  
• 元素.   获取上一个兄弟元素，包括文本节点
• 元素.previousElementSibling 获取上一个兄弟元素节点（推荐这个）