Как мы можем преобразовать строку HTML в объект, используя JavaScript?

Question

Как мы можем преобразовать строку HTML в объект, используя JavaScript?

0

У меня есть строка Html:

<div id="foo">
    <h1 class="greeting">Hello World!</h1>
</div>

Мне нужно преобразовать эту строку html в Object в Javascript. т.е. я должен получить тот же результат объекта при использовании .children() в jquery.I пробовал что-то вроде этого:

a = '<div id="foo">
    <h1 class="greeting">Hello World!</h1>
</div>';
eval("{"+a+"}");
console.log(a);

Но это не сработало. Какой метод следует использовать в javascript для преобразования HTML-строки в нотацию Object. Я должен получить каждый дочерний узел в виде объекта. Я не хочу использовать JQuery в этом решении. Я ожидаю точный вывод, как показано на консоли

Ganesh Babu 15 апр. 2014, в 15:35

Источник

0

возможный дубликат
A4L 15 апр. 2014, в 13:09
0

@ A4L Ваша ссылка не имеет ответа, что я ожидал. Эта страница имеет неуместные ответы
Ganesh Babu 15 апр. 2014, в 13:11
1

Эта ссылка является ответом. У вас есть HTML-строка, которую нужно преобразовать в структуру DOM. У вас нет JSON.
Greg Burghardt 15 апр. 2014, в 13:12
0

Чего ты хочешь достичь?
Anoop 15 апр. 2014, в 13:13
0

Мне нужна HTML-строка для объекта для дальнейшего процесса
Ganesh Babu 15 апр. 2014, в 13:14
0

@ A4L Я ожидаю вывод, как показано в вопросе
Ganesh Babu 15 апр. 2014, в 13:19
0

@ Anoop Я ожидаю такой же вывод, как показано на рисунке
Ganesh Babu 15 апр. 2014, в 13:20
0

jQuery не делает элемент HTML объектом, как вы его объяснили. Конверсия не происходит. jQuery создает пользовательский объект jQuery с прототипом массива и пользовательским конструктором. Он хранит совпадающие ссылки на элементы как объекты HTMLElement в своем объекте массива (тот же тип объекта, возвращаемый getElementById и тому подобное). Затем jQuery добавляет гораздо больше настраиваемых свойств к объекту jQuery, таких как selector, previousObjecty, etc.. По сути, если вы хотите реплицировать jQuery, вы должны сделать это подобно var x = []; x.push(getElementById('foo')) или аналогичный.
Nope 15 апр. 2014, в 13:36
0

@ FrançoisWahl В Jquery метод .children () преобразует элементы HTML в объект. Я получил вывод на изображение только с помощью .children (). Теперь я не могу использовать Jquery.
Ganesh Babu 15 апр. 2014, в 13:38
0

@Ganesh: $('..').children() Children $('..').children() дает вам массив jQuery с дочерними элементами внутри него. Эти дети по-прежнему HTMLElements. Они не были обращены. $('..').children()[0] возвращает ссылку на фактический HTMLElement в массиве jQuery, поэтому $('..').children()[0] instanceof HTMLElement приводит к $('..').children()[0] instanceof HTMLElement true . Конечно, если вы делаете $('..').children().eq(0) вы получаете упакованную версию jQuery. Вы можете смоделировать все это, просто создав собственный массив и HTMLElement в него ссылки HTMLElement и добавив в него любые пользовательские помощники, которые продолжают возвращать вам пользовательский объект.
Nope 15 апр. 2014, в 13:51

Показать ещё 8 комментариев

Теги:

javascript

html

object

3 ответа

Ещё вопросы

@ A4L Ваша ссылка не имеет ответа, что я ожидал. Эта страница имеет неуместные ответы
Эта ссылка является ответом. У вас есть HTML-строка, которую нужно преобразовать в структуру DOM. У вас нет JSON.
Мне нужна HTML-строка для объекта для дальнейшего процесса
@ A4L Я ожидаю вывод, как показано в вопросе
@ Anoop Я ожидаю такой же вывод, как показано на рисунке
jQuery не делает элемент HTML объектом, как вы его объяснили. Конверсия не происходит. jQuery создает пользовательский объект jQuery с прототипом массива и пользовательским конструктором. Он хранит совпадающие ссылки на элементы как объекты HTMLElement в своем объекте массива (тот же тип объекта, возвращаемый getElementById и тому подобное). Затем jQuery добавляет гораздо больше настраиваемых свойств к объекту jQuery, таких как selector, previousObjecty, etc.. По сути, если вы хотите реплицировать jQuery, вы должны сделать это подобно var x = []; x.push(getElementById('foo')) или аналогичный.
@ FrançoisWahl В Jquery метод .children () преобразует элементы HTML в объект. Я получил вывод на изображение только с помощью .children (). Теперь я не могу использовать Jquery.
@Ganesh: $('..').children() Children $('..').children() дает вам массив jQuery с дочерними элементами внутри него. Эти дети по-прежнему HTMLElements. Они не были обращены. $('..').children()[0] возвращает ссылку на фактический HTMLElement в массиве jQuery, поэтому $('..').children()[0] instanceof HTMLElement приводит к $('..').children()[0] instanceof HTMLElement true . Конечно, если вы делаете $('..').children().eq(0) вы получаете упакованную версию jQuery. Вы можете смоделировать все это, просто создав собственный массив и HTMLElement в него ссылки HTMLElement и добавив в него любые пользовательские помощники, которые продолжают возвращать вам пользовательский объект.

Anoop · Answer 1 · 2014-04-15T11-11-00.000Z

На изображении это объект jQuery, который вы можете создать с помощью следующего кода

var a = '<div id="foo">\
    <h1 class="greeting">Hello World!</h1>\
</div>';
var aDom = jQuery(a);
console.log(aDom );

Чистый JavaScript: jsfiddle

var e = document.createElement("div");
e.id = "foo";
e.innerHTML = '<h1 class="greeting">Hello World!</h1>';

console.log(e);

Спасибо, мне нужно добиться того же результата, используя Javascript. Я не хочу использовать какую-либо библиотеку jquery
@Ganesh но в изображении это объект jQuery
Я знал это. Мне нужно, чтобы получить тот же объект, используя Javascript. Какой метод я должен использовать вместо .children () для достижения этого результата.
+1 Красиво и просто. Здесь я думал, что OP хотел сложную оболочку для всего этого, например jQuery, без использования jQuery. Отлично сработано.

Dmitry Malinovsky · Answer 2 · 2014-04-15T10-20-00.000Z

отредактированный

var a = '<div id="test"></div>';

var htmlObject = document.createElement('div');

htmlObject.innerHTML = a;

htmlObject.getElementById("test") = data;

Asik · Answer 3 · 2014-04-15T10-18-00.000Z

Вы хотите, как это

<script>
var htmlStrObj = {};
htmlStrObj.container = '<div id="foo"><h1 class="greeting">Hello World!</h1></div>';
console.log(htmlStrObj);
</script>