如何使用纯 Javascript 进行这项工作?删除没有类“destroy”的 HTML 文档的正文部分中的所有内容(div、ps、as、span、imgs、...)。
PS.:纯 Javascript 意味着:没有 JQuery 或其他框架..
如何使用纯 Javascript 进行这项工作?删除没有类“destroy”的 HTML 文档的正文部分中的所有内容(div、ps、as、span、imgs、...)。
PS.:纯 Javascript 意味着:没有 JQuery 或其他框架..
循环document.body.getElementsByTagName(*)
,检查是否每个element.className.test(/\bdestroy\b/)
,并调用element.parentNode.removeChild(element)
。
如果您愿意使用 jQuery,请致电$(':not(.destroy)').remove()
您可以递归地遍历 DOM 并检查每个节点的类。像这样的东西
function walk_the_DOM(node) {
if (node.className && (node.className.indexOf("destroy")>-1)) {
node.parentNode.removeChild(node);
} else {
node = node.firstChild;
while (node) {
walk_the_DOM(node);
node = node.nextSibling;
}
}
};
walk_the_DOM(document.body);
假设“纯 JavaScript”是指“没有任何第三方库(如纯 JS 的 jQuery),但使用浏览器提供的 DOM API(通常不是用 JS 编写)”,那么:
document.getElementsByTagName('*');
.className
每个元素的属性值foo.parentNode.removeChild(foo)
不过,您将需要完善您的规则。否则,您最终将删除<html>
要保留的所有节点的父元素(包括元素)(在此过程中删除它们的所有后代)。
您可以遍历 DOM 树并检查className
每个元素的属性。遍历 DOM 树比人们想象的要容易得多:
var reMatch = /\bdestroy\b/;
function walk(node) {
var child, next, tagName;
switch (node.nodeType) {
case 1: // Element
// Element, we exempt some of them; the rest,
// check if they match
tagName = node.tagName.toUpperCase();
if (tagName !== "HTML" &&
tagName != "HEAD" &&
tagName !== "BODY" &&
!reMatch.test(node.className)) {
// Not exempt, doesn't have the class; remove it
node.parentNode.removeChild(node);
break;
}
/* FALL THROUGH TO */
case 9: // Document
// Document or Element, walk our child nodes
for (child = node.firstChild;
child;
child = next) {
// Important to grab the next one *before* visiting it,
// as visiting it may remove it!
next = child.nextSibling;
walk(child);
}
break;
}
}
然后开始:
walk(document.body);
...或沿着这些思路(未经测试,但它应该让你去)。显然用常量替换那些幻数(并非所有实现都Node
按应有的方式定义它们)。DOM 规范中的详细信息:DOM2、DOM2 HTML、DOM3以及 ECMAScript (JavaScript)规范(用于正则表达式)。
如果您删除所有内容,您将删除body
,head
以及其他人。因此,为避免这种情况,您可以使用 Jquery 尝试以下代码
尝试这个
$("body").children(':not(.destroy)').remove();