由html空格引起的异常错误 [英] Very strange error caused by html whitespace

问题描述

我在Firefox中遇到了一个非常奇怪的错误。

我在外部文件中有一个javascript函数，在常规复杂性网站上工作得很好。但是我已经把几个演示的例子放在一起了，并且遇到了一些奇怪的事情。

使用html格式化（在编辑器中）：

 < div>< p> Q：兔子在哪里？< / p>< p class =faq_answer> A：知道，诚实< / p>< / div> 
  

Javascript的工作原理如下。

但是，如下所示：

 < div> 
< p>问：兔子在哪里？< / p> 
< p class =faq_answer> A：我不知道，诚实< / p> 
< / div> 
  

在此行失败：

  elementsList [i] .parentNode.firstChild.appendChild（finalRender.cloneNode（true））; 
  

为什么地球上的HTML格式化会导致任何东西？

解决方案

这不是一个bug。 DOM不仅具有元素节点，还包括 文本节点 ^[docs] （等等）。在这个例子中：

 < div> 
< p>问：兔子在哪里？< / p> 
  

您至少有两个文本节点：

• < div> 和< p> 之间的一个，包含


• < p> 元素节点中的一个文本节点，包含文本兔子在哪里？。

因此，如果 elementList [i] .parentNode 指的是< div> 元素，

  elementsList [i] .parentNode.firstChild 
  

将引用第一个文本节点。

如果要获取第一个元素节点，请使用

  elementsList [i] .parentNode.children [0] 
  

< hr>

更新：您提到Firefox 3.0，而且此版本不支持 children 属性。

Afaik唯一的解决方案是循环孩子（或遍历它们）并测试它是否是文本节点：

  var firstChild = elementsList [i] .parentNode.firstChild; 
 
 //某种速记循环
 while（firstChild.nodeType！== 1&&（firstChild = firstChild.nextSibling））; 
 
 if（firstChild）{
 //存在并找到
} 
  

您可能希望将其放在一个额外的函数中：

  function getFirstElementChild（element）{
 var firstChild = null; 
 if（element.children）{
 firstChild = element.children [0] ||空值; 
} 
 else {
 firstChild = element.firstChild; 
 while（firstChild.nodeType！== 1&&（firstChild = firstChild.nextSibling））; 
} 
 return firstChild; 
} 
  

您可以（也应该）也考虑使用一个从所有，如 jQuery 。

这取决于你的代码是什么实际上，如果你为每个节点运行这个方法，它将是这样的：

  $（'。faq_answer'） .prev（）。append（finalRender.cloneNode（true））; 
  

（假设 p 元素总是在 .faq_answer 元素）

这是整个代码，你不必再遍历元素。

I have encountered a very strange bug in Firefox.

I have a javascript function in an external file that works perfectly on regular complexity websites. However I have been putting together a few demonstration examples and come across something odd.

With html formatted like this (in an editor):

<div><p>Q: Where's the rabbit?</p><p class="faq_answer">A: I don't know, honest</p></div>

The Javascript works as expected.

However when like this:

<div>
<p>Q: Where's the rabbit?</p>
<p class="faq_answer">A: I don't know, honest</p>
</div>

It fails at this line:

elementsList[i].parentNode.firstChild.appendChild(finalRender.cloneNode(true));

Why on Earth would formatting of html cause anything at all?

解决方案

It is not a bug. The DOM has not only element nodes, but also text nodes ^[docs] (among others). In this example:

<div>
<p>Q: Where's the rabbit?</p>

you have at least two text nodes:

• One between the <div> and the <p>, containing a line-break.
• One text node inside the <p> element node, containing the text Where's the rabbit?.

Thus, if elementsList[i].parentNode refers to the <div> element,

elementsList[i].parentNode.firstChild

will refer to the first text node.

If you want to get the first element node, use

elementsList[i].parentNode.children[0]

---

Update: You mentioned Firefox 3.0, and indeed, the children property is not supported in this version.

Afaik the only solution to this is to loop over the children (or traversing them) and test whether it is a text node or not:

var firstChild = elementsList[i].parentNode.firstChild;

// a somehow shorthand loop
while(firstChild.nodeType !== 1 && (firstChild = firstChild.nextSibling));

if(firstChild) {
    // exists and found
}

You might want to put this in an extra function:

function getFirstElementChild(element) {
    var firstChild = null;
    if(element.children) {
        firstChild = element.children[0] || null;
    }
    else {
      firstChild = element.firstChild;
      while(firstChild.nodeType !== 1 && (firstChild = firstChild.nextSibling));
    }
    return firstChild;
}

You can (and should) also consider using a library that abstracts from all that, like jQuery.

It depends on what your code is actually doing, but if you run this method for every node, it would be something like:

$('.faq_answer').prev().append(finalRender.cloneNode(true));

(assuming the p element always comes before the .faq_answer element)

This is the whole code, you wouldn't have to loop over the elements anymore.

这篇关于由html空格引起的异常错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！