使用Javascript检查给定HTML元素中是否存在子元素

Question

I'm trying to write a pure javascript function that will take an element from the page (generally a <div>) and from there work out which if it has any specific child elements. 我正在尝试编写一个纯净的javascript函数，该函数将从页面中获取一个元素（通常为<div>），然后从那里计算出是否具有任何特定的子元素。 Which will essentially be any tag that signifies textual content, so: <p> or any header tag so ( <h1> .. <h6> ) or lists etc. 本质上，它将是任何表示文本内容的标签，因此： <p>或任何标头标签（ <h1> .. <h6> ）或列表等。

I'm not looking to manipulate these elements simply check for their existence. 我不希望仅通过检查它们的存在来操纵这些元素。

So the function would take the form 因此该函数将采用以下形式

/**
 * Takes an element and returns whether
 * the element contains content
 * @return boolean (true/false)
 */
var isContent = function (elementToCheck) {

};

I'm currently using document.getElementsByTagName('div') to get all the <div> elements of the page. 我目前正在使用document.getElementsByTagName('div')来获取页面的所有<div>元素。 I will then parse these into the function one at a time. 然后，我将它们一次解析为函数。

I've currently got this down 我现在已经记下来了

var isContent = function (elementToCheck) {
    if (elementToCheck.hasChildNodes()) {
        var children = elementToCheck.childNodes;

        for (var i = 0; i < children.length; i++) {
            // handle children[i]
        }
   }
}

I've been trying out using chilren[i].nodeValue and testing for equality with various things but I can't get any of them to pass. 我一直在尝试使用chilren[i].nodeValue并测试各种事物的相等性，但是我无法通过任何事物。

What would be the best way to carry on with this? 进行此操作的最佳方法是什么？ I think it's turning in to a messy function as I'm having to get all the elements outside of this, loop over them and parse them in here which then performs another loop. 我认为它变成了一个杂乱的函数，因为我必须从中获取所有元素，在它们之上循环并在此处解析它们，然后执行另一个循环。 I'm starting to wonder if it's possible to do it with a regex? 我开始怀疑是否可以使用正则表达式来做到这一点？

Answer 1

If what you want is to find all <div> elements that have at least one child node that's got a non-empty content model, then something like this work in all browsers back to (and including) IE8: 如果要查找所有具有至少一个非空内容模型的子节点的<div>元素，则在所有回溯到IE8（包括IE8）的浏览器中都可以使用这种方法：

function findDivWithContents() {
  var allDivs = document.getElementsByTagName('div');
  var di, divs = [];
  for (di = 0; di < allDivs.length; ++di) {
    if (allDivs[di].querySelectorAll('p, span, h1, h2, h3, h4, ... ').length > 0)
      divs.push(allDivs[di]);
  return divs;
}

That uses .querySelectorAll() to find your container elements. 使用.querySelectorAll()查找您的容器元素。 (You'd have to complete the list of course.) （您必须完成课程清单。）

edit alternatively, you could do it backwards: iterate through all the container type elements you're interested in, and check to see if their parent is a <div> : 或者，也可以向后编辑：遍历您感兴趣的所有容器类型元素，并检查其父元素是否为<div> ：

function findTheDivs() {
  var containers = document.querySelectorAll('p, span, div, h1, h2, h3, ... ');
  var i, divs = [];
  for (i = 0; i < containers.length; ++i) {
    if (containers[i].parentNode.tagName === 'DIV')
      divs.push(containers[i].parentNode);
  return divs;
}

I think this is probably way more efficient. 我认为这可能更有效。 (It might be necessary to add a nonsense "class" marker to each <div> to avoid adding it to the list more than once.) （可能有必要在每个<div>上添加一个废话的“类”标记，以避免多次将其添加到列表中。）

Answer 2

I've had a bash at this, though Pointy has mentioned a function new to me called querySelectorAll() that might let you cut out the containsTextElements loop. 尽管Pointy向我提到了一个名为querySelectorAll()新函数，该函数可能会让您切掉containsTextElements循环，但对此我有些a之以鼻。

var textTags = ["h1", "h2", "h3", "h4", "h5", "h6", "p"];

var containsTextElements = function(elementToCheck) {

    for (var i = 0; i < textTags.length; i++) {
        if(elementToCheck.getElementsByTagName(textTags[i]).length > 0)
            return true;    
    }
    return false;
}

var doStuffToDivsWithText = function(callback) {

    var divs = document.getElementsByTagName("div");
    for(var i = 0; i < divs.length; i++ ) {
        if(containsTextElements(divs[i]))
            callback(divs[i]); 
    };
}

doStuffToDivsWithText(function(div) {
    console.log(div.id);
});

Answer 3

This way you do not need jQuery, do not need to (but can) specify the tags you want the textual content of and can apply a regex to the found texts. 这样，您就不需要jQuery，不需要（但可以）指定您想要文本内容的标签，并且可以将正则表达式应用于找到的文本。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    function logTextContent(elem) {
    var childNodes = elem.childNodes;
    for(var i=0; i<childNodes.length; i++) {
        var nodex = childNodes[i];
        if(nodex.nodeType == 3 /* text node */) {
        var textContent = nodex.nodeValue;
        if(textContent.match(/\S+/) /* apply regex */) {
            console.log("found text: "+textContent);
        }
        }
        else if (nodex.nodeType == 1 /* element node*/) {
        logTextContent(nodex)
        }
    }
    }
    function findDocumentTexts() {
    var docElems = document.getElementsByTagName("body");
    for(var i=0; i<docElems.length; i++) {
        var elem = docElems[i];
        logTextContent(elem);
    }
    }
</script>
</head>
<body>
<button onclick="findDocumentTexts()">find document texts</button>
<!-- I will fail -->
<div>
    <!-- I will pass -->
    <div>
    <h1>Heading</h1>
    <p>
        I should be found straight away
    </p>
    </div>
    <!-- I will fail -->
    <div>
    <!-- I will pass -->
    <div>
        <p>
        I will be missed by the first div but found by the second
        </p>
    </div>
    </div>
</div>
</body>
</html>

使用Javascript检查给定HTML元素中是否存在子元素

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-03-28 13:52:49

解决方案2
0 2013-03-28 14:56:53

解决方案3
0 2013-03-28 14:59:47

使用Javascript检查给定HTML元素中是否存在子元素

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-03-28 13:52:49

解决方案2 0 2013-03-28 14:56:53

解决方案3 0 2013-03-28 14:59:47

解决方案1
1 已采纳 2013-03-28 13:52:49

解决方案2
0 2013-03-28 14:56:53

解决方案3
0 2013-03-28 14:59:47