js document等操作

1.document 简单用法

document 属性是浏览器中 Window 对象的一个属性，它代表了当前加载的页面文档对象，通常用于访问和操纵页面上的内容。以下是一些常用的 document 属性：

document.getElementById(id)：根据指定的元素 id 返回对应的 DOM 元素。
```
var element = document.getElementById("myElement");
```
document.getElementsByClassName(className)：返回包含指定类名的 DOM 元素的集合。
```
var elements = document.getElementsByClassName("myClass");
```
document.getElementsByTagName(tagName)：返回包含指定标签名的 DOM 元素的集合。
```
var elements = document.getElementsByTagName("div");
```
document.querySelector(selector)：返回匹配指定 CSS 选择器的第一个 DOM 元素。
```
var element = document.querySelector("#myId .myClass");
```
document.querySelectorAll(selector)：返回匹配指定 CSS 选择器的所有 DOM 元素的集合。
```
var elements = document.querySelectorAll(".myClass");
```
document.title：获取或设置当前页面的标题。
```
var pageTitle = document.title;
```
document.URL：获取当前页面的完整 URL。
```
var pageURL = document.URL;
```
document.body：获取页面的 <body> 元素，可以用于操作页面的主要内容。
```
var bodyElement = document.body;
```
document.head：获取页面的 <head> 元素，通常用于操作页面的元信息、样式和脚本引用等。
```
var headElement = document.head;
```
document.cookie：获取或设置页面的 cookie。
```
var cookies = document.cookie;
```

这些 document 属性可以帮助您在 JavaScript 中访问和操作当前页面的各个部分，从而实现动态交互和内容操纵。

当使用 JavaScript 操作网页元素时，可以结合 document 对象和 CSS 选择器来选择和操作元素。以下是使用 document 对象和不同的 CSS 选择器来选择元素的示例：

元素选择器（Element Selector）：

// 选择所有 <p> 元素
var paragraphs = document.querySelectorAll('p');

类选择器（Class Selector）：

// 选择所有具有 "highlight" 类的元素
var highlightedElements = document.querySelectorAll('.highlight');

ID 选择器（ID Selector）：

// 选择具有 "header" ID 的元素
var headerElement = document.getElementById('header');

属性选择器（Attribute Selector）：

// 选择所有具有 "type" 属性且属性值为 "text" 的元素
var textInputElements = document.querySelectorAll('[type="text"]');

后代选择器（Descendant Selector）：

// 选择所有 <ul> 元素内部的 <li> 元素
var listItems = document.querySelectorAll('ul li');

子元素选择器（Child Selector）：

// 选择作为 <ul> 元素直接子元素的 <li> 元素
var directChildItems = document.querySelectorAll('ul > li');

相邻兄弟选择器（Adjacent Sibling Selector）：

// 选择紧接在 <h2> 元素后面的 <p> 元素
var adjacentParagraph = document.querySelector('h2 + p');

通用兄弟选择器（General Sibling Selector）：

// 选择所有与 <h2> 元素具有相同父元素的 <p> 元素
var siblingParagraphs = document.querySelectorAll('h2 ~ p');

伪类（Pseudo-class）：

// 选择鼠标悬停在元素上的状态
var hoverElement = document.querySelector(':hover');

伪元素（Pseudo-element）：

// 创建一个元素的伪元素，通常用于在元素的内容之前插入内容
var beforePseudoElement = document.createElement('p');
beforePseudoElement.textContent = '::before pseudo-element content';

3.模糊匹配

这些示例演示了如何使用 document 对象和不同的 CSS 选择器来选择网页中的元素。注意，选择器的结果可能是一个元素的集合（例如，使用 querySelectorAll），也可能是单个元素（例如，使用 querySelector 或 getElementById）。根据您的需求，您可以进一步操作所选元素，例如更改其样式、内容或添加事件处理程序。

CSS 属性选择器允许您根据元素的属性值来选择元素。如果要进行模糊匹配，可以使用包含属性值的部分字符串或正则表达式来选择元素。以下是一些示例：

精确匹配属性值：

// 选择所有具有 "data-role" 属性且属性值为 "button" 的元素
[data-role="button"] {
    /* 样式规则 */
}

属性值前缀匹配：

// 选择所有具有 "data-action" 属性且属性值以 "save" 开头的元素
[data-action^="save"] {
    /* 样式规则 */
}

属性值后缀匹配：

// 选择所有具有 "class" 属性且属性值以 "active" 结尾的元素
[class$="active"] {
    /* 样式规则 */
}

属性值包含匹配：

// 选择所有具有 "href" 属性且属性值包含 "example.com" 的元素
[href*="example.com"] {
    /* 样式规则 */
}

属性值部分匹配：

// 选择所有具有 "title" 属性且属性值中包含 "important" 的元素
[title~="important"] {
    /* 样式规则 */
}

属性值多重匹配：

// 选择所有具有 "class" 属性且属性值包含空格分隔的多个类的元素
[class~="btn active"] {
    /* 样式规则 */
}

正则表达式匹配（需要 JavaScript）：

/* 不支持标准 CSS，需要 JavaScript 动态添加样式 */
var regex = /pattern/; // 您的正则表达式
var style = document.createElement('style');
style.innerHTML = `
    [data-custom-attribute]:not([data-custom-attribute=""]):not([data-custom-attribute="undefined"]):not([data-custom-attribute="null"]) {
        /* 正则表达式匹配示例 */
    }
`;
document.head.appendChild(style);

上述示例中，使用属性选择器的不同形式来选择具有特定属性值或属性值模式的元素。这允许您对这些元素应用不同的样式规则。如果需要更高级的模糊匹配，可能需要借助 JavaScript 来动态生成样式规则，因为标准 CSS 选择器不支持复杂的正则表达式匹配。

4.iframe没有name属性，其他属性的面模糊匹配？

<iframe frameborder="0" style="width: 100%; height: 100%; position: relative;" src="/ifinance-bankplat/qryIns?_pv_=R1lpeG1EZXI1ZTFtNG82dGRlY003bzlkY2VmPS1oOWU4czRzOGktYWZuMSZjbDRvLWdiaWJuOFU2ci1sND0zaDN0N3Q2cDg6OS81L0UxazB1Lno3NTJXLnhUWlpqaDE2MDYyLksxODJlMkc6TTlTMGE4cThyL0RpaGZCaXduX2E9bnljZWVLLW5wYW9pcnN0c2FlbGgmJmh0ZWVzbHN2aXJhZW5TUG5hYXRpaHM9cy9lSDIxWUpZaGU=&s_rd=18119ed4d2bba95d7873dd5d5196317b&dhxr1694593994260"></iframe>

如果 <iframe> 元素没有 name 属性，您可以使用以下代码来查找并选择具有特定 src 属性部分的 <iframe> 元素：

var srcSubstring = "/ifinance-bankplat/qryIns";
var iframe = document.querySelector('iframe[src*="' + srcSubstring + '"]');

此代码将选择第一个匹配特定 src 部分的 <iframe> 元素。然后，您可以在找到的 <iframe> 上执行任何进一步的操作。

var srcSubstring = "/ifinance-bankplat/qryIns";

var iframeElement = document.querySelector('iframe[src*="' + srcSubstring + '"]');
// // // 获取 <iframe> 中的文档对象
var iframeDocument = iframeElement.contentDocument || iframeElement.contentWindow.document;
var tableGridBox = iframeDocument.getElementById("tableGridBox-grid");
    var tableRows = tableGridBox.querySelectorAll(".datagrid-row");
    var textArray = [];

    for (var i = 0; i < tableRows.length; i++) {
    var row = tableRows[i];
    var text = row.innerText; // 获取行内所有文字
    textArray.push(text);
        console.log(text);
    }

5.选择下拉框

需要规则的下拉框，带option的

你可以使用JavaScript的querySelector方法来选中下拉菜单，并使用value属性来设置选中的值。以下是一个示例代码：

var select = document.querySelector('.pagination-page-list'); // 选择下拉菜单
select.value = '200'; // 设置选中的值
var event = new Event('change'); // 创建一个 'change' 事件
select.dispatchEvent(event); // 触发 'change' 事件

这段代码首先使用querySelector方法选中了类名为.pagination-page-list的下拉菜单，然后将其值设置为'200'。最后，创建并触发了一个'change'事件，以便任何监听这个下拉菜单的'change'事件的代码都能知道这个值已经改变。

请注意，这段代码可能需要根据你的实际HTML结构进行修改。希望这个答案对你有所帮助！如果你有其他问题，欢迎随时向我提问。

方法二：selected方法

<select multiple="multiple" style="height: 100px; width: 150px;" id="leftsel">
  <option value="02">付款</option>
  <option value="07">委托存款</option>
  <option value="03">定期存款</option>
  <option value="04">通知存款</option>
  <option value="06">自营贷款</option>
  <option value="08">委托贷款</option>
  <option value="09">贴现</option>
  <option value="05">保证金</option>
  <option value="01">收款</option>
  <option value="16">银团贷款类账户</option>
  <option value="11">财务公司虚拟户</option>
  <option value="12">外汇保证金</option>
</select>

<script>
  // 要选择的文字列表
  var zh_type = ['付款', '定期存款', '通知存款', '保证金', '收款', '委托支付'];

  // 找到select元素
  var selectElement = document.getElementById('leftsel');

  // 找到所有的option元素
  var options = selectElement.options;

  // 遍历所有选项，设置selected属性
  for (var i = 0; i < options.length; i++) {
    if (zh_type.includes(options[i].text)) {
      options[i].selected = true;
    }
  }
</script>

6.判断网页加载状态

 if (document.readyState === "complete") {
    // 网页的DOM树和资源都已加载完毕
    console.log("网页的DOM树和资源都已加载完毕！");
    
    // 在这里执行进一步的操作
  } else {
    // 网页加载完成，但可能还有异步操作在进行中
    console.log("网页加载完成，但可能还有异步操作在进行中。");
    
    // 在这里执行进一步的操作
  }

7.滚动元素位置

如果你想要滚动到特定元素的位置，可以使用 Element.scrollIntoView() 方法。这个方法将确保指定的元素可见，并滚动到视口中，以便用户能够看到它。以下是一个示例：

// 获取需要滚动到的元素
var targetElement = document.getElementById('yourElementId'); // 替换 'yourElementId' 为你的元素 ID

// 使用 scrollIntoView() 方法滚动到元素位置
targetElement.scrollIntoView({
    behavior: 'smooth', // 平滑滚动
    block: 'start' // 滚动到元素的顶部
});

在这个例子中，scrollIntoView() 方法接受一个配置对象，其中 behavior 属性可以设置为 'auto'（即瞬间滚动）或 'smooth'（平滑滚动），而 block 属性可以设置为 'start'、'center' 或 'end'，以决定元素滚动到视口中的哪个位置。

注意，scrollIntoView() 方法在现代浏览器中通常良好支持，但在某些较旧的浏览器中可能存在一些差异。如果需要更广泛的兼容性，可以考虑使用库，比如 smooth-scroll 或 scrollIntoViewIfNeeded。

扩展：整个浏览器滚动(如果多层滚动条无效)

// 将滚动条位置设置为 (x, y) 坐标
function setScrollPosition(x, y) {
    // 使用 document.documentElement 以确保跨浏览器的兼容性
    document.documentElement.scrollTop = y;

    // 在一些较老的浏览器中，使用 document.body
    document.body.scrollTop = y;

    // 对于水平滚动，也可以设置 scrollLeft 属性
    document.documentElement.scrollLeft = x;
    document.body.scrollLeft = x;
}

// 示例：将滚动条位置设置为 (100, 200)
setScrollPosition(100, 200);

8.获取整个网页的源代码

在JavaScript中，你可以使用document.documentElement.outerHTML属性来获取整个网页的源代码。这个属性包含了整个HTML文档的字符串表示。以下是一个简单的例子：

var fullHtml = document.documentElement.outerHTML;
console.log(fullHtml);

上述代码将整个HTML文档的源代码存储在fullHtml变量中，并将其打印到控制台。请注意，这将包含整个HTML文档，包括HTML、head和body标签内的所有内容。

如果你只想获取body部分的源代码，你可以使用以下方法：

var bodyHtml = document.body.outerHTML;
console.log(bodyHtml);

这将只获取body标签内的内容及其子元素的源代码。请注意，这个方法仍然包含body标签本身。

需要注意的是，浏览器的安全策略通常会限制通过JavaScript获取跨域页面的内容。如果你尝试在一个域中运行脚本并尝试获取另一个域的页面源代码，可能会遇到跨域问题。

9.evaluate 的xpath定位

91.基本用法

document.evaluate 是 JavaScript 中的一个 DOM 方法，它可以用于执行 XPath 查询来选择文档中的节点。通常在编写浏览器自动化测试脚本时，document.evaluate 可以用于定位和操作页面上的元素。

说明：

语法：document.evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result)
- xpathExpression：一个 XPath 查询表达式，用于选择要返回的节点。
- contextNode：一个节点对象，表示查询的起始位置。通常是文档根节点（document）。
- namespaceResolver：一个函数，用于解析命名空间。通常不需要使用，可以传入 null。
- resultType：一个整数，指定返回的结果类型。通常使用 XPathResult 对象的常量来表示结果类型，例如 XPathResult.ORDERED_NODE_ITERATOR_TYPE。
- result：一个 XPathResult 对象，用于存储查询的结果。通常不需要使用，可以传入 null。

示例：

假设我们有以下 HTML 结构的页面：

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <div id="container">
        <h1>Welcome to Example Page</h1>
        <input type="text" id="inputField" value="Hello, World!">
        <button id="submitButton">Submit</button>
    </div>
</body>
</html>

我们可以使用 document.evaluate 来定位输入文本框并向其输入文本，然后点击提交按钮的操作。

// 查找输入文本框
var inputField = document.evaluate("//input[@id='inputField']", document, null, 
                                    XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
// 向输入文本框输入文本
inputField.value = "New Text";

// 查找提交按钮
var submitButton = document.evaluate("//button[@id='submitButton']", document, null, 
                                      XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
// 点击提交按钮
submitButton.click();

这个示例首先使用 XPath 查询来定位页面上的输入文本框和提交按钮。然后，它将新的文本值设置给输入文本框，并模拟点击提交按钮的操作。

9.2 返回的 XPathResult 对象提供了几种不同的方式

document.evaluate 返回的 XPathResult 对象提供了几种不同的方式来访问和操作查询结果，根据指定的 resultType 不同，你可以使用不同的属性或方法来获取你需要的数据。以下是一些常用的用法：

1. `singleNodeValue`

当 resultType 设置为 XPathResult.FIRST_ORDERED_NODE_TYPE 时，可以使用 singleNodeValue 杂志获取单个节点的结果。这适用于查询预期返回单个节点的情况。

2. `iterateNext()`

当 resultType 设置为 XPathResult.ORDERED_NODE_ITERATOR_TYPE 或 XPathResult.UNORDERED_NODE_ITERATOR_TYPE 时，可以通过 iterateNext() 方法遍历查询结果中的每个节点。这种方法适用于处理返回多个节点的查询。

var result = document.evaluate(xpathExpression, contextNode, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
var node = null;
while (node = result.iterateNext()) {
    // 对每个节点进行操作
}

3. `snapshotItem(index)`

当 resultType 设置为 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE 或 XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE 时，可以使用 snapshotItem(index) 方法根据索引直接访问查询结果中的节点。这适用于你需要随机访问结果节点的场景。

var result = document.evaluate(xpathExpression, contextNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < result.snapshotLength; i++) {
    var node = result.snapshotItem(i);
    // 对每个节点进行操作
}

4. `snapshotLength`

当使用 snapshotItem(index) 方法时，可以通过 snapshotLength 属性获取结果中节点的总数。

5. `numberValue`, `stringValue`, `booleanValue`

根据查询的类型和预期的返回值，你可以选择以下类型作为 resultType：

XPathResult.NUMBER_TYPE：返回一个数值（使用 numberValue）。
XPathResult.STRING_TYPE：返回一个字符串（使用 stringValue）。
XPathResult.BOOLEAN_TYPE：返回一个布尔值（使用 booleanValue）。

这些类型适用于XPath表达式预期返回非节点集的情况（例如，计算表达式的结果或检查某个条件是否为真）。

示例：

假设你想计算某个特定类的元素数量，可以使用以下方式：

var result = document.evaluate("count(//div[@class='someClass'])", document, null, XPathResult.NUMBER_TYPE, null);
console.log("Found elements:", result.numberValue);

选择合适的 resultType 取决于你的具体需求和XPath查询的类型。每种方法都适合于不同的场景，了解它们的不同可以帮助你更高效地处理DOM查询和操作。

9.3 代码省略写法

在JavaScript中，如果你的参数列表中某个参数不需要提供，可以直接省略它，而无需使用null来代替。因此，你可以直接去掉null参数，像这样：

var result = document.evaluate("//input[@id='inputField']", null, null, 
                               XPathResult.FIRST_ORDERED_NODE_TYPE, null);

可以简化为：

var result = document.evaluate("//input[@id='inputField']", 
                               XPathResult.FIRST_ORDERED_NODE_TYPE);

在这个简化版本中，我们省略了contextNode、namespaceResolver和result参数，因为它们在这个例子中都不需要提供。JavaScript会根据参数位置自动匹配参数，所以直接去掉不需要的参数即可。

简写例子

 document.evaluate('//div[@aria-label="批量上传"]//span[text()="选择文件"]',document).iterateNext().click()

说明：

示例：

1. `singleNodeValue`

2. `iterateNext()`

3. `snapshotItem(index)`

4. `snapshotLength`

5. `numberValue`, `stringValue`, `booleanValue`

示例：

评论内容 *

评论列表 (0 条评论)

文章目录

js document等操作

说明：

示例：

1. singleNodeValue

2. iterateNext()

3. snapshotItem(index)

4. snapshotLength

5. numberValue, stringValue, booleanValue

示例：

评论内容 *

评论列表 (0 条评论)

文章目录

1. `singleNodeValue`

2. `iterateNext()`

3. `snapshotItem(index)`

4. `snapshotLength`

5. `numberValue`, `stringValue`, `booleanValue`