js专栏 06.DOM 02.节点操作

# 02.节点操作

[toc]{type: "ol", level: [3,4]}

### 基础结构
```html
<div id="d1" class="c1 bg_green bg_gold">
    <p id="p1" style="text-align: center">I love Apple. It's a good idea. I think so.</p>
    <span></span>
</div>
```
```css
.c1 {
    height: 200px;
    width: 600px;
    border-radius: 20%;
}

.bg_green {
    background-color: green;
}

.bg_gold {
    background-color: gold;
}
```
![节点操作-基础结构](02.节点操作-基础结构.png)


### 创建与导入
#### 创建标签
- img标签
```js
let imgEle = document.createElement('img');

```
- a标签
```js
let aEle = document.createElement('a');
```

#### 设置属性
- img标签
> 设置默认表情属性
```js
imgEle.src = 'img.jpg';
```
> 为标签添加自定义属性
>> 此方法也可以设置默认属性
```js
imgEle.setAttribute('username','lili');
```
- a标签
```js
aEle.href = 'https://www.baidu.com';
```
> innerText：**获取内部的文本**{style="color:goldenrod"} \<h3>**不识别标签**{style="color:brown"}\<h3>
> innerHtml：**获取内部的文本及标签**{style="color:goldenrod"} \<h3>**可识别标签**{style="color:green"}\<h3>
```js
// 将需要显示的内容传入标签中
aEle.innerText = '内部文本';
```

#### 导入标签
> 这种导入方式是临时生效的
- img标签
```js
let divEle = document.getElementById('d1');
// 添加到标签内的尾部
divEle.append(imgEle);
```
- a标签
```js
let pEle = document.getElementById('p1');
// 将a标签插入在p标签的前面
divEle.insertBefore(aEle,pEle);
```
![节点操作-创建与导入-导入标签](02.节点操作-创建与导入-导入标签.png)


### 类属性
#### 获取类属性
```js
divEle.classList;
```

#### 移除类属性
```js
divEle.classList.remove('bg_gold');
```

#### 添加类属性
```js
divEle.classList.add('bg_gold');
```

#### 判断类属性
> 判断是否具有某个类属性
```js
divEle.classList.contains('bg_gold');
```

#### 切换类属性
> 有则移除 无则添加
```js
divEle.classList.toggle('bg_gold');
```
![节点操作-类属性](02.节点操作-类属性.png)


### 更改样式
- 字体颜色
```js
pEle.style.color = 'grey';
```
- 字体大小
```js
pEle.style.fontSize = '36px';
```
- 背景色
```js
pEle.style.backgroundColor = 'goldenrod';
```
![节点操作-更改样式](02.节点操作-更改样式.png)