[Powered by Google Translate] [DOM]
[Томі Мак-Вільямс] [Гарвардскі універсітэт]
[Гэта CS50.] [CS50.TV]
У гэтым відэа мы збіраемся зірнуць на DOM.
Калі браўзэр загружае вэб-старонкі, яна павінна быць прадстаўлена ў памяці як-то.
Аб'ектную мадэль дакумента DOM ці,
апісвае, як браўзэр уяўляе сабой вэб-старонкі ў памяці.
У гэтым відэа мы паглядзім на DOM ў кантэксце JavaScript,
DOM, але з'яўляецца незалежным ад мовы паняцце.
Напрыклад, PHP мае сваю ўласную рэалізацыю DOM, а таксама.
Тым не менш, DOM часта выкарыстоўваюцца JavaScript
Так як JavaScript дазваляе нам змяняць змесціва вэб-старонкі на ляту,
DOM і дазваляе нам атрымаць доступ да часткі вэб-старонак.
Давайце паглядзім на прыкладзе вэб-старонкі.
Добра, зараз давайце паглядзім, як гэтая старонка будзе прадстаўлена ў DOM.
І кожнае дрэва павінна мець каранёвай вузел у верхняй часткі.
У рамках гэтага дакумента, элемент HTML з'яўляецца каранёвым вузлом
, Таму што гэта першы элемент, які з'яўляецца.
Давайце дадамо каранёвай вузел нашага дрэва.
Давайце зірнем на HTML дакумент яшчэ раз.
Звярніце ўвагу, што цела тэг ўкладзены ўнутры тэгаў HTML.
Гэта азначае, што цела элемент з'яўляецца даччыным элементам HTML.
Мы можам прадставіць гэта ў нашай DOM дрэва, робячы цела ліста
што сыходзіў з HTML.
Давайце зробім гэта.
У нас ёсць цела пад HTML.
Цяпер мы бачым, што цела мае 2 дзяцей сваіх,
элемента h1 і вул элемента.
Гэта азначае, што мы можам злучыць абодва гэтыя элементы
да цела элементаў, так што давайце рабіць гэта.
У нас ёсць h1 і вул.
Нарэшце, вул элемент мае яшчэ 3 дзяцей,
і гэта будзе запоўніце DOM дрэва, так што давайце дадамо Лі, Лі, Лі.
На гэтым мы завяршаем DOM дрэва, і гэта, як браўзэр захоўвае сваю старонку.
Зараз давайце паглядзім, як мы можам прайсці гэтую дрэва з дапамогай JavaScript.
Мы можам атрымаць доступ гэтага дрэва з дапамогай адмысловай зменнай JavaScript называецца дакументам.
Адным з уласцівасцяў гэтага аб'екта дакумента
з'яўляецца органам уласнасці і ўяўляе дадзены аб'ект
элемент цела ў нашым прыкладзе вэб-старонкі.
Калі б мы хацелі, каб усе дзеці элемента цела,
які, калі вы памятаеце, што тэг h1 і вул тэг,
мы можам сказаць, document.body.childNodes.
І гэта верне нам масіў, які змяшчае абодва элемента h1
і вул элемента, так як яны абодва прамымі нашчадкамі цела.
Калі б мы хацелі стварыць зменную прадстаўляюць вул элемент
мы можам сказаць, вул VRR =, то гэты код тут,
і зараз, таму што ChildNodes гэта проста масіў
мы можам индексируем яго з [1], каб атрымаць другі элемент гэтага масіва.
З дапамогай гэтага новага аб'екта уль можна атрымаць доступ да розных ўласцівасці элемента, як і яго ідэнтыфікатар.
Калі мы кажам, што ul.id будзе роўная радку спісу
таму што гэта тое, што мы маем у нашай HTML старонкі.
Мы таксама можам атрымаць яе тэг які ў гэтым выпадку будзе
які элемент ён ёсць, у гэтым выпадку, вул.
Мы таксама можам атрымаць яго бацькоў або вузла вышэй за сябе, якое ў дадзеным выпадку
будзе цела элемента.
Калі мы гаворым. ParentNode, што гэта будзе такі ж, як document.body.
Вядома, гэтая вуліца мае дзяцей сваіх,
так што мы можам яшчэ сказаць. ChildNodes на гэтым элеменце,
і гэтага масіва павінны зараз мець даўжыню 3, таму што ёсць 3 пункта ў нашым спісе.
І, нарэшце, бадай, самае карыснае ўласцівасць будзе. Innerhtml,
і гэта будзе фактычнае змесціва спісу, які ў нашым прыкладзе старонкі
былі тыя 3 Li тэгі.
Вядома, калі ў нас ёсць вялікі дакумент, доступ да элементаў
такім спосабам, будзе вельмі складана, бо
у рэшце рэшт нам прыйдзецца гаварыць пра рэчы, як document.body.childNodes
Кранштэйн нешта. ChildNodes кранштэйны нешта яшчэ,
і ён збіраецца атрымаць сапраўды грувастка.
Замест таго, што мы сапраўды хочам зрабіць, гэта мець магчымасць запыту дакумента,
гэтак жа, як мы шукалі рэчы ў Інтэрнэце з дапамогай ключавых слоў
мы сапраўды маем патрэбу ў некаторых спосаб пошуку гэтага дакумента коратка
вярнуцца толькі тыя элементы, мы клапоцімся пра без перасячэння
Увесь верхні дрэва ўніз.
На шчасце, сучасныя браўзэры дазваляюць нам гэта зрабіць
са спецыяльнай функцыяй завецца querySelectorAll,
і гэтая функцыя прымае адзін аргумент
гэта значыць CSS селектар, і ён збіраецца вярнуцца да нас
ўсе элементы, якія адпавядаюць гэтаму селектары.
Гэта азначае, што вам не трэба вучыцца зусім новы сінтаксіс для запытаў DOM.
Замест гэтага вы можаце ўжыць веды, вы ўжо ведаеце,
о CSS селектары.
Давайце зірнем на некаторыя прыклады запытаў да дакумента.
Калі мы кажам, querySelectorAll і перадаць яго гэтай радком # Foo
што адбываецца, каб вярнуць нам элемент з ID Foo.
Можна таксама сказаць, document.getElementById
і перадаць яго радок Foo без гэтага хэштэг.
Вы збіраецеся вярнуцца сапраўды такі ж аб'ект.
Калі замест гэтага мы перадаем радок. Бара document.querySelectorAll
мы збіраемся вярнуць усе элементы з класам бар.
Мы таксама можам аб'яднаць CSS селектары.
Калі мы перададзім у радку # Foo IMG
што адбываецца, каб вярнуць нам усё элементы малюнка
, Якія з'яўляюцца нашчадкамі элемента з ID Foo.
Як вы можаце бачыць, шляхам аб'яднання селектараў у нас ёсць некаторыя вельмі магутныя магчымасці пошуку.
Але пад капотам, DOM на самай справе проста дрэва,
і гэтыя селектары дазваляюць нам, што ад абстрактных да некаторай ступені
таму што мы не заўсёды клапоцімся аб усёй структуры дрэва DOM.
Гэта быў кароткі агляд таго, DOM, і дзякуй за далучэнне да нас.
[CS50.TV]