上期给大家分享了基础的BOM编程 今天这期接着来为大家分享关于JS的DOM编程。
那么DOM编程到底是什么呢？接下来就为大家揭晓。
目录
DOM树的结构解析
DOM：document object moden 文档对象模型
document 也是一个Element对象，它处于DOM树的最上级 网页中最大的父级元素就是 document
Element对象 ：HTML标签对象,也是一个节点Node对象
Node : 节点对象
DOM树是按照节点关系从大到小排列的 最高处的就是document 从下面依次排序 上面的一级是下面一级的父节点 下一级是上一级的子节点 今天给大家分享的DOM编程技巧 就是围绕着这一关系展开
一，Element常用属性
1.父子关系的属性
刚刚给大家介绍了DOM的主要概念 也就是父子关系 接下来给大家简单介绍一下 与父子关系有关的属性到底有哪些呢？
Element.parentElement : 获得父级元素
在已知子级元素 想要得到父级元素的情况下 用你想要得到的元素的子级元素去获取父级元素
例：在界面上显示两张图片 打印出图片的父级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>parent</title>
</head>
<body>
<div id="div">
<img src="img/1.gif" id="img" >
<img src="img/2.gif" id="img2" >
</div>
<!-- 网页中最大的父级元素(element)是 document (文档)-->
<script type="text/javascript">
//parent 父级
console.log(img.parentElement);
</script>
</body>
</html>结果如下：
当我们拿到了父级元素过后，就可以对父级元素进行接下来的操作 比如 给父级元素设置背景颜色等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>parent</title>
</head>
<body>
<div id="div">
<img src="img/1.gif" id="img" >
<img src="img/2.gif" id="img2" >
</div>
<!-- 网页中最大的父级元素(element)是 document (文档)-->
<script type="text/javascript">
//parent 父级
console.log(img.parentElement);
//给img的父元素设置一个背景颜色
img.parentElement.style.background="pink";
</script>
</body>
</html>Element.children : 获得该元素中的所有子元素标签
这个方法就与刚刚的方法有异曲同工之妙 唯一不同的地方就是刚刚是利用子元素来获得父元素
而现在这个方法是用父元素来获取子元素
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>parent</title>
</head>
<body>
<div id="div">
<img src="img/1.gif" id="img" >
<img src="img/2.gif" id="img2" >
</div>
<!-- 网页中最大的父级元素(element)是 document (文档)-->
<script type="text/javascript">
//查询div中所有的子元素 记得要为div设置id
console.log(div.children);
</script>
</body>
</html>结果如下：
Element.firstElementChild : 获得第一个子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>parent</title>
</head>
<body>
<div id="div">
<img src="img/1.gif" id="img" >
<img src="img/2.gif" id="img2" >
</div>
<!-- 网页中最大的父级元素(element)是 document (文档)-->
<script type="text/javascript">
//第一个子节点
console.log(div.firstElementChild);
</script>
</body>
</html>执行了这行语句过后 就会在控制台中打印出div这个父级元素的第一个子节点 那既然能拿到第一个子节点 能不能拿到最后一个子节点呢 答案当然是-----可以啦
Element.lastElementChild : 获得最后一个子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>parent</title>
</head>
<body>
<div id="div">
<img src="img/1.gif" id="img" >
<img src="img/2.gif" id="img2" >
</div>
<!-- 网页中最大的父级元素(element)是 document (文档)-->
<script type="text/javascript">
//最后一个子节点
console.log(div.lastElementChild)
</script>
</body>
</html>Element.childElementCount : 获得该元素中的子元素的个数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>parent</title>
</head>
<body>
<div id="div">
<img src="img/1.gif" id="img" >
<img src="img/2.gif" id="img2" >
</div>
<!-- 网页中最大的父级元素(element)是 document (文档)-->
<script type="text/javascript">
//查询div中子元素的数量
console.log(div.children.length);
</script>
</body>
</html>2.同级关系
刚刚给大家简单介绍了一下父子关系的Element 属性 那大家肯定也会好奇 难道属性之间就只有父子关系吗？既然已经有了父子关系 那大家有没有哥哥弟弟啊 ，没错 接下来要为大家介绍的就是属性中的 ---同级关系（兄弟关系）
Element.previousElementSibling : 获得上一个相邻元素
Element.nextElementSibling : 获得下一个相邻元素
这两个方法是用来获取同级别的元素的 也就相当于元素的兄弟 比如说刚刚给大家举的例子：div是img的父级元素 img1和img2 都是div的子级元素 所以img1和img2 就是同级元素 他们都有一个共同的父级元素 就是div
二，DOM中的常用方法
接下来给大家做个简单的例题来示范一下这些方法：来通过按钮实现对图片的增加删除以及复制
这道题目还涉及了前两天教大家的函数以及点击事件哦 不知道大家还记得吗 赶快来跟我一起回忆一下吧
详细讲解如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Score</title>
</head>
<body>
<div id="div">
<img src="img/1.gif" id="img" >
<img src="img/2.gif" id="img2" >
</div>
<!-- 网页中最大的父级元素(element)是 document (文档)-->
<script type="text/javascript">
//parent 父级
console.log(img.parentElement);
//给img的父元素设置一个背景颜色
img.parentElement.style.background="pink";
//查询div中所有的子元素 记得要为div设置id
console.log(div.children);
//查询div中子元素的数量
console.log(div.children.length);
//第一个子节点
console.log(div.firstElementChild);
//最后一个子节点
console.log(div.lastElementChild)
//获得上一个相邻的元素
console.log(img2.previousElementSibling)
//获得下一个相邻的元素
console.log(img.nextElementSibling)
function fn2(){
//1.先创建一个图片标签
var i=document.createElement("img");
//把图片标签放在div中(记得要设置标签上的属性)
div.appendChild(i)
i.setAttribute("src","img/4.gif")
//这种方式不是所有的属性都能用
// i.src="img/4.gif"
}
//Node Element 这两个可以看作是同一个东西
function fn3(){
//每点击一次就删除最后一张
//1.拿到最后一张子节点
var i=div.lastElementChild;
//2.移除元素 通过父元素
div.removeChild(i);
}
function fn4(){
//复制节点(里面的参数是boolean类型
//代表是否要把子节点复制过去) 不填默认是false
var i=div.cloneNode(true)
//复制子节点时，也会把属性复制过去 但是id是唯一的 不允许有重复值 所以需要足以报错
// i.id=""; 这种方法不是所有属性都能用
i.setAttribute("id","");
//加入到body中去
document.body.appendChild(i)
}
</script>
<button onclick="fn2()">增加一张图片</button>
<button onclick="fn3()">删除一张图片</button>
<button onclick="fn4()">复制一张图片</button>
</body>
</html>
三，如何用JS操作表格
不知道大家有没有在淘宝购物的经历啊 每次打开自己的购物车是不是都有一种想把它全部清空的感觉 今天就来教大家 用JS如何做出这样的效果吧
1.操作表格的基本方法
table.rows : 表格中的行的集合
row.cells : 一行中的列的集合
table.insertRow(i) : 在表格中为i的位置插入一行 填入-1默认是最后一行
row.insertCell(i) : 在行中为i的位置插入一列
table.deleteRow(i) : 删除第i行
1.首先创造一个表格 将格式设置好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>score02</title>
</head>
<body>
<table border id="table">
<tr>
<td><input type="checkbox" onclick="fn1(this.checked)"></td>
<td>商品名字</td>
<td>商品价格</td>
<td>商品操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌🍌</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍉🍉🍉🍉🍉</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍑🍑🍑🍑🍑</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍐🍐🍐🍐🍐</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍇🍇🍇🍇🍇</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🥝🥝🥝🥝🥝</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
</table>
<button type="button" onclick="delLast()">删除表格最后一行</button>
<button type="button" onclick="delAll()">删除表格所有数据</button>
<button type="button" onclick="addRow()">增加表格数据</button>
</body>
</html>
2.接下来用到的就是昨天教大家的实现全选的方法了 大家还记得吗？
提醒一下 需要用到函数和check方法以及onclick点击事件哦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>score02</title>
</head>
<body>
<table border id="table">
<tr>
<td><input type="checkbox" onclick="fn1(this.checked)"></td>
<td>商品名字</td>
<td>商品价格</td>
<td>商品操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌🍌</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍉🍉🍉🍉🍉</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍑🍑🍑🍑🍑</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍐🍐🍐🍐🍐</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍇🍇🍇🍇🍇</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🥝🥝🥝🥝🥝</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
</table>
<button type="button" onclick="delLast()">删除表格最后一行</button>
<button type="button" onclick="delAll()">删除表格所有数据</button>
<button type="button" onclick="addRow()">增加表格数据</button>
<script type="text/javascript">
//全选操作
var fn1=(status)=>{
//找到页面中所有的输入框（多选框）
//页面中拿元素：id ，标签名，
var is=document.getElementsByTagName("input")
//设置状态与第一个相同（全选功能）
for(let i of is){
i.checked=status;
}
}
</script>
</body>
</html>
3.全选的效果完成过后 我们需要做的就是简单的删除和增加操作啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>score02</title>
</head>
<body>
<table border id="table">
<tr>
<td><input type="checkbox" onclick="fn1(this.checked)"></td>
<td>商品名字</td>
<td>商品价格</td>
<td>商品操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍌🍌🍌🍌🍌</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍉🍉🍉🍉🍉</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍑🍑🍑🍑🍑</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍐🍐🍐🍐🍐</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🍇🍇🍇🍇🍇</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>🥝🥝🥝🥝🥝</td>
<td>3.98</td>
<td>
<button type="button">删除</button>
</td>
</tr>
</table>
<button type="button" onclick="delLast()">删除表格最后一行</button>
<button type="button" onclick="delAll()">删除表格所有数据</button>
<button type="button" onclick="addRow()">增加表格数据</button>
<script type="text/javascript">
//全选操作
var fn1=(status)=>{
//找到页面中所有的输入框（多选框）
//页面中拿元素：id ，标签名，
var is=document.getElementsByTagName("input")
//设置状态与第一个相同（全选功能）
for(let i of is){
i.checked=status;
}
}
function load(){
//css选择器来选择元素
//在表格外面也有按钮的情况下 使用 标签名会不好 会选中界面中所有的按钮 所以可以用css
//选择器来选择元素
for( let i of document.querySelectorAll("td button")){
//i是表格中的每个按钮
//注意不要加（）因为加了（）会有返回值
i.onclick=del;
}
}
function del(){
//找到tr(按钮->列->行)
//this 谁调用了这个函数 this就是谁
var tr=this.parentElement.parentElement
//移除子元素必须根据父元素
//注意表格由三个部分 头 身 脚 如果不写 默认就是身体
//1.通过列来找父元素
//tr.parentElement.removeChild(tr);
//2.通过table来找子元素
//table.firstElementChild.removeChild(tr)
//3.万能方法
//把它的标签内容去除 这样界面上就没有显示了 但是它并没有消失 只是没有内容
// tr.innerHTML=""
//这个方法可以将标签也一起去除 就会完全消失
tr.outerHTML=""
}
function delLast(){
// 删除表格的行 -1 表示最后一行会一直删除 直到没有行
if(table.rows.length>1){
table.deleteRow(-1);
}
}
function delAll(){
while(table.rows.length>1){
table.deleteRow(-1);
}
}
function addRow(){
//表格增加一行
var tr=table.insertRow()
//给行增加列 但是是没有数据的
var d1=tr.insertCell()
var d2=tr.insertCell()
var d3=tr.insertCell()
var d4=tr.insertCell()
//内容
d1.innerHTML='<input type ="checkbox">'
d2.innerHTML="🍈🍈🍈🍈🍈"
d3.innerHTML="8.88"
d4.innerHTML="<button>删除</button>"
load();//重新给按钮设置点击事件
}
load()
</script>
</body>
</html>
就这样 一个简单的购物车就完成啦 你学会了吗？想要学习更多有趣的代码小知识 关注博主 精彩下期继续哦 。
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
