JavaScript DOM编程(如何获取HTML标签的父元素和子元素)
今天迎来了我们的JS的第四讲，今天就给家人们浅讲一下如何获取JS中的HTML标签的父元素和子元素，大家有什么不懂的可以私信我或者在下方评论，看到了会回复噢，也希望一直跟着我在学JS的家人们，继续坚持下去!!!...
·
今天迎来了我们的JS的第四讲，今天就给家人们浅讲一下如何获取JS中的HTML标签的父元素和子元素，大家有什么不懂的可以私信我或者在下方评论，看到了会回复噢，也希望一直跟着我在学JS的家人们，继续坚持下去!!!
目录
一.什么是DOM?
- DOM其实就是文档对象模型，由该三个单词组成Document Object Model。
- 通过DOM可以动态改变文档
二.动态改变文档内容的原理
- 解析文档（如HTML）并生成DOM树
- 通过DOM标准接口+编程语言改变文档内容
三.DOM树中的节点类型和节点关系
document:网页中最大的父级元素 是DOM树的最上级 Element:元素 其实元素就是网页中的HTML标签 Node:节点 就把他理解成和元素是同一种就是HTML标签
四.Element常用属性(如何使用)
| 1 | Element.parent | 获取该元素的父级 |
| 2 | Element.children | 获取该元素中所有的子元素标签 |
| 3 | Element.childElementCount | 获取该元素中的子元素个数 |
| 4 | Element.firstElementChild | 获取该元素的第一个元素 |
| 5 | Element.lastElementChild | 获取该元素的最后一个元素 |
| 6 | Element.previousElementSibling | 拿到该元素的上一个相邻元素 |
| 7 | Element.nextElementSibling | 拿到该元素的下一个相邻元素 |
注：Element:元素 也就是HTML标签,我们通常给标签一个id名，使用id名调用属性
列如:
<div id="div">
<img src="img/1.gif">
</div>
获得div的子级元素，要写在我们的<script>标签中
<script>
这个div是我们的给<div>标签设置的id名
div.Element.children
</script>
1.Element.parent 获取元素的父级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<!-- 网页中最大的父级元素是document -->
<script>
// 给img标签的父元素设置背景颜色
// Element.parentElement拿到该元素的父级
// Element:元素(也可以称为标签) 元素就是标签的意思
// 注:这里的img是给标签设置的一个id名
img.parentElement.style.background="yellow";
</script>
</body>
</html>2. Element.children 获取该元素中所有的子元素标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
// Element.children:获取该元素中所有的子元素标签
console.log(div.children)
</script>
</body>
</html>
3.Element.childElementCount 获取该元素中的子元素个数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
// 查询div标签有多少个子元素
// 给我们div标签设置一个id名字也叫div
// Element.childElementCount:获取该元素中的子元素个数
console.log(div.childElementCount);
</script>
</body>
</html>4.Element.firstElementChild 获取该元素的第一个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
// Element.firstElementChild:获取该元素的第一个元素
console.log(div.firstElementChild);
</script>
</body>
</html>
5.Element.lastElementChild 获取该元素的最后一个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
// Element.lastElementChild:获取该元素的最后一个元素
console.log(div.lastElementChild);
</script>
</body>
</html>
6.Element.previousElementSibling 拿到该元素的上一个相邻元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
//Element.previousElementSibling 拿到该元素的上一个相邻元素
console.log(img.previousElementSibling);
</script>
</body>
</html>
7.Element.nextElementSibling 拿到该元素的上一个相邻元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
//Element.nextElementSibling 拿到该元素的下一个相邻元素
console.log(img.nextElementSibling);
</script>
</body>
</html>五.Element常用方法
| 1 | document.createElement(TagName) | 根据标签名创建Element元素 |
| 2 | Element.setAttribute(name,value) | 设置标签中的属性 |
| 3 | Element.getAttribute(name) | 获取标签中的属性 |
| 4 | Element.appendChild(Node） | 在内容末尾追加子节点 |
| 5 | Element.cloneNode(blooean) | 复制节点(是否复制子节点) |
| 6 | Element.removeChild(Node) | 移出子节点 |
| 7 | Element.insertBefore(Node1,Node2) | 将Node1插入在Node2之前 |
| 8 | Element.insertBefore(Node,null) | 末尾插入 |
| 9 | Element.before(Node) | 在节点后面添加节点 |
| 10 | Element.after(Node) | 在节点前面添加节点 |
| 11 | Element.replaceChild(Node1,Node2) | 用Npde1替换Node2 |
1.document.createElement(TagName) 根据标签名创建Element元素
2.Element.setAttribute(name,value) 设置标签中的属性
3.Element.appendChild(Node） 在内容末尾追加子节点
该三种方法运用在下方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<button onclick="add()">增加图片</button>
<script>
// document.createElement根据标签名创建Element元素
function add(){
var i=document.createElement("img");
// Element.setAttribute(name,value)设置标签中的属性
// name:属性名字 value:插入什么内容
i.setAttribute("src","img/4.gif")
// Element.appendChild:在内容末尾追加子节点
div.appendChild(i);
}
</script>
</body>
</html>
4.Element.cloneNode(blooean) 复制节点(是否复制子节点)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<button onclick="fz()">复制图片</button>
<!-- 网页中最大的父级元素是document -->
<script>
// 复制元素
function fz(){
// Element.cloneNode(blooean):复制元素
var i=div.cloneNode(true);
// 把id设置为""，因为id不能相同
i.setAttribute("id","");
// 追加到body中
document.body.appendChild(i);
}
</script>
</body>
</html>5.Element.removeChild(Node) 移出子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<button onclick="del()">删除图片</button>
<!-- 网页中最大的父级元素是document -->
<script>
// 删除子节点
function del(){
// 每点击一次删除最后一张照片
// 拿到最后一张
var i=div.lastElementChild
// 删除该最后一张图片
// Element.removeChild(Node):移出子元素
// Node 大家理解为和Element一样的意思
div.removeChild(i);
}
</script>
</body>
</html>6. Element.insertBefore(Node1,Node2) 将Node1插入在Node2之前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
// 在图片二前面插入一张图片
function addBefore(){
// 根据标签创建元素
var i=document.createElement("img");
i.setAttribute("src","img/5.gif");
// Element.insertBefore(Node1,Node2)
// 将Node1插入在Node2之前
div.insertBefore(i,img);
}
</script>
<button onclick="addBefore()">插入</button>
</body>
</html>
7.Element.insertBefore(Node,null) 末尾插入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
// 在末尾插入图片
function aAfter(){
// 根据标签创建元素
var i=document.createElement("img");
i.setAttribute("src","img/5.gif");
// Element.insertBefore(Node,null)
// 末尾插入
div.insertBefore(i,null);
}
</script>
<button onclick="aAfter()">末尾插入</button>
</body>8.Element.before(Node) 在节点后面添加节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<!-- 网页中最大的父级元素是document -->
<script>
// 在节点后面添加节点
function bBefore(){
// 根据标签创建元素
var i=document.createElement("img");
i.setAttribute("src","img/5.gif");
// Element.before(Node)
// 末尾插入
img.before(i);
}
</script>
<button onclick="bBefore()">在第二张图片后面插入一个节点</button>
</body>
</html>
9. Element.after(Node)) 在节点前面添加节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
// 在节点前面添加节点
function bAfter(){
// 根据标签创建元素
var i=document.createElement("img");
i.setAttribute("src","img/5.gif");
// Element.after(Node)
// 在节点前面添加节点
img.after(i);
}
</script>
<button onclick="bAfter()">在第二张图片面插入一个节点</button>
</body>
</html>
10.Element.replaceChild(Node1,Node2) 用Npde1替换Node2
只能替换一次，在点击按钮替换会报错
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div">
<img src="img/1.gif">
<img src="img/2.gif" id="img">
<img src="img/3.gif">
</div>
<script>
// 把图片二替换成一张新的图片
function replace1(){
// 根据标签创建元素
var i=document.createElement("img");
i.setAttribute("src","img/5.gif");
// Element.replaceChild(Node1,Node2)
// 用Npde1替换Node2
div.replaceChild(i,img);
}
</script>
<button onclick="replace1()">替换图片</button>
</body>
</html>
六.使用JS操作表格
DOM结构中，table标签中的子节点是Tbody
| table.rows | 表格中的行集合 |
| row.cells | 一行中列的集合 |
| table.insertRow(i) | 在表中为i的位置插入一行 |
| row.insertCell(i) | 在行中为i的位置插入一列 |
| table.deleteRow(i) | 删除第i行 |
把代码放在下方大家去看下，自己敲一遍理解如何使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作表格数据</title>
</head>
<body>
<!-- 题目一:当点击表格第一个多选框时，第一个多选框相当于我们购物时全选按钮，
点击他时其他多选框也要是被勾选的状态-->
<!-- 1.先创建一个表格 -->
<!-- table:表格 tr:行 td:列 border:边框-->
<!-- 2.拿到自己的状态 -->
<!-- 题目二:删除最后一行数据 -->
<!-- 题目三：删除所有数据 -->
<!-- 题目四:点击删除按钮删除该行的数据 -->
<!-- 题目五:增加数据 -->
<table border id="table">
<tr>
<td><input type="checkbox" onclick="fn1(this.checked)"></td>
<td>商品名字</td>
<td>商品价格</td>
<td>商品操作</td>
</tr>
<tr>
<!-- this是自己的意思，自己的状态,把自己
是否被选中的状态传进我们的函数-->
<td><input type="checkbox"></td>
<td>香蕉</td>
<td>3.5/一斤</td>
<td><button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>香蕉</td>
<td>3.5/一斤</td>
<td><button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>香蕉</td>
<td>3.5/一斤</td>
<td><button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>香蕉</td>
<td>3.5/一斤</td>
<td><button>删除</button></td>
</tr>
</table>
<script>
// 题目一:
function fn1(cbx){
// 拿到每一个多选框
var is=document.getElementsByTagName("input")
// is是一个数组，我们使用foreach循环遍历
// 大家要记住用foreach循环不要使用var 使用我们的let
// 因为var会有bug
for(let i of is){
i.checked=cbx;
}
}
// 题目二:
//1.首先先拿到最后一行数据
function delLast(){
//table.deleteRows删除第几行
// 当该表数据比一行多就删除最后一行
// table.
if(table.rows.length>1){
table.deleteRow(-1);
}
}
//题目三:
function delAll(){
while(table.rows.length>1){
table.deleteRow(-1);
}
}
function load(){
// 拿到td标签下的button 标签
for(let i of document.querySelectorAll("td button"))
// 给按钮点击事件调用删除方法
i.onclick=del;
}
// 题目四:
function del(){
//点击按钮时删除该一行，所有我们要拿到该行进行删除
// this是自己的意思，谁调用这个函数，this就是谁
// 我们要拿到tr该行删除，tr使我们按钮的父级
// Element.parentElement 获得元素的父级元素
// Element是元素的意思，元素我们可以理解为就是我们的html标签
// 这里用了两个，意味着我们是拿他的父级元素
var tr=this.parentElement.parentElement
//去除该标签中的内容
// tr.innerHTML="";
// 删除标签+标签的内容
tr.outerHTML="";
}
// 题目五:
function add(){
// table:是我们给表格的id名
// table.insertRow(i):在表格中为i的位置插入一行
var tr=table.insertRow();
// row.insertCell:在行里面插列
var d1=tr.insertCell();
var d2=tr.insertCell();
var d3=tr.insertCell();
var d4=tr.insertCell();
// 给每一列插内容
// innerHTM可以插html标签也可以插文字
d1.innerHTML='<input type="checkbox">'
// textContent 可以插文字，无法插html标签
d2.textContent="西瓜";
d3.textContent="2.22/斤";
d4.innerHTML="<button>删除</button>"
// 调用删除方法:让我们新增的数据删除按钮也可以删除数据
load();
}
// 调用方法
load();
</script>
<br><button onclick="delLast()">删除最后一行</button>
<button onclick="delAll()">删除表格中所有数据</button>
<button onclick="add()">增加数据</button>
</body>
</html>
今天的课程也到此结束咯，大家跟着代码敲，代码上也打了详细的注释自己好好去理解，有不懂的发私信或者在下方评论，也希望大家要坚持不懈的学下去，不定期更新噢。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
10
0- 0
已为社区贡献8条内容
所有评论(0)