SORU
5 NİSAN 2010, PAZARTESİ


() getElementsByTagName textNodes için eşdeğer

Bir belgede textNode tüm nesneleri toplama almak için herhangi bir yolu var mı?

getElementsByTagName() Öğeler için harika çalışıyor, ama textNodes unsurlardır.

Güncelleme:Bu DOM - çok aşağıda öneririz yürüyüş yaparak başarılı olacağını biliyorum. Belgede her düğüm bakar DOM-walker bir fonksiyon yazmayı biliyorum. Bunu yapmak için tarayıcı yerel bir yolu olduğunu umuyordum. <input>tüm bu biraz garip değil sonuçta yerleşik tek bir çağrı ile, ancak tüm textNodeler.

CEVAP
5 NİSAN 2010, PAZARTESİ


Güncelleme:

1000 çalışan üzerinde 6 bu yöntemlerin her biri için bazı temel performans testleri belirttiğimiz. getElementsByTagName en hızlı ama öyle yarım yamalak iş olarak değil tüm öğeleri seçin, ama sadece belli bir tip etiketi ( sanırım p) ve körü körüne kabul eder, onun firstChild bir metin öğesi. Küçük gösteri amaçlı ve TreeWalker performansını karşılaştırmak için ama onun kusurlu olabilir. Sonuçları görmek için Run the tests yourselves on jsfiddle.

  1. Bir TreeWalker kullanarak
  2. Özel Yinelemeli Geçişi
  3. Özel Özyinelemeli Çapraz Geçiş
  4. Xpath sorgu
  5. querySelectorAll
  6. getElementsByTagName

Hadi sana Text doğal düğümleri tüm almak için izin veren bir yöntem olduğunu bir an için varsayalım. Hala gez her çıkan metin düğümü ve node.nodeValue herhangi bir DOM Düğüm ile, asıl metni almak için aramak zorunda kalacak. Performans sorunu metin düğümleri yineleme aracılığıyla, ama metin olmayan tüm düğümleri yineleme ve kendi türünü kontrol ile değil. TreeWalker hızlı getElementsByTagName olmasa daha hızlı olarak (hatta getElementsByTagName oyun engelli) gerçekleştirdiği iddia ediyorum (sonuçlara göre).

Ran each test 1000 times.

Method                  Total ms        Average ms
--------------------------------------------------
document.TreeWalker          301            0.301
Iterative Traverser          769            0.769
Recursive Traverser         7352            7.352
XPath query                 1849            1.849
querySelectorAll            1725            1.725
getElementsByTagName         212            0.212
< / ^ hr .

Her bir yöntem için kaynak:

TreeWalker

function nativeTreeWalker() {
    var walker = document.createTreeWalker(
        document.body, 
        NodeFilter.SHOW_TEXT, 
        null, 
        false
    );

    var node;
    var textNodes = [];

    while(node = walker.nextNode()) {
        textNodes.push(node.nodeValue);
    }
}

Özyinelemeli Ağaç Geçişi

function customRecursiveTreeWalker() {
    var result = [];

    (function findTextNodes(current) {
        for(var i = 0; i < current.childNodes.length; i  ) {
            var child = current.childNodes[i];
            if(child.nodeType == 3) {
                result.push(child.nodeValue);
            }
            else {
                findTextNodes(child);
            }
        }
    })(document.body);
}

Yinelemeli Ağaç Geçişi

function customIterativeTreeWalker() {
    var result = [];
    var root = document.body;

    var node = root.childNodes[0];
    while(node != null) {
        if(node.nodeType == 3) { /* Fixed a bug here. Thanks @theazureshadow */
            result.push(node.nodeValue);
        }

        if(node.hasChildNodes()) {
            node = node.firstChild;
        }
        else {
            while(node.nextSibling == null && node != root) {
                node = node.parentNode;
            }
            node = node.nextSibling;
        }
    }
}

querySelectorAll

function nativeSelector() {
    var elements = document.querySelectorAll("body, body *"); /* Fixed a bug here. Thanks @theazureshadow */
    var results = [];
    var child;
    for(var i = 0; i < elements.length; i  ) {
        child = elements[i].childNodes[0];
        if(elements[i].hasChildNodes() && child.nodeType == 3) {
            results.push(child.nodeValue);
        }
    }
}

getElementsByTagName(handikap)

function getElementsByTagName() {
    var elements = document.getElementsByTagName("p");
    var results = [];
    for(var i = 0; i < elements.length; i  ) {
        results.push(elements[i].childNodes[0].nodeValue);
    }
}

XPath

function xpathSelector() {
    var xpathResult = document.evaluate(
        "//*/text()", 
        document, 
        null, 
        XPathResult.ORDERED_NODE_ITERATOR_TYPE, 
        null
    );

    var results = [], res;
    while(res = xpathResult.iterateNext()) {
        results.push(res.nodeValue);  /* Fixed a bug here. Thanks @theazureshadow */
    }
}

Ayrıca, bu tartışma yararlı - http://bytes.com/topic/javascript/answers/153239-how-do-i-get-elements-text-node bulabilirsiniz

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Jonathan D.

    Jonathan D.

    3 Kasım 2006
  • TopOfTheTech

    TopOfTheTech

    5 NİSAN 2010
  • UrAvgConsumer

    UrAvgConsume

    1 Ocak 2012