JavaScript49_DOM编程：DOM修改与demo
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript49_DOM编程：DOM修改与demo相关的知识，希望对你有一定的参考价值。
10、DOM的修改
appendChild()
用于给一个节点添加子节点
list.appendChild(li)
insertAdjacentElement()
可以向元素的任意位置添加元素
两个参数：
1.要添加的位置 2.要添加的元素
beforeend 标签的最后 afterbegin 标签的开始
beforebegin 在元素的前边插入元素（兄弟元素） afterend 在元素的后边插入元素（兄弟元素）
list.insertAdjacentElement("afterend", li)
通过点击按钮，往页面中添加内容，修改内容，删除内容
<body>
<button id="btn01">按钮1</button>
<button id="btn02">按钮2</button>
<hr>
<ul id="list">
<li id="swk">孙悟空</li>
<li id="zbj">猪八戒</li>
<li id="shs">沙和尚</li>
</ul>
<script>
//点击按钮后，向ul中添加一个唐僧
//获取ul
const list = document.getElementById(list)
//获取按钮
const btn01 = document.getElementById(btn01)
btn01.onclick = function()
//<li id=shs>沙和尚</li>
//创建一个li
const li = document.createElement(li)
//向li中添加文本
li.textContent = 唐僧
//给li添加id属性
li.id = ts
list.insertAdjacenthtml(beforeend,"<li id=bgj>白骨精</li>")
const btn02 = document.getElementById("btn02")
btn02.onclick = function()
// 创建一个蜘蛛精替换孙悟空
const li = document.createElement("li")
li.textContent = "蜘蛛精"
li.id = "zzj"
// 获取swk
const swk = document.getElementById("swk")
// replaceWith() 使用一个元素替换当前元素
// swk.replaceWith(li)
// remove()方法用来删除当前元素
swk.remove()
</script>
</body>
11、练习
可以在表格中插入数据，删除数据
容易被插入攻击的写法：（
//这种写法，容易别xss攻击
tbody.insertAdjacentHTML(
beforeend,
`
<tr>
<td>$name</td>
<td>$email</td>
<td>$salary</td>
<td><a href="javascript:;">删除</a></td>
`
)
区别于alert的弹窗
含有确定和取消两个按钮
//弹出一个友好的提示
if(confirm(确认要删除【 + empName + 】吗？))
//删除tr
tr.remove()
本练习中的超链接，我们是不希望发生跳转，但是跳转行为是超链接的默认行为
只要点击超链接就会触发页面的跳转，事件中可以通过取消默认行为来阻止超链接的跳转
使用return false来取消默认行为，只在 xxx.xxx = function()这种形式绑定的事件中才适用 -----> return false
<a href="javascript:;">//可以阻止链接的跳转
完整代码
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.outer
width: 400px;
margin: 100px auto;
text-align: center;
table
width: 400px;
border-collapse: collapse;
margin-bottom: 20px;
td,
th
border: 1px black solid;
padding: 10px 0;
form div
margin: 10px 0;
</style>
<script>
document.addEventListener("DOMContentLoaded",function()
//点击删除超链接后，删除当前的员工信息
function delEmpHandler()
// 本练习中的超链接，我们是不希望发生跳转，但是跳转行为是超链接的默认行为
// 只要点击超链接就会触发页面的跳转，事件中可以通过取消默认行为来阻止超链接的跳转
// 使用return false来取消默认行为，只在 xxx.xxx = function()这种形式绑定的事件中才适用
// return false
// 删除当前员工 删除当前超链接所在的tr
// console.log(this)
// this表示当前点击的超链接
const tr = this.parentNode.parentNode
//获取要删除的员工的姓名
// const empName = tr.getElementsByTagName("td")[0].textContent
const empName = tr.firstElementChild.textContent//两种方式都可以
//弹出一个友好的提示
if(confirm(确认要删除【 + empName + 】吗？))
//删除tr
tr.remove()
//获取所有的超链接
const links = document.links
//为他们绑定单级响应函数
for(let i = 0; i < links.length; i++)
links[i].onclick = delEmpHandler
// links[i].addEventListener("click", function()
// alert(123)
// return false // 无法取消默认行为,依然后进行跳转
// )
//点击按钮后，将用户的信息插入到表格中
//获取tbody
const tbody = document.querySelector(tbody)
const btn = document.getElementById("btn")
btn.onclick = function()
//获取用户输入的数据
const name = document.getElementById(name).value
const email = document.getElementById(email).value
const salary = document.getElementById(salary).value
//将获取到的数据设置DOM对象
/*
<tr>
<td>孙悟空</td>
<td>swk@hgs.com</td>
<td>10000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
*/
// 创建元素
const tr = document.createElement("tr")
// 创建td
const nameTd = document.createElement("td")
const emailTd = document.createElement("td")
const salaryTd = document.createElement("td")
// 添加文本
nameTd.innerText = name
emailTd.textContent = email
salaryTd.textContent = salary
// 将三个td添加到tr中
tr.appendChild(nameTd)
tr.appendChild(emailTd)
tr.appendChild(salaryTd)
tr.insertAdjacentHTML("beforeend", <td><a href="javascript:;">删除</a></td>)
tbody.appendChild(tr)
/* //这种写法，容易别xss攻击
tbody.insertAdjacentHTML(
beforeend,
`
<tr>
<td>$name</td>
<td>$email</td>
<td>$salary</td>
<td><a href="javascript:;">删除</a></td>
`
) */
// 由于上边的超链接是新添加的，所以它的上边并没有绑定单级响应函数，所以新添加的员工无法删除
// 解决方式：为新添加的超链接单独绑定响应函数
links[links.length-1].onclick = delEmpHandler
)
</script>
</head>
<body>
<div class="outer">
<table>
<tbody>
<tr>
<th>姓名</th>
<th>邮件</th>
<th>薪资</th>
<th>操作</th>
</tr>
<tr>
<td>孙悟空</td>
<td>swk@hgs.com</td>
<td>10000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>猪八戒</td>
<td>zbj@glz.com</td>
<td>8000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
<tr>
<td>沙和尚</td>
<td>shs@lsh.com</td>
<td>6000</td>
<td><a href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
<form action="#">
<div>
<label for="name">姓名</label>
<input type="text" id="name">
</div>
<div>
<label for="name">邮件</label>
<input type="email" id="email">
</div>
<div>
<label for="salary">薪资</label>
<input type="number" id="salary">
</div>
<button id="btn" type="button">添加</button>
</form>
</div>
</body>
</html>
JavaScript DOM编程艺术 读书笔记 第3章 DOM-文档对象模型
DOM是一套对文档的内容进行抽象和概念化的方法。（p2）
DOM是一种API。简单来说，API就是一组已经得到有关各方共同认可的基本约定。（p4）
W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。”（p7）
何为DOM?
如果没有document(对象)， DOM也就无从谈起。
Object(对象)
JavaScript的对象
Document对象的主要功能就是处理网页内容。
Model （模型）
DOM把一份文档表示为一棵树（这里所说的“树”是数学意义上的概念），这是我们理解和运用这一模型的关键。更具体地说， DOM把文档表示为一棵家谱树。
家谱树本身又是一种模型。
家谱树模型非常适合用来表示一份用（X）HTML语言编写的文档。
比如：
一份html文档可以这样表示
与使用“家谱树”这个术语相比， 把文档比作“节点树”更准确。
何为节点
节点（node）这个词是个网络术语，它表示网络中的一个连接点。 一个网络就是由一些
节点构成的集合。
DOM也是由各种节点构成的集合。
在DOM里有许多不同类型的节点。
比如： 元素节点（element node）、文本节点(text node)、属性节点(attribute node);
获取元素
有3种DOM方法可获取元素节点， 分别是通过元素ID(getElementById)， 通过标签名字（getElementByTagName）,通过类名来获取（getElementByClassName）
getElementById: 它是Document对象特有的函数， 这个函数将返回一个对象。
通过typeof操作符可以告诉我们它的操作数是一个字符串、数值、函数、布尔值还是对象。 （感觉不知道js数据类型可以通过typeof这个方法来判断）
事实上，文档中的每一个元素都是一个对象。
getElementByTagName, 此方法返回一个对象数组。EC6取消了数组类型了，这个方法还有吗？
获取和设置属性
得到需要的元素之后， 可以通过getAttribute方法来获取它的各个属性， 通过setAttribute方法来更改属性节点的值。
getAttribute方法不属于docement对象， 所以不能通过document对象调用。
它只能通过元素节点对象调用。
setAttribute实际上完成了两项操作：先创建这个属性，然后设置它的值。如果setAttribute用在一个本身就有这个属性的元素节点， 这个属性的值就会被覆盖。
这里有一个非常值得关注的细节： 通过setAttribute对文档做出修改后，在通过浏览器的view source(查看源代码)选项去查看文档的源代码时看到的仍将是改变前的属性值， 也就是说，setAttribute做出的修改不会反映在文档本身的源代码里。 这种“表里不一”的现象源自DOM的工作模式： 先加载文档的静态内容， 再动态刷新，动态刷新不会影响文档的静态内容。
这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。
以上是关于JavaScript49_DOM编程：DOM修改与demo的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript DOM编程艺术 读书笔记 第3章 DOM-文档对象模型
网站前端_JavaScript-DOM编程.0001.JavaScriptDom基础核心?