Для чего нужно дерево DOM в js и зачем с ним взаимодействовать?

Пшта ДОМ это иерархия элементов браузера, и ЯС как язык клиентский обязан с ним взаимодействовать

Взаимодействовать с DOM нужно чтобы динамически модифицировать страницы. Например выпадающее меню - класссический пример взаимодействия с DOM)

Страница это документ у него есть свойство боди. В коротком все элементы располагаются меняешь свойство меняется страница свойств на самом деле много плюс есть методы для поиска элементов просмотра дочерних и родительских элементов все это называется DOM

да впринципе нидлячего, низачем и вообще не обязательно, вот только если у вас проблемы с определением цели когда она уже задана, то голый js вам и подавно будет не нужен/понятен.

DO(O)M - это древо/список/коллекция элементов (зачастую неоднородная куча состоящая из субстанций разной крутости и срока давности), в котором вам покажут контентик странички.
Но надо как-то этим зоопарком уметь управлять и соскребать с него натыки да анализы хомяков + показывать ему что его тыки очень важны (т. е. реагировать на них). И вот для этих целей взяли js и наделили его сиими способностями - обращаться к этому DOM и творить с ним процесс препарации пользователя и ещё большего одефекацирования странички. Обычно это припрявляют смачной подливой из CSS.
А все вместе - web-разработка - bon appetit

P.S. не весь и не везде web-dev паршивый

DOM это дерево html элементов. Взаимодействовать с ними надо, чтобы менять свойства (классы, стили), назначать слушатели, добавлять, удалять и тд.