相关疑难解决方法(0)
迭代所有DOM元素的最有效方法？
不幸的是,我需要迭代页面的所有DOM元素,我想知道最有效的技术是什么.我可以自己对这些进行基准测试,如果我有时间可能,但我希望有人已经经历过这个或有一些我没有考虑的选择.
目前我正在使用jQuery并执行此操作:
$('body *').each(function(){
var $this = $(this);
//do stuff
});
虽然它有效,但它似乎会导致客户端出现一些延迟.它也可以用更具体的jQuery上下文进行调整,比如$('body', '*')
我发现本机javascript通常比jQuery更快,我发现了这一点.
var items = document.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
//do stuff
}
我假设本机选项更快.想知道是否有其他选择我没有考虑过.也许是一个递归选项,可以并行迭代子节点.
推荐指数
解决办法
查看次数
将HTML映射到JSON
我正在尝试将HTML映射到JSON,结构完整.是否有任何图书馆可以做到这一点,还是我需要自己编写？我想如果没有html2json库,我可以把xml2json库作为一个开始.毕竟,html只是xml的一个变种吗？
更新:好的,我应该举一个例子.我想要做的是以下内容.解析一串html:
<div>
<span>text</span>Text2
</div>
像这样的json对象:
{
"type" : "div",
"content" : [
{
"type" : "span",
"content" : [
"Text2"
]
},
"Text2"
]
}
注意:如果你没有注意到标签,我正在寻找Javascript的解决方案
推荐指数
解决办法
查看次数
document.all与document.getElementById
当你应该使用document.all与document.getElementById？
推荐指数
解决办法
查看次数
使用纯javascript获取body标签中的所有元素
我正在尝试使用纯javascript获取数组中HTML页面的Body标记内的所有元素(标记).我的意思是不使用任何框架(例如JQuery).
我发现你可以使用document.all但会返回整个文档中的所有元素,包括脚本.
无论如何我能得到那些标签吗？
谢谢
推荐指数
解决办法
查看次数
计算出的 DOM 节点/事件数与 Chrome 开发工具中的数字不一致
我注意到在我的网站上，Google Chrome 开发人员工具“性能监视器”显示的数字与通过getEventListeners()和确定的数字不同document.querySelectorAll('*')。
正如您在下面的屏幕截图中看到的，控制台中计算的事件数量明显高于 Chrome 开发工具中规定的数量，而 DOM 节点的数量则明显较低。
知道如何解释吗？
function countDomEventListeners (elements) {
return Array.from(elements).reduce((count, node) => {
const listeners = getEventListeners(node)
for (var eventName in listeners) {
count += listeners[eventName].length
}
return count
}, 0)
}
elements = document.querySelectorAll('*')
console.log('DOM Nodes:', elements.length)
console.log('DOM event listeners:', countDomEventListeners(elements))
推荐指数
解决办法
查看次数
使用Javascript查找页面或页面视图的背景颜色
我是一个有复杂问题的 JS 新手。我想找出任何网页的背景颜色。问题是有时它是在 body 标签中定义的，有时是在内联或外部 css 中定义的，在一个更复杂的例子中，一些网站没有在 body 上设置背景颜色（在某些情况下它们也是如此），而是放置了一个 DIV 来覆盖整个页面。所以我的问题是我想找出整个视图的背景颜色。有人可以帮帮我吗。
我已经尝试在发布这个问题之前进行搜索，但我只找到了获取主体颜色而不是整个视图背景的方法，因此请不要将其标记为重复。
提前致谢
推荐指数
解决办法
查看次数
根据条件是否反应更改文本颜色
我想使用类似的东西来getElementById选择我的元素并更改文本颜色。我目前有一个无序列表，并希望根据 if 条件更改每个人的颜色。
<div style={styles.passwordRules}>
<ul style={styles.listOne}>
<li style={styles.li}><span style={styles.error} id="test">8 a 16 caratteri</span></li>
<li style={styles.li}><span style={styles.fontNormal}>Carattere maiuscolo</span></li>
</ul>
<ul style={styles.listTwo}>
<li style={styles.li}><span style={styles.fontNormal}>Un numero</span></li>
<li style={styles.li}><span style={styles.fontNormal}>Carattere minuscolo</span></li>
</ul>
<ul style={styles.listThree}>
<li style={styles.li}><span style={styles.fontLink}>Nessuna informazione personale</span></li>
</ul>
</div>
这意味着，例如，我想要类似的东西：
if(text === 'foo') {
//change colour to grey
}
请注意，我无法使用 getElementById
推荐指数
解决办法
查看次数
计算页面上不在此元素中的其他元素的（总）高度
在一个非常凌乱的页面上，我有一个 div，我试图找到一种方法来计算不在我的 div 中的所有元素的（总）高度。
无论 div 的位置、大小和内容如何，我都需要计算它。我曾尝试offsetHeight，clientHeight和window.getComputedStyle.getPropertyValue('height')我已经发现的offsetHeight提供了最可靠的结果（据我所知只有保证金缺失）。
我试图用一种非动态的方式来计算所有其他元素的高度，但我的误差幅度超过了 120 像素（我使用<body>的高度作为目标）。
编辑：
我知道如何获得一个元素的渲染高度，我现在想要渲染高度关闭除 one 之外的所有元素。
代码：
var heights = {
'body' : { 'element': document.getElementsByTagName( 'body' )[ 0 ], 'computed': window.getComputedStyle( document.getElementsByTagName( 'body' )[ 0 ], null ) },
'header' : { 'element': document.getElementById( 'headertxtContainer' ), 'computed': window.getComputedStyle( document.getElementById( 'headertxtContainer' ), null ) },
'content': { 'element': document.getElementById( 'body_div' ), 'computed': window.getComputedStyle( document.getElementById( 'body_div' ), null ) …推荐指数
解决办法
查看次数
标签 统计
javascript ×7
html ×4
css ×3
dom ×2
dom-events ×1
jquery ×1
json ×1
optimization ×1
performance ×1
reactjs ×1