# DOM文本标签
## 获取和修改元素的文本内容
元素对象.text() //获取
元素对象.text("xxx") //修改
## 获取和修改元素的html内容
元素对象.html() //获取
元素对象.html("<h1>xxx</h1>") //修改
## 获取和修改元素的样式
元素对象.css("color"); //获取样式的值
元素对象.css("color","red"); //赋值
元素对象.css({xxx:"xx",xxx:"xx"}) //批量赋值
## 获取和修改元素的属性
元素对象.attr("属性名"); //获取
元素对象.attr("属性名","值"); //赋值
## 获取与修改元素的父子
### 获取元素的子元素们
元素对象.children()
### 获取元素的父元素
元素对象.parent();
## 案例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<body>
<input type="button" value="文本按钮">
<input type="button" value="html按钮">
<input type="button" value="样式按钮"><br>
<div>div1</div>
<div>div2</div>
<div style="color:red">div3</div>
</body>
</html>
要求:
1.点击文本按钮,获取div1的text值
2.点击html按钮,获取div2的html值
3.点击样式按钮,获取div3的css样式
4.点击文本按钮,给div1修改成文渊
5.点击html按钮,给div2修改成(标题一)文渊
6.点击样式按钮,给div3修改成(蓝色)
7.点击样式按钮,给div3修改成{(“颜色”:”green”),”高度”:”100px”,”宽度”:”100px”,”背景颜色”:”红色”}
# 操作DOM
## 创建元素
js: var d = document.createElement("div");
jq: var d = $("<div id='xxx'>xxxxx</div>");
## 添加元素
js: 父元素.appendChild(新元素)
jq: 父元素.append(新元素); //添加到最后面
父元素.prepend(新元素); //添加到最前面
## 插入元素
js: 父元素.insertBefore(新元素,弟弟);
jq: 弟弟.before(新元素);
哥哥.after(新元素);
## 删除元素
js: 父元素.removeChild(被删除的元素);
jq: 被删除的元素.remove();
## 案例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点之间的增删改查</title>
</head>
<body>
<input type="text">
<input type="button" value="添加">
<input type="button" value="插入">
<input type="button" value="删除"><br>
<ul>
<li>北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
</ul>
</body>
</html>
要求:
1.添加一个元素(香港)在最前面
2.添加一个元素(云南)在最后面
3.添加一个元素深圳在上海的后面
4.添加一个元素长沙在广州的前面
5.删除广州
6.删除第一个元素
7.删除最后一个元素
## 案例三
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h4>QQ通讯录</h4>
<ul>
<li>我的前任
<ul>
<li>王昭君</li>
<li>西施</li>
<li>杨玉环</li>
<li>貂蝉</li>
</ul>
</li>
<li>我的朋友
<ul>
<li>文渊</li>
<li>文化</li>
<li>文章</li>
</ul>
</li>
</ul>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人