Element.firstChild возвращает "<TextNode..." вместо объекта в FF

Я написал систему вкладок, используя какой-то очень простой Javascript, и он работает как чемпион в IE 8, но в FireFox 3 я немного отстаю. Предпочитаемый HTML выглядит следующим образом:

            <div id="tabs">
                <ul class="tabs">
                    <li class="current"><a><span>News</span></a></li>
                    <li><a><span>Videos</span></a></li>
                    <li><a><span>Photos</span></a></li>
                    <li><a><span>Twitter</span></a></li>
                </ul>
            </div>

Затем при загрузке страницы я попадаю в этот метод:

function processTabs(TabContainer, PageContainer, Index) {
var tabContainer = document.getElementById(TabContainer);
var tabs = tabContainer.firstChild;

var tab = tabs.firstChild;
var i = 0;
.... more code }

Остальная часть кода не имеет значения на данный момент, потому что он никогда не вызывается. tabContainer установлен правильно, чтобы ссылаться на div с вкладками ID. Теперь, в Internet Explorer, когда я вызываю tabContainer.firstChild, переменные "tabs" ссылаются на мой UL, а затем на вызов var tab = tabs.firstChild; ссылается на мой первый LI. Проблема в том, что когда я вызываю tabContainer.firstChild Venkman говорит мне, что он возвращается. Так что firefox читает мои новые строки как настоящие дети внутри div! Мой UL на самом деле является вторым потомком в коллекции childNodes!

Есть ли способ исправить это?

Спасибо!

Ответ 1

Вам следует пропустить TextNodes, вам может помочь простая функция:

function getFirstChild(el){
  var firstChild = el.firstChild;
  while(firstChild != null && firstChild.nodeType == 3){ // skip TextNodes
    firstChild = firstChild.nextSibling;
  }
  return firstChild;
}

Использование:

var tabContainer = document.getElementById(TabContainer);
var tabs = getFirstChild(tabContainer);

Ответ 2

Вы можете использовать node.firstElementChild, чтобы игнорировать главный текст или использовать библиотеку jQuery, которая позаботится об этом.

Ответ 3

Используйте element.querySelector("*"), чтобы получить первый дочерний элемент.

Демо:

var container = document.getElementById("container")

console.log(container.querySelector("*")) // <div>This is a test</div>
console.log(container.firstChild) // #text
console.log(container.childNodes[0]) // #text

<div id="container">
  <div>This is a test</div>
</div>

Ответ 4

С прицелом на эффективность, эта функция возвращает элемент firstChild node el

function firstChildElement(el)
{
    el = el.firstChild;
    while (el && el.nodeType !== 1)
       el = el.nextSibling;
    return el;
}

Ответ 5

Я бы порекомендовал всем, кто пытается работать с DOM в javascript, использовать библиотеку, например jquery. Это облегчит вашу жизнь.

Вы могли бы переписать JS-функцию как паров:

function processTabs(TabContainer, PageContainer, Index) {
    var tabContainer = document.getElementById(TabContainer);

    // jquery used to find all the <li> elements
    var tabs = $(tabContainer).filter('li');

    // use the jquery get( index ) function to retrieve the first tab
    var tab = tabs.get(0);
    var i = 0;
    .... more code
}

Ответ 6

Вы можете попробовать

document.getElementById(TabContainer).firstElementChild;

вместо firstChild