javascript - 如何阅读 HTML 标签

Question

我想在不使用 id/class 的情况下使用 Javascript 读取 HTML 标签。我知道getElementById的功能。但我想知道如何在不使用 Javascript 中的 id 或 class 而不是 Jquery 的情况下读取 HTML 标签。

Answer 1

整个 DOM API 都为您准备好了。

• (element).getElementsByTagName通过标签名称获取元素。
• (element).getElementsByClassName按类名获取元素。
• (element).querySelector[All]基于 CSS 选择器获取一个元素/元素。
• (element).children获取元素的子元素。
• (element).childNodes获取元素的子节点。

名单还在继续。

Answer 2

您可以使用document.getElementsByTagName(...)，例如：

var divs = document.getElementsByTagName('div');
divs; // => a list of "div" elements in the document.

Answer 3

您可以使用document.getElementsByTagName.

    var allDivsinDom = document.getElementsByTagName('div'); //Array of all divs
    var allAnchorinDom = document.getElementsByTagName('a'); //Array of all a
....

这样你就可以访问 dom 中的所有元素

Answer 4

您还可以获取每个子节点的 and 并读取整个 DOM 树，如下所示document.body.childNodes：childNodes

function readHTML(node) {
    var i, child;
    if (node.nodeType == 1) { // only tags 
        for (i = 0 ; i < node.childNodes.length ; ++i) {
            child = node.childNodes[i];
            // do something with node
            window.console.info(child.tagName);
            readHTML(child);
        }
    }
}
readHTML(document.body);

以及document.getElementsByTagName之前提出的

Answer 5

页面中的 HTML 标签形成一棵树；那棵树的根是一个名为“文档”的节点。您可以调用该节点上的方法，例如 getElementById，以在树中进一步查找节点，但您不必这样做。

您可以通过访问其 innerHTML 属性来检索任何节点的原始 HTML 内容，包括整个文档。（请注意，这不会为您提供节点本身的 HTML 标记，而是其内容，因此如果您还需要该标记，则需要获取节点的父节点的 innerHTML）

如果您想读取整个文档的原始 HTML，请尝试访问 document.documentElement.innerHTML，并解析您从中获得的内容。