querySelector在JS中使用的代码示例

querySelector是一种在JavaScript中使用的DOM方法，用于查找匹配指定CSS选择器的第一个元素。以下是querySelector的代码示例：

HTML:

<div id="test">Hello World!</div>

JavaScript:

const element = document.querySelector('#test');
console.log(element.textContent); // 输出: "Hello World!"

在这个例子中，querySelector方法会返回匹配CSS选择器`#test`的第一个元素，也就是`<div id="test">Hello World!</div>`。然后，我们可以使用返回的元素来访问其属性和方法，例如textContent属性，该属性返回元素的文本内容。

相关问题

JS中常用的事件和代码示例

JavaScript中常用的事件有很多种，下面列举了一些常用的事件和相应的代码示例：

1. click事件：当用户点击某个元素时触发。

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("Button clicked!");
});

2. mouseover事件：当用户将鼠标移动到某个元素上时触发。

const element = document.querySelector("#my-element");

element.addEventListener("mouseover", function() {
  console.log("Mouse over!");
});

3. keydown事件：当用户按下某个键时触发。

document.addEventListener("keydown", function(event) {
  console.log(`Key pressed: ${event.key}`);
});

4. submit事件：当用户提交一个表单时触发。

const form = document.querySelector("form");

form.addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为
  console.log("Form submitted!");
});

5. load事件：当页面或某个资源加载完成时触发。

window.addEventListener("load", function() {
  console.log("Page loaded!");
});

6. scroll事件：当用户滚动页面时触发。

window.addEventListener("scroll", function() {
  console.log("Scrolling...");
});

这些是JavaScript中常用的一些事件和相应的代码示例，但并不是全部。在实际开发中，可能会遇到更多的事件类型，开发者需要根据具体需求选择适合的事件。

js防抖和节流代码示例，包括html和js

以下是 JavaScript 中的防抖和节流示例代码：

### 防抖

防抖是指在事件被触发n毫秒后再执行回调函数，如果在这n毫秒内又被触发，则重新计时。

**HTML:**

<button id="btn">点击</button>

**JavaScript:**

function debounce(func, delay) {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  }
}

const btn = document.querySelector('#btn');
btn.addEventListener('click', debounce(() => {
  console.log('点击了按钮');
}, 1000));

### 节流

节流是指在一定时间内，只执行一次回调函数。如果在这一定时间内触发了多次，只有第一次触发会执行回调函数。

**HTML:**

<button id="btn">点击</button>

**JavaScript:**

function throttle(func, delay) {
  let lastTime = 0;
  return function() {
    const currentTime = Date.now();
    if (currentTime - lastTime > delay) {
      func.apply(this, arguments);
      lastTime = currentTime;
    }
  }
}

const btn = document.querySelector('#btn');
btn.addEventListener('click', throttle(() => {
  console.log('点击了按钮');
}, 1000));