当前位置：首页 > news >正文

day6JS-DOM(文档对象模型)

news 2025/11/5 11:24:06

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…...

编程日记 2024/8/22 15:49:28

MySQL列表分区分区表

什么是列表分区分区表？ 列表分区是一种根据某个列的离散值将表数据分割成多个分区的分区方式。在列表分区中，每个分区都有自己的离散值集合，当插入数据时，MySQL会根据指定的列值将数据分配到相应的分区中。这种分区方式可以使得表…...

编程日记 2024/8/22 15:47:26

qt打包程序方法（非常好用）

1.下载 Index of /official_releases/qt-installer-framework/4.6.1 bi...

编程日记 2024/8/22 15:43:21

IP地址管理：优化网络布局与提升效率

在日益复杂的网络环境中，IP地址管理成为了网络管理员日常工作中不可或缺的一部分。有效的IP地址管理不仅能够优化网络布局，提升网络运行效率，还能确保网络安全和稳定性。本文将探讨IP地址管理的重要性、实施策略以及最佳实践。一、IP地址管…...

编程日记 2024/8/22 15:42:20

老古董Lisp实用主义入门教程（5）：好奇先生用Lisp探索Lisp

鲁莽先生什么都不管鲁莽先生打开电脑，安装一堆东西，噼里啪啦敲了一堆代码，叽里呱啦说了一堆话，然后累了就回家睡觉了。这可把好奇先生的兴趣勾起来，他怎么也睡不着。好奇先生打开电脑，看了看鲁莽先生留…...

编程日记 2024/8/22 15:41:18

linux文件——用户缓冲区——概念深度理解、IO模拟实现

前言：本篇文章主要讲解文件缓冲区。讲解的方式是通过抛出问题， 然后通过分析问题， 将缓冲区的概念与原理一步一步地讲解。同时， 本节内容在最后一部分还会带友友们模拟实现一下c语言的printf， fprintf接口&#xff0c…...

编程日记 2024/8/22 15:39:09

Selenium模拟鼠标滚动页面：实现自动化测试中的页面交互

Selenium模拟鼠标滚动页面：实现自动化测试中的页面交互在进行网页自动化测试时，经常需要模拟用户的滚动行为来加载更多内容或触发页面上的某些交互。Selenium WebDriver提供了强大的工具来模拟这些用户行为，包括鼠标滚动。本文将介绍如何使…...

编程日记 2024/8/22 15:38:07

Eureka原理与实践：构建高效的微服务架构

Eureka原理与实践：构建高效的微服务架构 Eureka的核心原理Eureka Server：服务注册中心Eureka Client：服务提供者与服务消费者 Eureka的实践应用集成Eureka到Spring Cloud项目中创建Eureka Server创建Eureka Client（服务提供者&…...

编程日记 2024/8/22 15:37:06

OpenJDK 和 OracleJDK 的区别、下载方式

OpenJDK 和 OracleJDK 都是 Java 开发套件 (JDK)，用于开发和运行 Java 应用程序。它们之间的主要区别如下： 许可证和使用限制： OpenJDK：由 OpenJDK 社区开发和维护，基于 GPL v2 with Classpath Exception 许可证&#…...

编程日记 2024/8/22 15:35:42

arthas源码刨析：arthas-core (2)

文章目录 attach JVMagent**ArthasBootstrap** arthas-core的启动可以从上一篇做参考参考 pom，即启动是调用的 Arthas 的 main 方法 attach JVM JVM提供了 Java Attach 功能，能够让客户端与目标JVM进行通讯从而获取JVM运行时的数据，甚至可以…...

编程日记 2024/8/22 15:34:37

【分享】格力手机色界G0245D 刷REC、root、救砖、第三方rom教程和资源

开门见山帮别人弄了一台格力G0245D，把找到的资源和教程分享一下教程这个写的很详细了格力手机色界G0245D-Root-最简指南不过教程里刷rec这一步漏了加上电源键，加上就行了。附加参考：格力手机2刷机格力手机二代刷机 GREE G0215D刷机…...

编程日记 2024/8/22 15:33:36

开学必备清单来啦！大学好物合集推荐！每一个都能帮你提升幸福感

随着开学季的到来，好多学生都在忙着准备各类学习与生活必需品，以迎接新的大学生活到来。以下是一些开学季必备的好物推荐，每一个都很实用，可以帮你提升学习和生活的幸福感！ 1、西圣电容笔一句话推荐：公认…...

编程日记 2024/8/22 15:32:10

已解决：javax.xml.transform.TransformerFactoryConfigurationError 异常的正确解决方法，亲测有效！！！

1. 问题描述 javax.xml.transform.TransformerFactoryConfigurationError 是在使用 Java 的 XML 处理库时，配置 TransformerFactory 出错时抛出的异常。通常，这个异常发生在应用程序试图创建一个 TransformerFactory 实例时，由于无法找到合适…...

编程日记 2024/8/22 15:29:47

商品价格与优惠信息在API返回值中的位置

在API返回值中，商品价格与优惠信息的具体位置可能因不同的电商平台和API设计而有所不同。然而，一般来说，这些信息会以结构化的方式呈现，通常包含在一个包含多个字段的JSON对象或XML文档中。以下是根据多个电商平台（如阿…...

编程日记 2024/8/22 15:28:46

Oracle Index Partition索引分区的管理

Oracle索引分区的管理是数据库管理中的重要任务之一，它涉及索引的创建、维护、重建以及优化等多个方面。以下是对Oracle索引分区管理的详细解析： 一、索引分区的概念索引分区（Partitioned Index）是针对分区表而言的&#xff0c…...

编程日记 2024/8/22 15:27:45

统信UOS系统访问windows共享目录

问题背景当我们使用UOS系统的时候，想要访问windows系统的一些资料并将其拷贝下来使用的话，应该怎么操作呢？这个需求是可以实现的，统信UOS系统是基于Linux系统开发的，Linux系统和windows系统之间可以通过SMB协议来共享…...

编程日记 2024/8/22 15:25:43

单一职责原则与REST API设计：如何定义清晰的资源与职责

在软件设计中，单一职责原则（Single Responsibility Principle, SRP）和 REST API 设计是两个重要的概念。单一职责原则是一种设计原则，它强调一个类或模块应当只有一个单一的职责，这有助于提高系统的可维护性和扩展性。…...

编程日记 2024/8/22 15:24:42

JAVA IO模型

我们在平常开发过程中接触最多的就是磁盘 IO（读写文件） 和网络 IO（网络请求和响应）。从应用程序的视角来看的话，我们的应用程序对操作系统的内核发起 IO 调用（系统调用），操作系统负…...

编程日记 2024/8/22 15:23:40

《C/C++实战专栏》介绍

🚀 前言本文是《C/C实战专栏》专栏的说明贴（点击链接，跳转到专栏主页，欢迎订阅，持续更新…）。专栏介绍：以多年的开发实战为基础，总结并讲解一些的C/C基础与项目实战进阶内容&…...

编程日记 2024/8/22 15:22:38

前端跨域2

前端跨域2 前端跨域解决方案（11种方案） 1.JSONP跨域解决方案的底层原理 script、img、link、iframe...<script src"https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>// 这个就是因为script标签没有跨域限制&#xff0…...

编程日记 2024/8/22 15:20:32

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...

编程新知 2025/11/4 13:36:25

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。可以通过配置不同的记录提供程…...

编程新知 2025/11/3 20:06:38

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石，设计模式在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类：一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/8/10 21:01:28

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性：电力载波技术在楼宇自控中的核心价值在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...

编程新知 2025/9/27 2:43:26

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。二、核心实现方案 1. 环境配置 （1）使用React Native…...

编程新知 2025/8/19 2:57:37

全球首个30米分辨率湿地数据集(2000—2022)

数据简介今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/11/4 16:34:38

ios苹果系统，js 滑动屏幕、锚定无效

现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...

编程新知 2025/10/30 22:14:03

【学习笔记】深入理解Java虚拟机学习笔记——第4章虚拟机性能监控，故障处理工具

第2章虚拟机性能监控，故障处理工具 4.1 概述略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...

编程新知 2025/9/7 19:10:42