удаление всех текстовых узлов из определенного тега div с помощью JavaScript - PullRequest
Новая
       26

удаление всех текстовых узлов из определенного тега div с помощью JavaScript

2 голосов
/ 24 июня 2011

У меня есть некоторые динамически генерируемые HTML из PHP-скрипта. PHP-код выглядит так 

echo "<div id='categories'>\n";
foreach($category as $k => $v)
{
echo "<div class='category'>\n";
echo "<div id=\"$k\" class='cat_name'\n>$k</div>\n";
echo "<div id=\"$k".'_link"'." class='cat_link'>\n<a href=$v>Link</a>\n</div>\n";
echo "</div>\n";
}
echo "</div>\n";

У меня есть файл JavaScript, который пытается получить доступ к домену, как это 

var categories=document.getElementById('categories').childNodes;
for(i=0;i<categories.length;i++)
{
var link=categories[i].childNodes[1].childNodes[0].attributes['href'];
..
...
..

теперь это не работает должным образом, потому что в html есть текстовые узлы. когда я использовал firebug console, чтобы попробовать это 

document.getElementById('categories').childNodes[0].nodeType; // displays 3

отображает 3, что означает, что узел является text node. я попытался добавить document.normalize(); в window.onload, как это 

window.onload=function() {
document.normalize();
var categories=document.getElementById('categories').childNodes;
...
...

но текстовые узлы остаются в html. Как я могу удалить все текстовые узлы. Теперь я не думаю, что есть какой-либо метод, например getElementByType(), так как мне получить все текстовые узлы.

Ответы [ 4 ]

4 голосов
/ 24 июня 2011

Используйте .children вместо .childNodes только для целевых элементов (без текстовых узлов): 

   // --------------------------------------------------v
var categories=document.getElementById('categories').children;

FF3 не поддерживает это свойство, поэтому, если вы поддерживаете этот браузер, вы 'Вам потребуется метод для его репликации. 

function children( parent ) {
    var node = parent.firstChild;
    var result = [];
    if( node ) {
        do {
            if( node.nodeType === 1 ) {
                result.push( node );
            }
        } while( node = node.nextSibling )
    }
    return result;
}
var parent = document.getElementById('categories');
var categories= parent.children || children( parent );

Также обратите внимание, что IE также предоставит вам узлы комментариев, поэтому было бы лучше, если бы ваша разметка не включала комментарии.

1 голос
/ 24 июня 2011

Почему бы вам не использовать getElementsByClassName Документы MDC вместо? 

var categories=document.getElementByClassName('category');

Для браузеров, которые изначально не поддерживают его, посмотрите на эти реализации:http://ejohn.org/blog/getelementsbyclassname-speed-comparison/

0 голосов
/ 12 декабря 2018

Вот удобный однострочник: 

var elm = document.querySelector('ul');

console.log(elm.outerHTML);

// remove all text nodes
[...this.elm.childNodes].forEach(elm => elm.nodeType != 1 && elm.parentNode.removeChild(elm))

console.log(elm.outerHTML);
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

Разбивка:

  1. Получить все дети
  2. Преобразование коллекции HTMLC в массив
  3. Обход массива и проверка каждого элемента, если он имеет тип текстовый узел
  4. Если это так, удалите элемент из DOM
0 голосов
/ 24 июня 2011

Проверьте каждый узел в вашем цикле и, если это текстовый узел, либо удалите его, как вы сказали, либо ничего не делайте. Если это не текстовый узел, сделайте то, что вы хотите с ним сделать.

...