Разбор через DOM получить всех детей и ценностей - PullRequest
Новая
       0

Разбор через DOM получить всех детей и ценностей

7 голосов
/ 08 июня 2011

Контейнер - это div, к которому я добавил немного базового HTML.

Функция debug_log печатает следующее:

Я в пролете!
Я в div!
Я в
р

Что случилось с остальным текстом в теге p («тег aragraph !!»). Я думаю, что я не понимаю, как именно пройти через дерево документов. Мне нужна функция, которая будет анализировать все дерево документа и возвращать все элементы и их значения. Приведенный ниже код является своего рода первым взломом при получении всех отображаемых значений. 

    container.innerHTML = '<span>I\'m in a span! </span><div> I\'m in a div! </div><p>I\'m in a <span>p</span>aragraph tag!!</p>';

    DEMO.parse_dom(container);



   DEMO.parse_dom = function(ele)
    {
        var child_arr = ele.childNodes;

        for(var i = 0; i < child_arr.length; i++)
        {
            debug_log(child_arr[i].firstChild.nodeValue);
            DEMO.parse_dom(child_arr[i]);
        }
     }

Ответы [ 3 ]

9 голосов
/ 08 июня 2011

Обычно при обходе DOM вы хотите указать начальную точку. Оттуда проверьте, имеет ли начальная точка childNodes. Если это так, переберите их и повторите функцию, если они тоже имеют childNodes.

Вот некоторый код, который выводится на консоль, используя DOM-форму этих узлов (я использовал элемент document / HTML в качестве начальной точки). Вам нужно будет запустить if против window.console, если вы разрешаете не-разработчикам загружать эту страницу / код и используете console: 

recurseDomChildren(document.documentElement, true);

function recurseDomChildren(start, output)
{
    var nodes;
    if(start.childNodes)
    {
        nodes = start.childNodes;
        loopNodeChildren(nodes, output);
    }
}

function loopNodeChildren(nodes, output)
{
    var node;
    for(var i=0;i<nodes.length;i++)
    {
        node = nodes[i];
        if(output)
        {
            outputNode(node);
        }
        if(node.childNodes)
        {
            recurseDomChildren(node, output);
        }
    }
}

function outputNode(node)
{
    var whitespace = /^\s+$/g;
    if(node.nodeType === 1)
    {
        console.log("element: " + node.tagName);  
    }else if(node.nodeType === 3)
    {
        //clear whitespace text nodes
        node.data = node.data.replace(whitespace, "");
        if(node.data)
        {
            console.log("text: " + node.data); 
        }  
    }  
}

Пример: http://jsfiddle.net/ee5X6/

0 голосов
/ 08 июня 2011

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

<html>
<head>
<script src="INCLUDE JQUERY HERE">
</script>
</head>
<body>
<span>
<span>I\'m in a span! </span><div> I\'m in a div! </div><p>I\'m in a <span>p</span>aragraph tag!!</p>
</span>
<script>
function traverse(elem){
  $(elem).children().each(function(i,e){
    console.log($(e).text());
    traverse($(e));
  });
}

traverse($("body").children().first());
</script>
</body>
<html>

, который дает следующий вывод консоли: 

I\'m in a span! 
I\'m in a div! 
I\'m in a paragraph tag!!
p
0 голосов
/ 08 июня 2011

В 

<p>I\'m in a <span>p</span>aragraph tag!!</p>

вы запрашиваете первого потомка, который является текстовым узлом, содержащим «Я в».Текст "тег араграфа !!"является третьим дочерним элементом, который не зарегистрирован.

Любопытно, что последняя строка, содержащая «p», никогда не должна появляться, поскольку элемент span не является прямым дочерним элементом контейнера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...