DOM常用操作
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
<!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>
```
【文章原创作者：韩国服务器租用 http://www.558idc.com/lg.html 复制请保留原URL】