element.firstChild एफएफ

Question

में किसी ऑब्जेक्ट के बजाय '

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

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

कोड इस बिंदु पर कोई फर्क नहीं पड़ता के बाकी क्योंकि यह कहा जाता हो जाता है कभी नहीं:

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

फिर, पृष्ठ लोड पर, मैं इस विधि में गिरा दिया हो: pertitent एचटीएमएल इस प्रकार है । आईडी टैब के साथ div को संदर्भित करने के लिए टैबकंटनर ठीक से सेट किया गया है। अब, इंटरनेट एक्सप्लोरर में जब मैं tabContainer को कॉल करता हूं। फर्स्ट चाइल्ड वेरिएबल 'टैब' मेरे यूएल का संदर्भ दे रहा है और फिर कॉल var टैब = tabs.firstChild; संदर्भ मेरी पहली LI। समस्या यह है कि जब मैं tabContainer को कॉल करता हूं। फर्स्ट चाइल्ड वेंकमैन मुझे बता रहा है कि यह वापस आ रहा है। तो फ़ायरफ़ॉक्स div के अंदर वास्तविक बच्चों के रूप में मेरी न्यूलाइन पढ़ रहा है! मेरा यूएल वास्तव में बच्चे नोड संग्रह में दूसरा बच्चा है!

क्या इसे ठीक करने का कोई तरीका है?

धन्यवाद!

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

मैं की तरह एक पुस्तकालय का उपयोग करने के जावास्क्रिप्ट में डोम के साथ काम करने की कोशिश कर किसी को भी सिफारिश करेंगे jquery। यह आपके जीवन को अधिक आसान बना देगा।

फिर आप fallows के रूप में जे एस समारोह को फिर से लिखने सकता है:

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 
} 

Answer 4

भी दक्षता पर एक एक आँख के साथ

, इस फ़ंक्शन एल

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

Answer 5

उपयोग element.querySelector("*") पहले प्राप्त करने के लिए की firstChild तत्व नोड बाल तत्व

डेमो:

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 6

आप

document.getElementById(TabContainer).firstElementChild; 

बजाय

firstChild