# 待办事项

**Repository Path**: faiz-lab/to-do-list

## Basic Information

- **Project Name**: 待办事项
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学习笔记

## HTMLCollection to Array in Javascript

```javascript
var arr
var collection = document.getElementsByTagName('div')

// long version
arr = Array.prototype.slice.call(collection)
// short version
arr = [].slice.call(collection)
// ES6 version
arr = [...collection]
```

---

## 限制鼠标事件对覆盖元素层进行穿透

```html
<button class="complete-btn">
    <i class="fas fa-check"></i>
</button>
<button class="trash-btn">
    <i class="fas fa-trash"></i>
</button>
```

```css
.fa-trash,
.fa-check {
    pointer-events: none;
}
```

这样，点击按钮内部图标的效果就会失效

---

## How to add, remove and toggle CSS classes in JavaScript

### `classList` 的使用

```html
<div class="hot spicy pizza">🍕</div>
```

```javascript
// grab element reference
const pizza = document.querySelector('.pizza')

// get all existing classes
console.log(pizza.classList)
// ["hot", "spicy", "pizza", value: "hot spicy pizza"]

// get first class name
console.log(pizza.classList[0]) // hot

// get total number of classes
console.log(pizza.classList.length) // 3
```

### `add()` 方法

The `add()` method adds one or more classes to the HTML element:

```javascript
pizza.classList.add('sauce', 'cheese', 'tomato')
```

Now, the element looks like below:

```html
<div class="hot spicy pizza sauce cheese tomato">🍕</div>
```

### `remove()` 方法

The `remove()` method is used to remove one or more classes from the element:

```javascript
pizza.classList.remove('sauce', 'potato')
```

If you try to remove a class that doesn't exist, as we did in the above example, there won't be any error. JavaScript will simply ignore it.

### `contains()` 方法

The `contains()` method returns true if the element contains the given class, otherwise `false`:

```javascript
console.log(pizza.classList.contains('cheese')) // true
console.log(pizza.classList.contains('yogurt')) // false
```

### `toggle()` 方法

`toggle()` is an interesting method. It removes the class if it already exists, otherwise, it adds it to the collection.

Without this method, you have to manually check if the class exists using `contains()` before toggling it on or off:

```javascript
// manual toggle
if (pizza.classList.contains('olive')) {
    pizza.classList.remove('olive')
} else {
    pizza.classList.add('olive')
}
```

With the `toggle()` method, you simply pass the name of the class which you want to toggle:

```javascript
pizza.classList.toggle('olive')
```

The `toggle()` method returns `true` if the class was added, and `false` if it was removed:

```javascript
const status = pizza.classList.toggle('olive')

console.log(status) // true --> class was added
```

You can also pass a second boolean parameter to the `toggle()` method to indicate whether to add the class or remove it. This will turn `toggle()` into one way-only operation. If the second argument evaluates to `false`, then the class will only be removed, but not added. If it evaluates to `true`, then the class will only be added, but not removed.

Here is an example:

```javascript
const status = pizza.classList.toggle('hot', false)

console.log(status) // false --> class was removed
```