WEB入门之十六操作DOM节点

teayear

已于 2022-12-23 18:22:21 修改

阅读量3.5k

点赞数 1

分类专栏：前端技术道本自然文章标签： web dom 树形节点 bom 前端学习

于 2017-02-26 08:10:12 首次发布

本文链接：https://blog.csdn.net/zhangchen124/article/details/57387883

版权

道本自然同时被 2 个专栏收录

743 篇文章 39 订阅

订阅专栏

前端技术

260 篇文章 18 订阅

订阅专栏

视频课：https://edu.csdn.net/course/play/7621

学习内容

jQuery插入DOM节点

jQuery删除DOM节点

jQuery替换DOM节点

jQuery筛选DOM节点

能力目标

能熟练使用jQuery进行节点操作

能熟练使用jQuery进行节点筛选

本章简介

DOM是Document Object Model的缩写，即文档对象模型，它是W3C的标准规范，提供了使用JavaScript操纵页面元素的接口。节点是DOM中最基本的组成单位，每个标签、每个文本都可以看成是一个节点。本章将学习使用jQuery对DOM节点进行操作。

核心技能部分

7.1 节点操作

节点是DOM中最基本的组成单位，每个标签、每个文本都可以看成是一个节点。节点操作包括获得节点、插入节点、删除节点、复制节点和替换节点等等。

7.1.1 获得节点

节点一般分为三种：元素节点、文本节点和属性节点。元素节点通常使用前面讲的各种选择器即可获得；文本节点使用text( )函数即可获得；属性节点使用attr( )函数即可获得。这些内容在前面都已经讲过，此处不再多述。

7.1.2 插入节点

在实际开发中，有些节点需要动态的插入到页面中，这时可以通过jQuery提供好的一些函数来实现，详见表7-1-1所示。

表7-1-1 节点插入函数

函数	说明
append( )	A.append ( B )，把B添加到A元素内的尾部
prepend( )	A.prepend( B )，把B添加到A元素内的头部
before( )	A.before( B )，把B添加到A的前面
after( )	A.after( B )，把B添加到A的后面

jQuery提供的节点插入函数比较全面，下面通过一些示例来演示这些函数的用法，注意它们之间的区别。

示例7.1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.1</title>
<script src="jquery-1.7.2.min.js"></script>
<style type="text/css">
#wai {
border: thin solid #000000;
height: 80px;
width: 150px;
padding-top:20px;
}
#nei {
border: thin dashed #000000;
height: 50px;
width: 50px;
display:inline;
}
</style>
</head>
<body>
<div id="wai"><a href="#">jQuery</a></div>
</body>
</html>
<script>
$("#wai").append("<div id='nei'>新插入的div</div>");
</script>

网页原本只有一个包含超链接的div，我们通过append方法向该div内的尾部插入了一个新的div

网页上原本存在的是边框为实线的div，而边框是虚线的是新插入的div。如果把代码中的append函数换成prepend函数，其他不变

通过对比可以得出append和prepend这两个函数的异同点：这两个函数都是向元素内部插入新节点的，append函数是把节点插入到元素内的尾部，而prepend函数是把节点插入到元素内的头部了。

如果把代码中的prepend换成before函数，其他不变

如果把代码中的before换成after函数，其他不变

通过对比可以得出before和after这两个函数的异同点：这两个函数都是向元素外部插入新节点的，before函数是把节点插入到元素的前面，after函数是把节点插入到元素的后面。

7.1.3 删除节点

删除节点指的是把现有的元素从网页中删除，这时可以通过jQuery提供好的一些函数来实现，详见表7-1-2所示。

表7-1-2 节点删除函数

函数	说明
remove( )	A.remove( )，把A从页面中删除掉
empty( )	A.empty( )，把A中的所有子元素删除掉

这两个函数都比较简单，下面通过一些示例来演示这些函数的用法，特别是它们之间的区别。

示例7.2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.2</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<select id="yuyan">
<option>Java</option>
<option>C#</option>
<option>PHP</option>
<option>SQL</option>
</select>
</body>
</html>
<script>
$("#yuyan").empty();
</script>

网页上原本有个下拉列表框

我们看到下拉列表框中的所有子元素（option）都被删掉了。如果把代码中的empty换成remove函数，其他不变，运行后会发现整个下拉列表框都被删除掉了。

7.1.4 替换节点

替换节点是指把现有的元素用别的元素替换，这主要通过jQuery中的replaceWith函数实现，下面是具体的示例。

示例7.3

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.3</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
请选择你喜欢的编程语言：<br/>
<input type="checkbox"/><span>Java</span>
<input type="checkbox"/><span>C#</span>
<input type="checkbox"/><span>C++</span>
</body>
</html>
<script>
$("span").mouseover(
function(){
$(this).replaceWith("<span style='color:red'>"+
                                       $(this).text()+"</span>");
}
)
</script>

在上述代码中，当鼠标悬浮到某个语言上时，通过replaceWith函数把原节点（黑色字体）使用红色字体的节点进行了替换

7.1.5 包裹节点

包裹节点是指使用其他节点包裹住某节点，使节点成为其他节点的子节点，这可以通过表7-1-3中的函数实现。

表7-1-3 节点包裹函数

函数	说明
wrap( )	A.wrap( B )，用B包裹每一个A
wrapAll( )	A.wrapAll( B )，把所有的A作为整体用B包裹
wrapInner( )	A.wrapInner( B )，用B把A中的子元素整个包裹

我们先通过一个示例演示wrap和wrapAll函数的区别，参考代码如下所示。

示例7.4

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.4</title>
<script src="jquery-1.7.2.min.js"></script>
<style type="text/css">
#wai {
border: thin solid #000000;
}
</style>
</head>
<body>
<h3>jQuery简介</h3>
<span>jQuery是创建于2006年1月的开源项目，主要包括核心库、UI和插件三部分。</span><br/>
<span>jQuery凭借简洁、优雅的语法和跨平台的兼容性，极大的简化了JavaScript的开发难度。</span><br/>
<span>jQuery强调的理念是：写得少、做得多（write less, do more）。</span><br/>
<span>jQuery独特的选择器、链式的DOM操作、可靠成熟的事件处理机制都是其他JavaScript库无法比拟的。</span>
</body>
</html>
<script>
$("span").wrap("<div id='wai'></div>");
</script>

上述代码使用wrap函数给所有的span标签包裹了一个带有黑色边框的div

如果把上述代码中的wrap换成wrapAll函数，其他不变

wrapInner函数用来包裹元素内的子元素，下面是该函数的一个示例。

示例7.5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.5</title>
<script src="jquery-1.7.2.min.js"></script>
<style type="text/css">
#wai {
border: thin solid #000000;
}
</style>
</head>
<body>
<ul>
<li>Java</li>
<li>C#</li>
<li>PHP</li>
<li>C++</li>
</ul>
</body>
</html>
<script>
$("ul").wrapInner("<div id='wai'></div>");
</script>

上述代码使用wrapInner函数包裹ul中的所有li子元素

7.1.6 复制节点

clone函数用来复制节点，下面是该函数的一个示例。

示例7.6

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例7.6</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<select id="s1" size="4">
  <option value="java" selected="selected">Java</option>
  <option value="c#">C#</option>
  <option value="php">PHP</option>
  <option value="c++">C++</option>
</select>
<input type="button" id="btn" value=">>"/>
<select id="s2" size="4">
</select>
</body>
</html>
<script>
$("#btn").click(
function(){
$("#s2").append($("select option:selected").clone());
}
)
</script>

上述代码包含两个下拉列表框，当单击按钮时通过clone函数把第一个下拉列表框的选中项，复制到了另一个下拉列表框中。

7.2 节点筛选

前面我们学习了过滤选择器，它是在获取到元素后通过索引进一步进行了过滤或筛选。除此之外，jQuery还提供了很多函数来对获取到的元素进一步进行过滤或筛选，这些函数整体可分为两大类：节点过滤函数和节点查找函数。

7.2.1 过滤节点

节点过滤函数主要是通过索引来获取节点，详见表7-1-4所示。

表7-1-4 节点过滤函数

节点过滤函数	说明
eq( )	按索引获取匹配元素中的第n个元素，索引从0开始
first( )	获取匹配元素中的第1个元素
last( )	获取匹配元素中的最后1个元素
slice( )	按起始索引获取匹配元素中的子集

下面通过一个示例来演示eq、first、last和slice函数的用法，这几个函数有个共同点：都是通过索引进行过滤的。

示例7.7

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例7.7</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table width="571" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#99CCFF">
 <form name="userfrm">
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">名字：</td>
    <td width="415" align="left" bordercolor="#E7E3E7"><input name="fname" type="text" class="register_textBroader"
 id="fname" size="24"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">姓氏：</td>
    <td align="left" bordercolor="#E7E3E7"><input name="lname" type="text" class="register_textBroader"  id="lname"
size="24"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150"  align="right" bgcolor="#E7FBFF">登录名：</td>
    <td align="left" bordercolor="#E7E3E7"> <input name="sname" type="text" class="register_textBroader"  id="sname"
size="24"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">密码：</td>
    <td align="left" bordercolor="#E7E3E7"> <input name="pass" type="password" class="register_textBroader"  
id="pass" size="26"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" height="0" align="right" bgcolor="#E7FBFF">再次输入密码：</td>
    <td height="0" align="left" bordercolor="#E7E3E7"><input name="rpass" type="password"
class="register_textBroader"  id="rpass" size="26"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" height="0" align="right" bgcolor="#E7FBFF">电子邮箱：</td>
    <td height="0" align="left" bordercolor="#E7E3E7"><input name="email" type="text" class="register_textBroader"  
id="email" size="24"></td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">性别：</td>
    <td align="left" bordercolor="#E7E3E7">
<input name="gen" type="radio"   value="男" checked>男 
    <input name="gen" type="radio" value="女" class="input">女
    </td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">爱好：</td>
    <td align="left" bordercolor="#E7E3E7">
  <label>
  	<input type="checkbox" name="checkbox" value="运动">
  </label>
  运动  
  <label>
  <input type="checkbox" name="checkbox2" value="聊天">
  </label>
聊天  
  <label>
<input type="checkbox" name="checkbox22" value="玩游戏">
  </label>
玩游戏
</td>
  </tr>
  <tr class="register_table_line">
    <td width="150" align="right" bgcolor="#E7FBFF">出生日期：</td>
    <td align="left" bordercolor="#E7E3E7">
<input name="byear" class="register_textBroader"   id="byear" onfocus="this.value=''" value="yyyy"
size=4 maxlength=4 > 年  
   <select name="bmon"  >
<option value="" selected>[选择月份]
     <option value=0>一月
     <option value=1>二月
     <option value=2>三月
     <option value=3>四月
     <option value=4>五月
     <option value=5>六月
     <option value=6>七月
     <option value=7>八月
     <option value=8>九月
     <option value=9>十月
     <option value=10>十一月
     <option value=11>十二月
  </select> 月  
  <input name="bday" class="register_textBroader" id="bday" onfocus="this.value=''" value="dd" size=2 maxlength=2 >日
</td>
  </tr>
  <tr class="register_table_line">
    <td width="150" height="35" align="right" bgcolor="#E7FBFF">
        <input type="reset" id="reset" value="重填"></td>
    <td height="35" align="center" bordercolor="#E7E3E7">
<input type="button" id="btn" value="注册">
</td>
  </tr>
  </form>
</table>
<script>
$("#btn").click(
function(){
var t1="第一个文本框的值是："+$(":text").first().val()+"\n";
var t2="索引是1的文本框的值是："+$(":text").eq(1).val()+"\n";
var t3="最后一个文本框的值是："+$(":text").last().val()+"\n";
var t4="前两个复选框的值是：";
$(":checkbox").slice(0,2).each(
function(){
t4=t4+$(this).val();
}
)
alert(t1+t2+t3+t4);
}
)
</script>
</body>
</html>

上述代码分别使用eq、first、last和slice函数结合选择器获取了相关表单数据

7.2.2 查找节点

节点查找函数用来通过父子、平级、后代等关系查找节点，详见表7-1-5所示。

表7-1-5 节点查找函数

节点查找函数	说明
children( )	根据条件获取元素的子元素
parent( )	获取元素的父元素
prev( )	获取紧挨着的前一个平级元素
next( )	获取紧挨着的后一个平级元素
find( )	根据条件找出元素的后代元素
siblings( )	找出与元素平级的所有其他元素

下面我们通过一个示例来演示这几个函数的具体用法，参考代码如下所示。

示例7.8

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>示例7.8</TITLE>
<script src="jquery-1.7.2.min.js"></script>
</HEAD>
<BODY>
<DIV>       
<A href="#"><IMG src="sx.gif" width="15" height="15"  border="0" align="absmiddle" >分类讨论区</A>
    <DIV id="1" style="padding-left:15px;">BBS系统<BR>
            共建水木<BR>
            站务公告栏<BR>
            妆点水木<BR>
</DIV>
</DIV>
<DIV>
<A href="#"><IMG src="sx.gif" width="15" height="15" border="0" align="absmiddle">社会信息</A>
    <DIV id="2" style="padding-left:15px;" >美容品与饰品代理<BR>
            考研资料市场<BR>
            商海纵横<BR>
            动物保护者<BR>
            动物世界<BR>
</DIV>
</DIV>
<DIV>
<A href="#"><IMG src="sx.gif" width="15" height="15" border="0" align="absmiddle">休闲娱乐</A>
     <DIV id="3" style="padding-left:15px;" >
            七彩水木<BR>
            网友聚会<BR>
            醉品人生<BR>
            花木园艺<BR>
     </DIV>
</DIV>
<DIV>
<A href="#"><IMG src="sx.gif" width="15" height="15" border="0" align="absmiddle">电脑技术</A>
     <DIV id="4" style="padding-left:15px;" >BBS安装管理<BR>
            CAD技术<BR>
            数字图像设计<BR>
            电脑音乐制作<BR>
            软件加密与解密<BR>
 </DIV>
</DIV>
</BODY>
</HTML>
<script>
alert($("#4").parent().children("a").text());
alert($("#4").prev().text());
alert($("#3").parent().next().html());
alert($("#4").parent().find("a").text());
alert($("#4").siblings().html());
</script>

上述代码包含了一个树形菜单

本章总结

节点操作是DOM最基础的操作，也比较繁琐，包括插入节点、删除节点、复制节点等。jQuery针对节点操作提供了很多函数供开发人员使用，这些函数很多比较相似，大家在使用的时候要注意区分。

任务实训部分

1：动态管理树形菜单

训练技能点

Ø jQuery节点操作

需求说明

使用jQuery节点操作函数对树形菜单进行动态添加和删除，如图7.2.1所示。添加节点时，需要先单击选中某个一级或二级节点，然后在文本框中填写新添加的节点名，单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。

图7.2.1 树形菜单

实现步骤

（1）实现图7.2.1所示的界面，参考代码如下所示。

<style>
div{
width:120px;
}
.sec{
margin-left:15px;
}
.three{
margin-left:25px;
}
a:link,a:visited{
text-decoration:none;
color:black;
}
</style>
</head>
 
<body>
节点文本：<input id="txt" type="text" size="10" /><input id="btn_add" type="button" value="添加"/><input id="btn_del" type="button" value="删除"/>
<div id="g1"><img src="img/jia.gif"/><a href="#">国产</a>
  <div>
<div class="sec"><img src="img/jia.gif"/><a href="#">北京奔驰</a></div>
<div class="sec"><img src="img/jia.gif"/><a href="#">北京现代</a>
<div class="three"><img src="img/flag.gif"/><a href="#">悦翔</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#">索纳塔</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#">途胜</a></div>
<div class="three"><img src="img/flag.gif"/><a href="#">伊兰特</a></div>
</div>
<div class="sec"><img src="img/jia.gif"/><a href="#">比亚迪</a></div>
  </div>
</div>
</body>
（2）实现节点的添加，参考代码如下所示。
<script>
var temp="";
$("a").live("click",function(e){
temp=$(this).parent();
}
);
$("#btn_del").click(
function(){
if(temp=="")
alert("删除之前请先单击某个三级节点！");
else if(temp.attr("class")!="three")
alert("你单击的不是三级节点！");
else
temp.remove();
}
);
$("#btn_add").click(
function(){
if($("#txt").val()!="")
{
if(temp=="")
alert("添加之前请先单击某个一级或二级节点！");
else if(temp.attr("class")=="three")
alert("请单击一级或二级节点！");
else
{
if(temp.attr("class")=="sec")
{
temp.append("<div class='three'>
<img src='img/flag.gif'/><a href='#'>"+$('#txt').val()+"</a></div>");
}
else
{
temp.append("<div class='sec'>
<img src='img/jian.gif'/><a href='#'>"+$('#txt').val()+"</a></div>");
}
}
}
}
);
</script>

2：动态管理表格

训练技能点

Ø jQuery节点操作

需求说明

使用jQuery节点操作函数对行进行动态添加和删除。

实现步骤

（1）实现图7.2.2所示的界面，参考代码如下所示。

<body>
<table width="58%" height="38" border="1" align="center" id="t">
  <tr>
    <td bgcolor="#999999"><div align="center">商品名称</div></td>
    <td bgcolor="#999999"><div align="center">商品售价</div></td>
    <td bgcolor="#999999"><div align="center">产地</div></td>
    <td bgcolor="#999999"><div align="center">删除</div></td>
  </tr>
</table>
<p align="center">添加商品
<form>
  <p align="center">商品名称：
    <input type="text" id="pname" />
  </p>
  <p align="center">商品售价：
    <input type="text" id="price" />
  </p>
  <p align="center">商品产地：
    <input type="text" id="paddress" />
  </p>
  <p align="center">
    <input type="button" id="btn" value="添加商品"/>
</p>
</form>
</body>
（2）实现商品的添加和删除，参考代码如下所示。
<script>
$("a").live("click",function(){
$(this).parent().parent().parent().remove();
}
)
$("#btn").click(
function(){
$("#t")	.append("<tr><td bgcolor='#999999'>
<div align='center'>"+$("#pname").val()+"</div></td><td bgcolor='#999999'>
<div align='center'>"+$("#price").val()+"</div></td><td bgcolor='#999999'>
<div align='center'>"+$("#paddress").val()+"</div></td><td bgcolor='#999999'>
<div align='center'><a href='#'>删除</a></div></td></tr>");
}
)
</script>

3：省市级联

训练技能点

Ø jQuery节点操作

需求说明

按照图7.2.3所示的界面使用jQuery节点操作函数实现省市级联。

4：价格小计

训练技能点

Ø jQuery节点操作

需求说明

按照图7.2.4所示的界面使用jQuery节点操作函数实现价格小计。单击“加”“减”图片可以修改文本框中的数值大小，同时后面的小计要计算出来。

巩固练习

一、问答题

1. 请举例描述append和prepend这两个函数的异同点。

2. 请举例描述before和after这两个函数的异同点。

3. 请举例描述remove和empty这两个函数的异同点。

二、上机练习

使用jQuery节点操作函数实现表格内容的修改。当单击【修改】按钮时，单元格中的文本信息替换为文本框；单击【确定】按钮时，文本框中的数据显示到单元格中。

teayear

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
WEB入门之十六操作DOM节点

学习内容jQuery插入DOM节点jQuery删除DOM节点jQuery替换DOM节点jQuery筛选DOM节点能力目标能熟练使用jQuery进行节点操作能熟练使用jQuery进行节点筛选本章简介DOM是Document Object Model的缩写，即文档对象模型，它是W3C的标准规范，提供了使用JavaScript操纵页面元素的接口。节点是DOM中最基本的组成单位，每个标签、每
复制链接

扫一扫