需先确认 document.readystate 为 "complete" 再操作 dom；常用方法包括 getelementbyid("id")、queryselector("css选择器")、queryselectorall("css选择器") 配合扩展运算符和 map 提取文本；修改内容需先定位元素，验证后赋值 textcontent 或添加事件监听。
你想在欧朋浏览器中通过脚本操作网页上的文字、图片、按钮等元素，比如自动填表、提取标题、点击特定链接，这需要调用网页内容对象（即 DOM 对象）。
确认当前页面已加载完成再操作
打开目标网页后，按 F12 打开开发者工具 → 切换到 Console 标签页 → 输入 document.readyState 并回车。若返回 "complete"，说明 DOM 已就绪；若为 "loading" 或 "interactive"，需等待或加延时再执行脚本。
这一步跳过会导致 getElementById 等方法返回 null，后续所有操作都会报错。
常用 WebPages 对象方法实操
在 Console 中直接输入以下命令即可立即生效：
方法一：按 ID 获取单个元素
输入 document.getElementById("header") → 回车。如果页面存在 id="header" 的元素，会返回该 DOM 节点；不存在则返回 【null】，此时请检查网页源码确认 ID 拼写与大小写是否完全一致。
方法二：用 CSS 选择器精准定位
输入 document.querySelector("a[href*='example.com']") → 回车。这条命令会找到第一个含 example.com 链接的超链接，比 getElementsByTagName 更灵活，且支持属性、类名、伪类等复杂条件。
方法三：批量获取同类元素并读取文本
输入 [...document.querySelectorAll("article h2")].map(el => el.textContent.trim()) → 回车。注意必须用扩展运算符 [...] 将 NodeList 转为数组，否则 map 方法不可用。
修改网页内容的典型操作路径
第一步：定位目标元素
例如想改页面顶部标语，先运行 const banner = document.querySelector(".site-banner h1");
第二步：验证是否获取成功
输入 banner → 回车。若显示 HTML 元素结构，说明定位正确；若显示 undefined，说明选择器不匹配，需重新 inspect 元素查看实际 class 名。
第三步：修改文本内容
运行 banner.textContent = "欢迎来到新主页"; → 页面标题将实时更新。
第四步：添加点击响应（可选）
运行 banner.addEventListener("click", () => alert("你点了标题！")); → 此后每次点击该标题都会弹出提示。
