Question

我想用Javascript读取HTML标签而不使用id / class。我知道 getElementById 的功能。但我想知道如何在不使用Javascript中的id或类而不使用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

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

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标记，而是提供其内容的HTML标记，因此如果您还需要该标记，则需要获取节点的父级innerHTML）

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

如何阅读HTML标签

5 个答案: