DOM常用操作 - - php.cnBlog

1. 增删改(写操作)

createElement(): 创建新元素

createDocumentFragment(): 创建文档片断

append(): 追加新元素

before(): 在前面追加

after(): 在后面追加

cloneNode(): 克隆节点

replaceChild(): 替换元素

remove(): 移除元素
```
<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>增删改(写操作)</title>
</head>
<body>
<script>
/* 1. 创建元素: createElement() 2. 追加元素: append() 3. 创建片断: createDocumentFragment 4. 后面添加: after() 5. 前面添加: before() 6. 克隆节点: cloneNode(true) 7. 替换子元素: replaceChild() 8. 删除元素: remove() /

// 1. 创建
const ul = document.createElement(‘ul’)

// 2. 添加
document.body.append(ul)

// 为ul添加一些子元素
// for (let i = 1; i <= 5; i++) {
// const li = document.createElement(‘li’)
// li.append(‘item-‘ + i)
// ul.append(li)
// }

// 3. 文档片断
// 使用文档片断来优化这种创建过程,提升渲染效率
const frag = document.createDocumentFragment()
for (let i = 1; i <= 5; i++) {
const li = document.createElement(‘li’)
li.append(‘demo-‘ + i)
frag.append(li)
}
// 最后再统一添加到页面中的UL中
ul.append(frag)

// 4. 后面: after
// (1)必须先找到插入点,如第3个
const three = ul.querySelector(‘:nth-child(3)’)
// (2)创建新元素
let li = document.createElement(‘li’)
li.append(‘新的<li>‘)
// (3)插入到指定位置
three.after(li)

// 5. 前面: before
// 还是第3个元素,但是在前面插入
// (1)创建新元素
li = document.createElement(‘li’)
li.append(‘新的<li>-1’)
// (3)插入到指定位置
three.before(li)

// 6. 克隆: coneNode(true)
// true: 深度克隆,要不到内部的所有后代元素
let newLi = li.cloneNode(true)
console.log(newLi)
ul.append(newLi)

// 7. 替换/更新: replaceChild(新,原)
const last = ul.lastElementChild
let h2 = document.createElement(‘h2’)
h2.append(‘被替换的元素’)
ul.replaceChild(h2, last)

// 8.删除
// 被删除
// ul.removeChild(ul.querySelector(‘:last-child’))
// 自杀:在当前元素上调用, 自宫
ul.querySelector(‘:last-child’).remove()
</script>
</body>
</html>

## 2. 元素内容
1. `textContent`: 全部内容(包括 js,css,隐藏内容)
2. `innerText`: 返回已渲染(可见)内容
3. `innerHTML`: 替换元素内容(html)
4. `outerHTML`: 替换元素自身(html)

<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>元素内容</title>
</head>
<body>
<h2>Hello world</h2>
<div class="box">
<style>
h2 {
color: red;
}
</style>
<h2>通知</h2>
<span style="display: none">试用期员工不参加</span>
<p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
</div>

<script>
/* 1. textContent: 全部内容(包括 js,css,隐藏内容) 2. innerText: 返回已渲染(可见)内容 3. innerHTML: 替换/读取元素”内容”(html) 4. outerHTML: 替换/读取元素”自身”(html) /

console.log(document.querySelector(‘h2’).textContent)
console.log(document.querySelector(‘.box’).textContent)
console.log(document.querySelector(‘.box’).innerText)
console.log(document.querySelector(‘.box’).innerHTML)
document.querySelector(‘.box’).innerHTML = ‘<h1>Hello 朱老师</h1>‘

// document.querySelector(‘.box’).outerHTML = null

// 删除
// remove() === (outerHTML = null)
document.querySelector(‘.box’).remove()
</script>
</body>
</html>

## 3. 指定位置插入
### 3.1 插入位置
1. `beforebegin`:元素自身的前面
2. `afterbegin`:插入元素内部的第一个子节点之前
3. `beforeend`:插入元素内部的最后一个子节点之后
4. `afterend`:元素自身的后面
### 3.2 API 方法
1. `insertAdjacentElement()`:指定位置插入**元素**
2. `insertAdjacentText()`: 指定位置插入**文本**节点无论是什么都原样显示
3. `insertAdjacentHTML()`: 指定位置插入**元素节点**(DOMString) 可以识别html
![image.png](https://note.youdao.com/yws/res/7/WEBRESOURCE6715675cd4e7aecd3c1ad1b8386d4267)
![image.png](https://note.youdao.com/yws/res/c/WEBRESOURCEb09aee329506cd74f82f4d4736a1cbdc)

<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>指定元素标签的位置插入</title>
</head>
<body>
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
// 1 插入位置
// 1. beforebegin:元素自身的前面
// 2. afterbegin:插入元素内部的第一个子节点之前
// 3. beforeend:插入元素内部的最后一个子节点之后
// 4. afterend:元素自身的后面

// 2 API 方法
// 1. insertAdjacentElement():指定位置插入元素
// 2. insertAdjacentText(): 指定位置插入文本节点
// 3. insertAdjacentHTML(): 指定位置插入元素节点(DOMString)

const ul = document.querySelector(‘.list’)

const h3 = document.createElement(‘h3’)
h3.textContent = ‘列表2121’
// insertAdjacentElement:第2个参数是元素类型

ul.insertAdjacentElement(‘afterend’, h3)

ul.insertAdjacentText(‘afterbegin’, ‘<p style="color:red">Hello world AdjacentText<p>‘)

// 直接将可以将字符串解析为html元素
ul.insertAdjacentHTML(‘afterbegin’, ‘<p style="color:red">121212<p>‘)
</script>
</body>
</html>

## 4. dataset 对象
1. 预定义属性: `id,class,style, title...`
2. 自定义属性: `data-`前缀
3. 注: `data-`不要写,蛇形->驼峰

<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>dataset对象</title>
</head>
<body>
<h3 style="color: red">Hello</h3>
<div data-username="朱老师" data-my-email="abc@qq.com">用户信息</div>
<script>
// dataset对象:读取自定义属性
// 自定义属性: data-前缀的
// 预定义属性/预置属性: id,class,style,src,type,...

// 预定义属性
console.log(document.querySelector(‘h3’).style.color)

// 自定义属性:dataset
console.log(document.querySelector(‘div’)[‘data-username’])
console.log(document.querySelector(‘div’).dataset[‘username’])
console.log(document.querySelector(‘div’).dataset.username)
console.log(document.querySelector(‘div’).dataset[‘myEmail’])
console.log(document.querySelector(‘div’).dataset.myEmail)
console.log(document.querySelector(‘div’).getAttribute(‘data-my-email’))
</script>
</body>
</html>

## 5. `getComputedStyle`对象
- 计算样式: 元素上的全样样式,包括行内,文档,外部等
- 只读
-

<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>计算样式: getComputedStyle</title>
<link rel="stylesheet" href="style.css" />
<style>
h3 {
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<h3 style="color: red">Hello 晚上好</h3>

<script>
const h3 = document.querySelector(‘h3’)
console.log(h3.style.color)
console.log(h3.style.width)
console.log(h3.style.height)
// 当前元素的最终样式: 行内,文档,外部3个样式作用的结果
// 用计算样式就可以全部获取到
// rgb(255, 0, 0) = red (rgb(红, 绿, 蓝))
console.log(window.getComputedStyle(h3).color)
// width,height 返回字符串
console.log(window.getComputedStyle(h3).width)

let width = window.getComputedStyle(h3).width
// 将width转为整数
width = parseInt(width)
console.log(width + 100)

h3.style.width = width + 100 + ‘px’
// h3.style.width = ‘300px’

// classList: 操作css中的 class属性
</script>
</body>
</html>

<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>toDoList:留言板</title>
</head>
<body>
<input type="text" onkeydown="addComment(this)" placeholder="请留言" autofocus />

<ul class="list"></ul>
<script>
function addComment(ele) {

if (event.key === ‘Enter’) {

if (ele.value.length === 0) {
alert(‘忘了写点啥了吧?’)
ele.focus()
return false
} else {

const ul = document.querySelector(‘.list’)

ele.value += ‘<button onclick="del(this.parentNode)">删除</button>‘

ul.insertAdjacentHTML(‘afterbegin’, <li>${ele.value}</li>)

ele.value = null
}
}
}

function del(ele) {
console.log(ele)
return confirm(‘是否真的删除?’) ? ele.remove() : false
}
</script>
</body>
</html>

```

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：代码内容可以都写进代码块里，这样方便阅读

DOM 常用操作-2

1. 增删改(写操作)