innerText | outerText | innerHTML | outerHTML

Полной загадкой для меня была эта абра-кадабра – “innerText | outerText | innerHTML | outerHTML” – решил в ней разобраться. Как бы ничего сложного, но нюансы, нюансы, которые и показывают, что на самом деле не понимаешь тему, а только думаешь, что понимаешь.

Часто для парсинга HTML страниц требуется вытащить что-нибудь этакое! И тут как всегда вариации – что использовать outerHTML или outerText, скажем, и в чем между ними разница? Итак, начнем с простого.

Пусть, скажем, у нас есть такая HTML конструкция

Для начала напишем на javascript несколько alert команд, которые покажут нам как работают innerText | outerText | innerHTML | outerHTML в браузерах.

А далее наступает самое интересное – результат начинает зависеть от браузера!!! И не только…

То есть, для Internet Explorer все отрабатывает идеально, а вот для FF Chrome первые 2 alert показывают undefined, оказывается там нет понятий innerText и outerText. Вместо них используются другие функции, но об этом позже. Отработаем полностью в IE и потом вернемся к браузерной совместимости.


 

Проверяем в Internet Explorer

 

21
22

 

23
24

Проверяем в FF

30

31

Как работают  innerText | outerText | innerHTML | outerHTML в InternetExplorer?

Почему опять же в IE? С одной стороны, потому что свойств innerText и outerText нет в FF, Chrome, возможно других браузерах. Во-вторых, потому что один из моих любимых инструментов программирования – Delphi RAD Studio. А парсинг страниц в Delphi осуществляется при помощи экземпляра Internet Explorer (TWebBrowser) и библиотеки MSHTML.


Как работает innerText?

Насколько видно из эксперимента выше, innerText выдергивает содержимое между тегами, то есть там может быть сколь угодно много уровней вложенности, в нашем случае 3 уровня – div div b – то есть 3 уровня.

А получаем мы в итоге

Everytime Jesus Loves

То есть, innerText выдергивает с каждого уровня то, что находится между тегами и склеивает это в строку!


Как работает outerText?

Делает тоже самое, что и в innerText, но разница в том, что если мы проведем обратную операцию – присваивание, то outerText заменит все, включая теги, а innerText заменит только то, что между тегами.

Для наглядной демонстрации изменим немного код – добавим желтый фон, и сначала попробуем сделать присваивание элементу test.innerText

 

 

До
25

После

26

 

Желтая полоса осталась, потому что код поменялся таким образом

До применения innerText

После применения innerText

А если применить outerText, то желтая полоса исчезнет, потому что замена идет полностью, вместе с тегами.

 

27

 

Итак, разница теперь понятна.

До применения outerText

После применения outerText


Как работает innerHTML?

Здесь все достаточно тривиально – innerHTML берет все то, что заключено между тегами. Для первого примера выше результат будет выглядеть так…

 

Как работает outerHTML?

OuterHTML берет все целиком. То есть сами теги плюс то, что между тегами. Для первого примера выше результат будет выглядеть так…

Совместимость с другими браузерами

Если мы пишем на javascript для FF или Chrome, то innerText или outerText ими не поддерживаются! Есть определенные аналоги…

outerText иногда можно заменить конструкцией

innerText можно условно заменить конструкцией

Все во многом зависит от задачи!

Как работают  innerText | outerText | innerHTML | outerHTML в Delphi?

Известно, что TWebbrowser использует IE при работе под Windows. Поэтому, в принципе функционал должен работать по аналогии. Проверим это!

29

 

Ниже коды 4 соответствующих кнопок…

 

 

by Stanislav_Panteleev