前端(JavaScript)函数_文档操作

文档概述

轻语言网站开发中的文档操作函数、用于操作HTML页面文档对象，包含获取页面元素、创建元素、设置属性、操作DOM、事件绑定等文档操作功能，常用于页面元素操作、动态内容生成、DOM操作等场景。

元素查找：查找元素ByID(单个) / 查找元素By类名(集合) / 查找元素By标签名(集合) / 查找元素By选择器(首个) / 查找全部元素By选择器(集合)
元素创建与文档写入：创建元素 创建新DOM节点；写文本到页面/写文本行到页面 向页面输出内容
资源加载：加载JS模块/加载JS文件/加载CSS文件 动态加载外部资源
代码执行：执行JS代码 通过 eval 执行原生JS代码字符串

💡 原生 JS DOM 注解：文档操作函数返回的DOM对象，其属性如 innerHTML、value、style、src、onclick 等为原生 JS DOM 属性，轻语言支持直接使用。遍历DOM集合时使用 取数组成员数() 和 取数组成员(集合, i)，而非 .length 和 集合[i]。

函数：查找元素ByID(ID)

通过元素ID在当前页面中查找元素标签、并返回其DOM对象。

' 通过ID查找元素并修改其内容
变量 元素 = 查找元素ByID("myTitle")
' 注：innerHTML 为原生 JS DOM 属性，轻语言支持直接使用
如果(元素 != 空)
	元素.innerHTML = "新标题"
结束 如果
' 通过ID获取输入框的值
变量 输入框 = 查找元素ByID("username")
' 注：value 为原生 JS DOM 属性，轻语言支持直接使用
变量 用户名 = 输入框.value
调试输出("用户名: " + 用户名)

函数：查找元素By类名(类名)

根据指定的 class 样式类名获取界面指定元素节点；返回DOM对象集合。

' 查找所有class为"item"的元素
变量 元素列表 = 查找元素By类名("item")
调试输出("找到 " + 取数组成员数(元素列表) + " 个元素")
' 遍历所有匹配的元素
' 注：style.color 为原生 JS DOM 属性，轻语言支持直接使用
变量循环(i = 0, 取数组成员数(元素列表), 1)
	取数组成员(元素列表, i).style.color = "red"
结束循环
' 查找按钮类元素并设置点击事件
变量 按钮 = 查找元素By类名("btn-primary")
如果(取数组成员数(按钮) > 0)
	' 注：onclick、箭头函数 ()=>{} 为原生 JS 语法，轻语言支持直接使用
	取数组成员(按钮, 0).onclick = () => { 调试输出("按钮被点击") }
结束 如果

函数：查找元素By标签名(标签名称)

根据元素指定的标签名称获取界面指定元素节点；注意：标签名称只能为HTML原生名称、扩展组件不支持。

' 查找页面中所有的div元素
变量 div元素 = 查找元素By标签名("div")
调试输出("div数量: " + 取数组成员数(div元素))
' 查找所有段落标签
' 注：style.fontSize 为原生 JS DOM 属性，轻语言支持直接使用
变量 段落 = 查找元素By标签名("p")
变量循环(i = 0, 取数组成员数(段落), 1)
	取数组成员(段落, i).style.fontSize = "16px"
结束循环
' 查找所有图片标签并获取src
' 注：src 为原生 JS DOM 属性，轻语言支持直接使用
变量 图片 = 查找元素By标签名("img")
变量循环(i = 0, 取数组成员数(图片), 1)
	调试输出("图片地址: " + 取数组成员(图片, i).src)
结束循环

函数：查找元素By选择器(匹配表达式)

使用选择器"querySelector"查询界面中指定元素节点，返回第一个匹配的元素。

' 通过CSS选择器查找元素
变量 元素 = 查找元素By选择器("#myTitle")
' 注：innerHTML 为原生 JS DOM 属性，轻语言支持直接使用
元素.innerHTML = "通过ID选择器找到"
' 通过类选择器查找第一个匹配元素
变量 按钮 = 查找元素By选择器(".btn-primary")
' 注：style.backgroundColor 为原生 JS DOM 属性，轻语言支持直接使用
按钮.style.backgroundColor = "blue"
' 通过属性选择器查找
变量 输入框 = 查找元素By选择器("input[type='text']")
' 注：value 为原生 JS DOM 属性，轻语言支持直接使用
调试输出("输入框值: " + 输入框.value)
' 通过复合选择器查找
变量 选中项 = 查找元素By选择器("div.container > ul li.active")

函数：查找全部元素By选择器(匹配表达式)

使用选择器"querySelectorAll"查询界面中符合要求的所有指定元素节点；返回一个对象数组。

' 查找所有class为item的元素
变量 元素列表 = 查找全部元素By选择器(".item")
' 注：元素列表[i].style 为原生 JS DOM 操作语法，轻语言支持直接使用
变量循环(i = 0, 取数组成员数(元素列表), 1)
	取数组成员(元素列表, i).style.border = "1px solid #ccc"
结束循环
' 查找特定容器下的所有按钮
变量 按钮 = 查找全部元素By选择器("#toolbar button")
调试输出("工具栏按钮数: " + 取数组成员数(按钮))
' 查找所有选中的复选框
变量 选中项 = 查找全部元素By选择器("input[type='checkbox']:checked")
调试输出("选中数量: " + 取数组成员数(选中项))

函数：预处理文档()

删除当前页面空文本节点，并连接相邻节点。

' 规范化文档结构，清理空节点
预处理文档()
' 在动态添加/删除大量节点后调用
变量 容器 = 查找元素ByID("content")
' 注：innerHTML 为原生 JS DOM 属性，轻语言支持直接使用；创建元素 等效于 document.createElement
容器.innerHTML = ""
容器.appendChild(创建元素("div"))
预处理文档()  ' 清理可能产生的空文本节点

函数：写文本到页面(内容)

写（输出）指定文本内容到当前页面。

' 在页面中直接写入HTML内容
写文本到页面("<h1>欢迎来到我的网站</h1>")
' 写入段落和链接
写文本到页面("<p>这是一个<a href='about.html'>关于我们</a>的页面</p>")
' 注意：页面加载完成后调用会覆盖整个页面内容

函数：写文本行到页面(内容)

写（输出）指定文本行内容到当前页面，该函数会自动在写出的内容后面添加换行符。

' 写入多行内容（每行自动换行）
写文本行到页面("<p>第一行内容</p>")
写文本行到页面("<p>第二行内容</p>")
写文本行到页面("<p>第三行内容</p>")
' 在<pre>标签中效果更明显
写文本行到页面("<pre>")
写文本行到页面("代码行1")
写文本行到页面("代码行2")
写文本行到页面("</pre>")

函数：加载JS模块(目标JS文件,加载完成回调)

加载指定JS文件中导出的模块，在加载完成回调参数中以事件方式返回，返回一个参数：模块对象，可通过该对象取出JS文件中导出的指定模块类。

' 加载位于项目 static 文件夹中的 myModule.js 模块文件
加载JS模块("myModule.js", (模块对象) => {
	' 使用模块中的功能
	模块对象.某个导出函数()
})

函数：加载JS文件(目标JS文件,加载完成回调)

加载指定JS文件，在加载完成回调参数中以事件方式返回，返回一个参数：加载成功的JS文件地址。

' 加载位于项目 static 文件夹中的 MyJS.js 文件
加载JS文件("MyJS.js",(被加载JS文件) =>{
	调试输出("成功加载的JS文件：" + 被加载JS文件)
})

函数：加载CSS文件(目标CSS文件,加载完成回调)

加载指定CSS文件，在加载完成回调参数中以事件方式返回，返回一个参数：加载成功的CSS文件地址。

' 加载位于项目 static 文件夹中的 style.css 样式文件
加载CSS文件("style.css", (被加载CSS文件) => {
	调试输出("成功加载的CSS文件：" + 被加载CSS文件)
})

函数：执行JS代码(待执行JS代码)

执行指定JS代码，函数内部采用"eval"函数执行。

' 执行JS原生函数
执行JS代码("alert('信息提示')")
' 执行任意符合JavaScript语法的代码字符串
' 注：参数为字符串形式的原生 JS 代码，需用原生 JS 语法（new Date 为原生 JS 构造函数）
执行JS代码("let x = new Date(); 调试输出(x)")

函数：创建元素(标签名称)

创建指定标签元素对象。

' 创建 div 标签
变量 dom = 创建元素("div")
' 创建 button 标签
变量 btn = 创建元素("button")
' 添加到根布局或面板
弹性布局1.添加组件(dom)
弹性布局1.添加组件(btn)

学习要点

知识点	代码示例	说明
ID查找	`查找元素ByID("myTitle")`	返回单个DOM对象，无匹配返回 `空`；性能最佳
类名查找	`查找元素By类名("item")`	返回DOM集合，需用 `取数组成员数` 遍历
标签查找	`查找元素By标签名("div")`	仅支持HTML原生标签，扩展组件不支持
CSS选择器	`查找元素By选择器("#id")` / `查找全部元素By选择器(".class")`	支持复合选择器；前者返回首个，后者返回全部
DOM属性访问	`元素.innerHTML` / `元素.value` / `元素.style`	原生JS DOM属性，轻语言支持直接使用；需加注释说明
DOM集合遍历	`变量循环(i = 0, 取数组成员数(列表), 1)`	用 `取数组成员(列表, i)` 访问，不能用 `列表[i]`
判空检查	`如果(元素 != 空)`	`查找元素ByID` 找不到返回 `空`，使用前必须判空
事件绑定	`元素.onclick = () => { ... }`	原生JS事件属性 + 箭头函数语法，轻语言支持
动态创建元素	`创建元素("div")` + `添加组件`	创建DOM对象后用组件的 `添加组件` 方法加入布局
资源加载	`加载JS模块`/`加载JS文件`/`加载CSS文件`	动态加载外部资源；回调参数返回加载结果

轻语言网站开发SDK文档