什么时候是“;“安全”;以在解析文档时修改给定的html元素/节点
When is it "safe" to modify a given html element/node while parsing the document?
在解析和修改HTML页面时,我只想更改文本内容,不想触摸script
和style
标签(肯定会有更多我不想惹的东西)。
除了显式检查nodeName != "SCRIPT"
之外,有没有一种干净的方法可以只解析和修改html页面上的文本?
如果您想更改除script
和style
标记之外的内容,检查它们听起来非常合理。
node.nodeName != 'SCRIPT' && node.nodeName != 'STYLE'
如果您试图遍历DOM并只检查/修改显示的文本,那么您需要对一堆标记类型进行特殊处理,避免介入或修改它们。该列表中有:<script>
、<iframe>
、<object>
、<embed>
和<style>
。
如果你感兴趣的话,这里有一个我使用过的树遍历函数,它跳过了这些标签,并经过了一些性能优化,比递归实现工作得更快。这可能不是您想要的确切函数,但您可以获得跳过标记的大致想法。这可以通过一个小的更改来调整,只在文本节点上调用回调:
var treeWalkFast = (function() {
// create closure for constants
var skipTags = {"SCRIPT": true, "IFRAME": true, "OBJECT": true, "EMBED": true, "STYLE": true};
return function(parent, fn, allNodes) {
var node = parent.firstChild, nextNode;
while (node && node != parent) {
if (allNodes || node.nodeType === 1) {
if (fn(node) === false) {
return(false);
}
}
// if it's an element &&
// has children &&
// has a tagname && is not in the skipTags list
// then, we can enumerate children
if (node.nodeType === 1 && node.firstChild && !(node.tagName && skipTags[node.tagName])) {
node = node.firstChild;
} else if (node.nextSibling) {
node = node.nextSibling;
} else {
// no child and no nextsibling
// find parent that has a nextSibling
while ((node = node.parentNode) != parent) {
if (node.nextSibling) {
node = node.nextSibling;
break;
}
}
}
}
}
})();
与其检查nodeName != "SCRIPT"
,不如只查询所需的元素,并使用document.getElementsByName
、document.getElementsByTagName
,。。。如果使用像jQuery这样的库,那么只查询需要修改的元素应该是一项简单的任务。
相关文章:
- 复制和修改元素,以便在html文档的另一部分使用它们
- 如何修改元素中的现有<内容>
- jQuery 在 ajax 调用后修改元素
- 如何使用带有 % 符号值的 ERB 和 JQuery 修改元素样式属性
- Javascript,在克隆后修改元素
- 当键关闭事件(TAB 键)修改元素值时不触发更改事件
- 修改元素属性后,Jquery 选择器不起作用
- 根据选择选项修改元素
- 文本框的保留值,修改元素后选择
- 如何临时修改元素的CSS
- 使用jQuery拆分和修改元素
- 修改元素'事件函数的参数
- 修改元素的CSS
- 使用jQuery通过ID动态修改元素属性
- 如何修改元素的部分,当它在一个变量
- 使用php修改元素'
- 在Angular.js中,如何在点击时使用ng-repeat迭代对象列表中修改元素的属性?
- javascript修改元素的样式
- 使用jQuery修改元素内容
- 不能使用jquery .on()修改元素的属性