[英]Check for the existence of sub elements within a given HTML element using Javascript
我正在尝试编写一个纯净的javascript函数,该函数将从页面中获取一个元素(通常为<div>),然后从那里计算出是否具有任何特定的子元素。 本质上,它将是任何表示文本内容的标签,因此: <p>
或任何标头标签( <h1>
.. <h6>
)或列表等。
我不希望仅通过检查它们的存在来操纵这些元素。
因此该函数将采用以下形式
/**
* Takes an element and returns whether
* the element contains content
* @return boolean (true/false)
*/
var isContent = function (elementToCheck) {
};
我目前正在使用document.getElementsByTagName('div')
来获取页面的所有<div>
元素。 然后,我将它们一次解析为函数。
我现在已经记下来了
var isContent = function (elementToCheck) {
if (elementToCheck.hasChildNodes()) {
var children = elementToCheck.childNodes;
for (var i = 0; i < children.length; i++) {
// handle children[i]
}
}
}
我一直在尝试使用chilren[i].nodeValue
并测试各种事物的相等性,但是我无法通过任何事物。
进行此操作的最佳方法是什么? 我认为它变成了一个杂乱的函数,因为我必须从中获取所有元素,在它们之上循环并在此处解析它们,然后执行另一个循环。 我开始怀疑是否可以使用正则表达式来做到这一点?
如果要查找所有具有至少一个非空内容模型的子节点的<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;
}
使用.querySelectorAll()
查找您的容器元素。 (您必须完成课程清单。)
或者,也可以向后编辑 :遍历您感兴趣的所有容器类型元素,并检查其父元素是否为<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;
}
我认为这可能更有效。 (可能有必要在每个<div>
上添加一个废话的“类”标记,以避免多次将其添加到列表中。)
尽管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);
});
这样,您就不需要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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.