温习日志-5

温习日志

——2023年1月17日深夜

学习内容

• H5C3基础
• 什么是DOM
  1. DOM是文件对象模型
  2. 我们可以获取DOM节点进行操作
• 项目 #1_猜数迷
  1. 获取元素,document.querySelector()
  2. 可以根据HTML标签中的class只需要在document.querySelector('.HTML的标签')
  3. 根据id,在里面加入#,标签直接写标签名即可，
  4. 获取元素后，document.querySelector().textContent获取该元素的内容
  5. 可以直接通过=重新赋值元素中的内容
  6. 对于input元素通过，document.querySelector().value获取输入框中的内容
  7. 通过元素.addEventListener('事件类型', 函数)绑定事件，click为点击事件类型，当触发点击事件就调用函数，函数不会立即执行只有在触发事件类型才会调用
  8. 通过document.querySelector().style可以设置元素的css类型，对于css中的，如：background-color需要转变为backgroundColor驼峰命名法
• 项目 #2_Modal window
  1. 通过元素.classList获取到该元素的所有类
  2. classList自带方法可以对该元素的类做出相应的操作
  3. 通过元素.classList.add('你所要添加的类名')将你要添加的类名添加到元素中
  4. 通过元素.classList.remove('你所要删除的类名')将你要删除的类名从元素中删除
  5. 通过元素.classList.contains('你所要查询的类名')查询元素的是否存在该类
  6. 我们可以将获取到的元素存储到变量中
  7. 可以使用document.querySelectorAll('类')获取到所有有该类的元素获取，获取的是链表，我们可以我们可以使用length方法，将获取到的所有元素进行绑定事件
  8. 绑定事件中，不仅有click还有，keydown、keypress、keyup
  9. 绑定事件中调用的函数,可以添加参数event，也可以直接输入e,获取你绑定事件中触发的按键
• 项目 #3 pig game
  1. 通过元素.classList.toggle('你所要添加的类名')将类名进行判断，存在删除、不存在添加
  2. 对于img元素可以直接img.src = 你要改名的路径改变图片
  3. 这一个项目是基于之前的知识综合测试

明日计划

• 同学聚会去了，无计划