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