querySelector在JS中使用的代码示例
时间: 2024-01-17 16:09:11 浏览: 24
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事件:当用户点击某个元素时触发。
```javascript
const button = document.querySelector("button");
button.addEventListener("click", function() {
console.log("Button clicked!");
});
```
2. mouseover事件:当用户将鼠标移动到某个元素上时触发。
```javascript
const element = document.querySelector("#my-element");
element.addEventListener("mouseover", function() {
console.log("Mouse over!");
});
```
3. keydown事件:当用户按下某个键时触发。
```javascript
document.addEventListener("keydown", function(event) {
console.log(`Key pressed: ${event.key}`);
});
```
4. submit事件:当用户提交一个表单时触发。
```javascript
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单的默认提交行为
console.log("Form submitted!");
});
```
5. load事件:当页面或某个资源加载完成时触发。
```javascript
window.addEventListener("load", function() {
console.log("Page loaded!");
});
```
6. scroll事件:当用户滚动页面时触发。
```javascript
window.addEventListener("scroll", function() {
console.log("Scrolling...");
});
```
这些是JavaScript中常用的一些事件和相应的代码示例,但并不是全部。在实际开发中,可能会遇到更多的事件类型,开发者需要根据具体需求选择适合的事件。
addEventListener()使用的代码示例
下面是一个使用addEventListener()方法的示例代码:
```javascript
const button = document.querySelector("button");
button.addEventListener("click", function() {
console.log("Button clicked!");
});
```
在上面的代码中,我们首先使用`querySelector()`方法获取一个按钮元素。然后,我们使用`addEventListener()`方法将一个事件监听器附加到按钮上。这个事件监听器会在按钮被点击时执行,它会输出一条消息到控制台上。