WebApis笔记

最新推荐文章于 2024-07-20 18:05:54 发布

Cra2yQi

最新推荐文章于 2024-07-20 18:05:54 发布

阅读量29

点赞数

文章标签：笔记 html5 javascript

本文链接：https://blog.csdn.net/m0_57181332/article/details/134310918

版权

WebApis

一、Dom获取节点

document.documentElement对应 html 标签
document.body 对应body标签
querySelector 满足条件的第一个元素
querySelectorAll 满足条件的元素集合返回伪数组
getElementById 根据id获取元素
getElementsByTagName 根据标签名获取
getElementsByClassName 根据类名

二、操作元素内容

1.操作html内容


<body>
<div class="intro"></div>
<script>
  // innerhtml 将文本内容添加/更新到任意标签位置
  const intro = document.querySelector('.intro')
  //这个是更改，所以只会显示一次内容
  //如果想追加，可以用字符串拼接的方式，如intro += ''
  intro.innerhtml = '嗨~ 我叫韩梅梅！'
  intro.innerhtml = '<h4>嗨~ 我叫韩梅梅！</h4>'
</script>
</body>

2.常用属性修改


<script>
  // 1. 获取 img 对应的 DOM 元素
  const pic = document.querySelector('.pic')
  // 2. 修改属性
  pic.src = './images/lion.webp'
  pic.width = 400;
  pic.alt = '图片不见了...'
</script>

3.控制样式属性

1.行内样式修改


<body>
<div class="box">随便一些文本内容</div>
<script>
  // 获取 DOM 节点
  const box = document.querySelector('.box')
  box.style.color = 'red'
  box.style.width = '300px'
  // css 属性的 - 连接符与 JavaScript 的 减运算符
  // 冲突，所以要改成驼峰法
  box.style.backgroundColor = 'pink'
</script>
</body>

2.块内样式修改


<body>
//这个修改是直接把box名改成pink
//如果想要追加，可以：box.classList.add('pink')
<div class="box">随便一些文本内容</div>
<script>
  // 获取 DOM 节点
  const box = document.querySelector('.box')
  //由于class是关键字, 所以使用className去代替
  box.className = 'pink'
</script>
</body>

<style>
  .pink {
    background: pink;
    color: hotpink;
  }
</style>

4.自定义属性

自定义属性:

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取


<body>
<div id="1" class="test" data-id="1" data-name="hello"> 自定义属性</div>
<script>
  // 1. 获取元素
  let div = document.querySelector('.test')
  console.log(div)
  // 2. 获取自定义属性值
  console.log(div.dataset.id)
  console.log(div.dataset.name)
</script>
</body>

5.间歇函数

  // 2. 使用 setInterval 调用 repeat 函数
// 间隔 1000 毫秒，重复调用 repeat
setInterval(repeat, 1000)

三、事件

1.事件监听

<body>
  <button id="btn"></button>
  <script>
    // 1. 获取 button 对应的 DOM 对象
    const btn = document.querySelector('#btn')
    // 2. 添加事件监听
    btn.addEventListener('click', function () {
      console.log('等待事件被触发...')
    })
    // 3. 只要用户点击了按钮，事件便触发了！！！
  </script>
</body>

2.鼠标事件

mouseenter 监听鼠标是否移入 DOM 元素
mouseleave 监听鼠标是否移出 DOM 元素

3.键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

4.焦点事件

focus 获得焦点
blur 失去焦点`

5.文本框输入事件

input 输入事件

四、事件对象

<body>
<h3>事件对象</h3>
<p>任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。</p>
<hr>
<div class="box">
  <button style="width: 100px; height: 100px">
  </button>
</div>
<script>
  // 获取 .box 元素
  const box = document.querySelector('.box')

  // 添加事件监听
  box.addEventListener('click', function (e) {
    console.log('任意事件类型被触发后，相关信息会以对象形式被记录下来...');

    // 事件回调函数的第1个参数即所谓的事件对象
    console.log(e)
  })
</script>
</body>

五、环境对象

this指向的是调用者本身

<script>
  // 声明函数
  function sayHi() {
    // this 是一个变量
    console.log(this);
  }

  // 声明一个对象
  let user = {
    name: '张三',
    sayHi: sayHi // 此处把 sayHi 函数，赋值给 sayHi 属性
  }
  
  let person = {
    name: '李四',
    sayHi: sayHi
  }

  // 直接调用
  sayHi() // window
  window.sayHi() // window

  // 做为对象方法调用
  user.sayHi()// user
	person.sayHi()// person
</script>

六、回调函数

<script>
  //函数foo调用函数bar
  // 声明 foo 函数
  function foo(arg) {
    console.log(arg);
  }
  
  function bar() {
    console.log('函数也能当参数...');
  }
  foo(bar);
</script>

间歇函数 setInterval

<script>
	function fn() {
    console.log('我是回调函数...');
  }
  // 调用定时器
  setInterval(fn, 1000);
</script>

<script>
  serInterval(function (){
      console.log('回调函数');
  },1000)
</script>