day6JS-DOM(文档对象模型)
DOM树
DOM 操作
1. 获取元素
1.1 根据id名获取元素
document.getElementById("id名");案例：
<body><div id="box">div盒子</div><h1>一级标题</h1><script>console.log(document.getElementById("box"))</script>
</body>1.2 根据标签名获取
// 返回一个集合 （类数组对象）从整个文档获取
document.getElementsByTagName("标签名") // 从element的后代元素中获取
element.getElementsByTagName("标签名") 案例：
<body><div id="box">div盒子</div><h1>一级标题</h1><p>段落1</p><p>段落2</p><p>段落3</p><script>//获取到文档中所有的p标签，返回的是一个集合console.log(document.getElementsByTagName("p"))</script>
</body>1.3 根据类名获取（不兼容ie6~8）
// 返回一个集合（类数组对象） 从整个文档获取
document.getElementsByClassName("class名") // 从element的后代中获取
element.getElementsByClassName("class名") 案例：
<body><div class="box">div盒子</div><h1>一级标题</h1><p>段落1</p><p>段落2</p><p>段落3</p><script>console.log(document.getElementsByClassName("box"))</script>
</body>1.4 根据 name 属性值获取(适用于表单标签)
正常的规范中，咱们只会给表单元素起name值，如果给其它元素设置name，在ie9以下版本浏览器不兼容，是获取不到的，所以为了这种情况，咱们以后养成习惯，只给表单元素用name，非表单元素不用name。
//返回集合，只有document才有该方法
document.getElementsByName("name属性的值") 案例：
<body>用户名：<input type="text" name="usename" value="">用户名：<input type="password" name="pwd" value=""><script>console.log(document.getElementsByName("usename"))</script>
</body>1.5 根据css选择器获取（重点记忆）
注意：querySelector（） 和querySelectorAll（） 在ie6-ie8 下不兼容。
//选择器第一个满足选择器条件的
document.querySelector(选择器)
//选择所有满足选择器条件的，返回nodeList（类数组对象）
document.querySelectorAll(选择器) element.querySelector(选择器)
element.querySelectorAll(选择器)案例：
<body><div id="divbox"><p class="pbox">段落1</p><p>段落2</p>用户名：<input type="text" name="usename" value=""></div><script>//querySelector只能获取第一个符合条件的元素console.log(document.querySelector("#divbox"))console.log(document.querySelector(".pbox"))console.log(document.querySelector("#divbox p"))// querySelectorAll获取所有符合条件的元素，返回的是集合console.log(document.querySelectorAll("#divbox"))console.log(document.querySelectorAll(".pbox"))console.log(document.querySelectorAll("#divbox p"))console.log(document.querySelectorAll("input"))</script>
</body>注意！！！
根据css选择器获取时，是什么选择器就要带上该选择器的语法符号。
例如：id选择器 ---- #选择器名； 类选择器 ---- .选择器名
1.6 获取Head元素对象
document.head 案例：
<body><script>console.log(document.head);</script>
</body>1.7 获取body元素对象
document.body案例：
<body><script>console.log(document.body);</script>
</body>1.8 获取html元素对象
document.documentElement案例：
<body><script>console.log(document.documentElement);</script>
</body>1.9 获取一屏幕的宽度或者高度
// 获取一屏幕的高度
let vH = document.documentElement.clientHeight || document.body.clientHeight;// 获取一屏幕的宽度
let vW = document.documentElement.clientWidth || document.body.clientWidth;1.10 id小妙招
直接把id当成变量去用的时候，可以获取相应的id元素。（浏览器的机制）。
<div id="box1">111</div>
<script>console.log(box1)
</script>2. 节点
2.1 常用的节点5个
- 文档节点
- 属性节点
- 元素（标签）节点
- 文本节点
- 注释节点
2.2 文档节点
- nodeType（节点类型）：9（类型值9就是文档节点）
- nodeName（节点名称）：" #document "
- nodeValue（节点值）: null
案例:
<body><script>console.log(document.nodeType);//9console.log(document.nodeName);//#documentconsole.log(document.nodeValue);//null</script>
</body>2.3 元素节点（重点记忆）
- nodeType（节点类型）：1（类型值1就是元素节点）
- nodeName（节点名称）：大写的标签名
- nodeValue（节点值）: null
案例：
<body><div id="box">111</div><div class="one">222</div><h1>大标题</h1><script>// 1.根据id属性先获取元素let divBox = document.getElementById("box");console.log(divBox.nodeType);//1console.log(divBox.nodeName);//DIVconsole.log(divBox.nodeValue);//nulllet divBox2 = document.querySelector("h1");console.log(divBox2.nodeType);//1console.log(divBox2.nodeName);//H1console.log(divBox2.nodeValue);//null</script>
</body>2.4 属性节点
- nodeType（节点类型）：2（类型值2就是属性节点）
- nodeName（节点名称）：属性名
- nodeValue（节点值）: 属性值
getAttributeNode("属性名") 方法从当前元素中通过属性名称获取属性节点。
案例：
<body><div id="box" class="one" name="xiaoxiao">111</div><script>// 1.先获取属性var myclass1 = box.getAttributeNode("class");// 2.在控制台输出console.log(myclass1);//class="one"console.log(myclass1.nodeType);//2console.log(myclass1.nodeName);//classconsole.log(myclass1.nodeValue);//one// 1.先获取属性var myclass2 = box.getAttributeNode("name");// 2.在控制台输出console.log(myclass2);//name="xiaoxiao"console.log(myclass2.nodeType);//2console.log(myclass2.nodeName);//nameconsole.log(myclass2.nodeValue);//xiaoxiao</script>
</body>2.5 文本节点
- nodeType（节点类型）：3（类型值3就是文本节点）
- nodeName（节点名称）：" # text "
- nodeValue（节点值）: 文本内容
- 在标准浏览器中，换行和空格也属于文本节点
使用childNodes方法获得文本内容。
案例：
<body><div id="box">111</div><div class="one">222</div><h1>大标题</h1><script>// 1.根据id属性先获取元素let h1Box = document.querySelector("h1");let textBox = h1Box.childNodes[0];console.log(textBox);//"大标题"console.log(textBox.nodeType);//3console.log(textBox.nodeName);//#textconsole.log(textBox.nodeValue);//大标题</script>
</body>2.6 注释节点
- nodeType（节点类型）：8（类型值8就是注释节点）
- nodeName（节点名称）：" #comment "
- nodeValue（节点值）: 注释的内容
<body><!--这是一个div --><div id="box">111</div><script>let commentBox = document.body.childNodes[1];console.log(commentBox);//<!--这是一个div -->console.log(commentBox.nodeType);//8console.log(commentBox.nodeName);//#commentconsole.log(commentBox.nodeValue);//这是一个div</script>
</body>3. 节点之间关系的属性
3.1 节点类
parentNode ：父节点。
childNodes ：所有子节点的集合。
firstChild ：第一个子节点。
lastChild ：最后一个子节点。
previousSibling ：上一个兄弟节点。
nextSibling ：下一个兄弟节点。
3.2 元素类
children ：所有子元素的集合。
firstElementChild ：第一个子元素 IE9+。
lastElementChild ：最后一个子元素 IE9+。
previousElementSibling ：上一个兄弟元素 IE9+。
nextElementSibling ：下一个兄弟元素 IE9+。
4. 节点查找方式
4.1 parentNode（父节点）
获取当前节点唯一的父亲节点。
<body><div id="box">111</div><script>console.log(box.parentNode);</script>
</body>4.2 childNodes（子节点）
获取当前节点所有的子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><script>console.log(ulBox.childNodes);//NodeList(7)</script>
</body>注意！！！
在js中换行和空格也算是text文本内容。
4.3 firstChild
获取当前节点的第一个子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><script>console.log(ulBox.firstChild);//#text</script>
</body>4.4 lastChild
获取被选节点的最后一个子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><script>console.log(ulBox.lastChild);//#text</script>
</body>4.5 previousSibling
获取当前节点的上一个兄弟节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.previousSibling);//#text</script>
</body>4.6 nextSibling
获取当前节点的下一个兄弟节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.nextSibling);//#text</script>
</body>5. 元素查找方式
5.1 children
获取当前元素所有的元素子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.children);//[li,li,li]</script>
</body>5.2 firstElementChild
获取当前节点的第一个元素子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.firstElementChild);//<li>查找子节点1</li></script>
</body>5.3 lastElementChild
获取当前节点的最后一个元素子节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.lastElementChild);//<li>查找子节点3</li></script>
</body>5.4 previousElementSibling
获取当前节点的上一个兄弟元素节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.previousElementSibling);//<div id="box">111</div></script>
</body>5.5 nextElementSibling
获取当前节点的下一个兄弟元素节点。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>console.log(ulBox.nextElementSibling);//<h1>标题</h1></script>
</body>6.练习题
使用previousSibling编写出previousElementSibling的效果。
<body><div id="box">111</div><ul id="ulBox"><li>查找子节点1</li><li>查找子节点2</li><li>查找子节点3</li></ul><h1>标题</h1><script>function getPreviousSibling(itme) {let getPrevious = itme.previousSibling;while (getPrevious && getPrevious.nodeType !== 1) {getPrevious = getPrevious.previousSibling;}return getPrevious;}let ulBox = document.querySelector("#ulBox");let result = getPreviousSibling(ulBox);console.log(result);</script>
</body>DOM 的增删改
1. createElement：创建一个元素
document.createElement("标签名");案例：
<body><script>// 1.创建标签let div = document.createElement("div");// 2.给标签添加内容div.innerHTML = "这是一个div标签";// 3.把标签写入页面document.body.appendChild(div);</script>
</body>2. createTextNode: 创建一个文本节点
var/let 变量名 = document.createTextNode("文本内容");案例：
<body><script>// 1.创建标签let div = document.createElement("div");// 2.给标签添加内容let divText = document.createTextNode("这是一个div标签");div.appendChild(divText);// 3.把标签写入页面document.body.appendChild(div);</script>
</body>3. appendChild: 把元素追加到一个容器的末尾
语法：父元素.appendChild(子元素)；
<body><script>// 1.创建标签let div = document.createElement("div");// 2.给标签添加内容let divText = document.createTextNode("这是一个div标签");div.appendChild(divText);// 3.把标签写入页面document.body.appendChild(div);</script>
</body>4. insertBefore: 把一个元素插入到另一个元素的前面
步骤一：创建一个标签（元素）。
步骤二：给标签（元素）添加内容。
步骤三：获取到指定一个父节点。然后父节点使用insertBefore插入。
语法：
var/let 变量名 = 父节点.insertBefore(新的子元素, 旧的子元素)案例：
<body><ul><li>1</li><li id="two">2</li></ul><script>// 1.创建标签let li = document.createElement("li");// 2.给标签添加内容li.innerHTML = "3";// 3.获取到要加入的父元素let ulParent = document.querySelector("ul");// 4. 将新元素插入到旧的元素之前ulParent.insertBefore(li, two);</script>
</body>使用该方法还可以交换标签的位置。
<body><ul><li id="one">1</li><li id="two">2</li></ul><script>// 1.获取到要加入的父元素let ulParent = document.querySelector("ul");// 1. 交换位置ulParent.insertBefore(two, one);</script>
</body>5. cloneNode: 把某一个节点进行克隆
- cloneNode()浅克隆： 只是克隆了一个节点，里面的内容还有样式都没克隆。
- cloneNode(true)深克隆：把节点包含的所有内容和样式进行克隆。
<body><ul><li id="one" style="color: red">111</li><li id="two">222</li></ul><script>// 1.获取到要克隆的元素let ulParent = document.querySelector("ul");// 2. 无参，只克隆了一个节点，不克隆样式let con1 = ulParent.cloneNode();document.body.appendChild(con1);//页面不显示内容// 3. 有参，既有内容，又有样式let con2 = ulParent.cloneNode(true);document.body.appendChild(con2);</script>
</body>6. removeChild：移除某个节点
【context】.removeChild(ele);
<body><ul><li id="one" style="color: red">111</li><li id="two">222</li></ul><script>// 1.获取到要克隆的元素let ulParent = document.querySelector("ul");ulParent.removeChild(one);console.log(ulParent);</script>
</body>7. set/get/removeAttribute()
- setAttribute()：设置当前元素的某一个自定义属性。
- getAttribute()：获取当前元素的某一个自定义属性。
- removeAttribute()：删除当前元素的某一个自定义属性。
box.setAttribute("index", 1);
box.getAttribute("index");
box.removeAttribute("index");
console.log(box)
// 设置
// box["aa"] = 22;
// 获取
// box["aa"]
//移除
// delete box["aa"];基于键值对方式增删改：修改当前对象的堆内存空间完成的（在堆内存空间可以看到）
基于Attribute dom方法增删改，是修改html结构来完成的（此种方法设置的在结构上可以看到）。
以上两种方式不能混用
8. 练习题
利用a标签的href来重新获取url参数。
前置知识：a标签的两个方法：
<a href="http://www.zhufengpeixun.cn?name=lili&age=18#123"></a>a.search ：截取网址？（包括？）之后的内容。例如：?name=lili&age=18
a.hash：截取网址#（包括#）之后的内容。例如：#123
<body><a href="http://www.zhufengpeixun.cn?name=lili&age=18#123"></a><script>function getUrl() {let a = document.querySelector("a");let obj = {};obj.hash = a.hash.slice(1);let searchStr = a.search.slice(1).split("&");for (let i = 0; i < searchStr.length; i++) {let arr = searchStr[i].split("=");obj[arr[0]] = arr[1];}return obj;}console.log(getUrl());</script>
</body>相关文章：
day6JS-DOM(文档对象模型)
DOM树 DOM 操作 1. 获取元素 1.1 根据id名获取元素 document.getElementById("id名"); 案例： <body><div id"box">div盒子</div><h1>一级标题</h1><script>console.log(document.getElementById(&quo…...
MySQL列表分区分区表
什么是列表分区分区表？ 列表分区是一种根据某个列的离散值将表数据分割成多个分区的分区方式。在列表分区中，每个分区都有自己的离散值集合，当插入数据时，MySQL会根据指定的列值将数据分配到相应的分区中。这种分区方式可以使得表…...
qt打包程序方法（非常好用）
1.下载 Index of /official_releases/qt-installer-framework/4.6.1 bi...
IP地址管理：优化网络布局与提升效率
在日益复杂的网络环境中，IP地址管理成为了网络管理员日常工作中不可或缺的一部分。有效的IP地址管理不仅能够优化网络布局，提升网络运行效率，还能确保网络安全和稳定性。本文将探讨IP地址管理的重要性、实施策略以及最佳实践。 一、IP地址管…...
老古董Lisp实用主义入门教程（5）：好奇先生用Lisp探索Lisp
鲁莽先生什么都不管 鲁莽先生打开电脑，安装一堆东西，噼里啪啦敲了一堆代码，叽里呱啦说了一堆话，然后累了就回家睡觉了。 这可把好奇先生的兴趣勾起来，他怎么也睡不着。好奇先生打开电脑，看了看鲁莽先生留…...
linux文件——用户缓冲区——概念深度理解、IO模拟实现
前言：本篇文章主要讲解文件缓冲区。 讲解的方式是通过抛出问题， 然后通过分析问题， 将缓冲区的概念与原理一步一步地讲解。同时， 本节内容在最后一部分还会带友友们模拟实现一下c语言的printf， fprintf接口，…...
Selenium模拟鼠标滚动页面：实现自动化测试中的页面交互
Selenium模拟鼠标滚动页面：实现自动化测试中的页面交互 在进行网页自动化测试时，经常需要模拟用户的滚动行为来加载更多内容或触发页面上的某些交互。Selenium WebDriver提供了强大的工具来模拟这些用户行为，包括鼠标滚动。本文将介绍如何使…...
Eureka原理与实践：构建高效的微服务架构
Eureka原理与实践：构建高效的微服务架构 Eureka的核心原理Eureka Server：服务注册中心Eureka Client：服务提供者与服务消费者 Eureka的实践应用集成Eureka到Spring Cloud项目中创建Eureka Server创建Eureka Client（服务提供者&…...
OpenJDK 和 OracleJDK 的区别、下载方式
OpenJDK 和 OracleJDK 都是 Java 开发套件 (JDK)，用于开发和运行 Java 应用程序。它们之间的主要区别如下： 许可证和使用限制： OpenJDK：由 OpenJDK 社区开发和维护，基于 GPL v2 with Classpath Exception 许可证&#…...
arthas源码刨析：arthas-core (2)
文章目录 attach JVMagent**ArthasBootstrap** arthas-core的启动可以从上一篇做参考 参考 pom，即启动是调用的 Arthas 的 main 方法 attach JVM JVM提供了 Java Attach 功能，能够让客户端与目标JVM进行通讯从而获取JVM运行时的数据，甚至可以…...
【分享】格力手机色界G0245D 刷REC、root、 救砖、第三方rom教程和资源
开门见山 帮别人弄了一台 格力G0245D，把找到的资源和教程分享一下 教程 这个写的很详细了格力手机色界G0245D-Root-最简指南 不过教程里刷rec这一步漏了加上电源键，加上就行了。 附加参考：格力手机2刷机 格力手机二代刷机 GREE G0215D刷机…...
开学必备清单来啦！大学好物合集推荐！每一个都能帮你提升幸福感
随着开学季的到来，好多学生都在忙着准备各类学习与生活必需品，以迎接新的大学生活到来。以下是一些开学季必备的好物推荐，每一个都很实用，可以帮你提升学习和生活的幸福感！ 1、西圣电容笔 一句话推荐：公认…...
已解决：javax.xml.transform.TransformerFactoryConfigurationError 异常的正确解决方法，亲测有效！！！
1. 问题描述 javax.xml.transform.TransformerFactoryConfigurationError 是在使用 Java 的 XML 处理库时，配置 TransformerFactory 出错时抛出的异常。通常，这个异常发生在应用程序试图创建一个 TransformerFactory 实例时，由于无法找到合适…...
商品价格与优惠信息在API返回值中的位置
在API返回值中，商品价格与优惠信息的具体位置可能因不同的电商平台和API设计而有所不同。然而，一般来说，这些信息会以结构化的方式呈现，通常包含在一个包含多个字段的JSON对象或XML文档中。以下是根据多个电商平台（如阿…...
Oracle Index Partition索引分区的管理
Oracle索引分区的管理是数据库管理中的重要任务之一，它涉及索引的创建、维护、重建以及优化等多个方面。以下是对Oracle索引分区管理的详细解析： 一、索引分区的概念 索引分区（Partitioned Index）是针对分区表而言的，…...
统信UOS系统访问windows共享目录
问题背景 当我们使用UOS系统的时候，想要访问windows系统的一些资料并将其拷贝下来使用的话，应该怎么操作呢？这个需求是可以实现的，统信UOS系统是基于Linux系统开发的，Linux系统和windows系统之间可以通过SMB协议来共享…...
单一职责原则与REST API设计：如何定义清晰的资源与职责
在软件设计中，单一职责原则（Single Responsibility Principle, SRP）和 REST API 设计是两个重要的概念。单一职责原则是一种设计原则，它强调一个类或模块应当只有一个单一的职责，这有助于提高系统的可维护性和扩展性。…...
JAVA IO模型
我们在平常开发过程中接触最多的就是 磁盘 IO（读写文件） 和 网络 IO（网络请求和响应）。从应用程序的视角来看的话，我们的应用程序对操作系统的内核发起 IO 调用（系统调用），操作系统负…...
《C/C++实战专栏》介绍
🚀 前言 本文是《C/C实战专栏》专栏的说明贴（点击链接，跳转到专栏主页，欢迎订阅，持续更新…）。 专栏介绍：以多年的开发实战为基础，总结并讲解一些的C/C基础与项目实战进阶内容&…...
前端跨域2
前端跨域2 前端跨域解决方案（11种方案） 1.JSONP跨域解决方案的底层原理 script、img、link、iframe...<script src"https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>// 这个就是因为script标签没有跨域限制࿰…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源 论文&a…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
代码规范和架构【立芯理论一】（2025.06.08）
1、代码规范的目标 代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...