Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.07.2013, 16:24
Новичок на форуме
Отправить личное сообщение для Сергей_46 Посмотреть профиль Найти все сообщения от Сергей_46
 
Регистрация: 25.07.2013
Сообщений: 1

Удаление пустых узлов DOM
Всем привет, в JS новичок и вот задумался, как можно удалить все пустые узлы на HTML странице.
Написал скрипт - удаляет пустые узлы проходя по firstChild узлам. Есть условие поднятия на уровень выше, если кончились узлы для проверки. Но он почему-то не работает. Советы по кодированию приветствуются.
Проверяю в FF.
window.onload = function() {
		var body = document.body;
		var k = 0;
			function del_empty_nodes(obj) {
				if ((obj.childNodes.length != 0) && (obj.childNodes.length != 1)) {
					for (var i = 0; i < obj.childNodes.length; i++) {
						if (obj.childNodes[i] instanceof Text) {
							obj.removeChild(obj.childNodes[i]);
						}
					}
					del_empty_nodes(obj.firstChild);
				}else {
					if (obj.nextSibling.nodeType == 1) {
						del_empty_nodes(obj.nextSibling);
					}
					if (obj.parentNode == document.body) {
						return;
					}
					if (obj.parentNode.nextSibling.nodeType == 1) {
						var obj = obj.parentNode.nextSibling;
						del_empty_nodes(obj);
					}else {
						var obj = obj.parentNode.parentNode;
						del_empty_nodes(obj.nextSibling);
					}
					
				}
			}
		del_empty_nodes(body);	
	}

<div id="div">
		<form action="#" method="POST" id="form">
			<input type="radio" name="rad_1" onclick="selThis(this)"/>
			<input type="radio" name="rad_2" onclick="selThis(this)"/>
			<input type="radio" name="rad_3" onclick="selThis(this)"/>
		</form>
		<div>
			<p>Новый блок</p>
			<p>Новый блок</p>
			<p>Новый блок</p>
		</div>
	</div>
	<p>11111111111111111111111111111111111111</p>
Ответить с цитированием
  #2 (permalink)  
Старый 25.07.2013, 17:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

Сергей_46,
а что по вашему пустой узел?
Ответить с цитированием
  #3 (permalink)  
Старый 25.07.2013, 17:39
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сергей_46, вот http://learn.javascript.ru/traversing-dom#children и не страдайте фигней .
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #4 (permalink)  
Старый 25.07.2013, 17:47
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<div></div><div></div><div></div><div></div><input />
<script>
    alert('сейчас пустых элементов всего: ' + document.querySelectorAll('body :empty').length);

    var emptyElements = document.querySelectorAll('body :empty');
    for(var i = emptyElements.length, elem; elem = emptyElements[--i];) {
        elem.parentNode && elem.parentNode.removeChild(elem);
    }

    alert('Осталось пустых элементов всего: ' + document.querySelectorAll('body :empty').length);
</script>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 25.07.2013, 17:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

devote,
а если так ?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div><div></div><div></div><div></div><div></div></div><input />
<script>
    alert('сейчас пустых элементов всего: ' + document.querySelectorAll('body :empty').length);

    var emptyElements = document.querySelectorAll('body :empty');
    for(var i = emptyElements.length, elem; elem = emptyElements[--i];) {
        elem.parentNode && elem.parentNode.removeChild(elem);
    }

    alert('Осталось пустых элементов всего: ' + document.querySelectorAll('body :empty').length);
</script>

</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 25.07.2013, 18:03
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от рони
а если так ?
ну тут рекурсия нужна
что-то типо:
<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
 
<body>
<div><div></div><div></div><div></div><div></div></div><input />
<script>
    alert('сейчас пустых элементов всего: ' + document.querySelectorAll('body :empty').length);
 
    for(var elem; elem = document.querySelector('body :empty'); ) {
        elem.parentNode.removeChild(elem);
    }
 
    alert('Осталось пустых элементов всего: ' + document.querySelectorAll('body :empty').length);
</script>
 
</body>
 
</html>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 25.07.2013 в 18:08.
Ответить с цитированием
  #7 (permalink)  
Старый 25.07.2013, 19:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

devote,
ок ) только считатьли инпут или картинку пустым узлом вот вопрос?
Ответить с цитированием
  #8 (permalink)  
Старый 25.07.2013, 21:14
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Исключить IMG, INPUT
<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
 
<body>
<div><div></div><div></div><div></div><div></div></div><input />
<script>
    alert('сейчас пустых элементов всего: ' + document.querySelectorAll('body :empty:not(img):not(input)').length);
 
    for(var elem; elem = document.querySelector('body :empty:not(img):not(input)'); ) {
        elem.parentNode.removeChild(elem);
    }
 
    alert('Осталось пустых элементов всего: ' + document.querySelectorAll('body :empty:not(img):not(input)').length);
</script>
 
</body>
 
</html>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #9 (permalink)  
Старый 25.07.2013, 23:16
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

рони,
devote,
можно удалить все узлы, но зачем?
или у вас спортивный интерес?)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удаление iframe, DOM Махач Events/DOM/Window 5 24.04.2012 16:56
удаление элемента dom Catherine Events/DOM/Window 0 28.10.2011 22:35
Удаление пустых текстовых нод работает только на верхнем уровне DOM exec Events/DOM/Window 13 20.09.2010 18:51
Удаление тега из DOM doniv jQuery 19 26.03.2010 12:10
удаление DOM элемента и перезагрузка страницы Andrey2005 Общие вопросы Javascript 3 12.10.2009 22:49