element.firstChild возвращается '

Question

Я написал систему с вкладками, используя какой-то очень простой 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 с идентификаторами вкладок. Теперь в Internet Explorer, когда я вызываю tabContainer.firstChild, переменная 'tabs' ссылается на мой UL, а затем вызывается var tab = tabs.firstChild; ссылается на мой первый LI. Проблема в том, что когда я звоню tabContainer.firstChild, Венкман говорит мне, что возвращается. Так что Firefox читает мои новые строки как настоящие дети внутри div! Мой UL фактически второй ребенок в коллекции childNodes!

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

Спасибо!

Answer 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);

Answer 2

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

Answer 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>

Answer 4

Эта функция также возвращает узел элемента firstChild из el

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

с учетом эффективности

Answer 5

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

document.getElementById(TabContainer).firstElementChild;

вместо firstChild

Answer 6

Я бы порекомендовал всем, кто пытается работать с 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
}