[Powered by Google Translate] [DOM] [Tommy MacWilliams] [Harvard University] [Това е CS50.] [CS50.TV] В това видео ние ще разгледаме на DOM. Когато един браузър изтегля дадена уеб страница, трябва да бъдат представени в паметта по някакъв начин. Образецът на документа обект или DOM, описва как браузърът представлява уеб страница в паметта. В това видео, ние ще се погледнете в DOM в контекста на JavaScript, но DOM е език-независима концепция. Например, PHP има своя собствена изпълнение ДОМ, както добре. Въпреки това, ДОМ често се използва от JavaScript тъй JavaScript ни позволява да променят съдържанието на уеб страница, в движение, и DOM ни дава възможност за достъп до части от дадена уеб страница. Нека да разгледаме един пример уеб страница. Добре, сега нека да видим как тази страница ще бъде представена в DOM. И всяко дърво трябва да има корен възел на върха. За този документ елемент HTML е коренът защото това е първият елемент, който се появява. Да добавим възел корен на нашето дърво. Нека да погледнем в HTML документа отново. Забележете, че тялото маркер е вложен вътре на HTML тагове. Това означава, че тялото елемент е дете на HTML елемент. Ние може да представлява това в DOM нашето дърво от орган за вземане на едно листо слиза от HTML. Да го направим. Имаме тяло под HTML. Сега можем да видим, че тялото има две деца от себе си, на h1 елемент и ул. елемент. Това означава, че може да се свърже и двете от тези елементи към тялото елемент, така че нека да направим това. Имаме h1 и ул. Ген. Накрая, ул. елемент има още 3 деца, и това ще завършим DOM дървото, така че нека добави Ли, Ли, Ли. С това приключва нашата DOM дървото, и това е начина, по който браузърът е съхраняване на вашата уеб страница. Сега нека да разгледаме как можем да преминават това дърво използва JavaScript. Ние може да получите достъп до това дърво с помощта на специална променлива JavaScript наречен документ. Един собственост на този документ обект е органът собственост, и този обект представлява организма елемент в нашия пример сайт. Ако искахме да получите всички деца на тялото елемент, която, ако си спомняте, е, че h1 таг и ул. етикет, можем да кажем, document.body.childNodes. И това ще ни върне масив, съдържащ както h1 елемент и ул. елемент, тъй като и двамата са преки деца на тялото. Ако искахме да се създаде променлива представляваща ул. елемент можем да кажем, VRR ул. = тогава този код тук, и сега, защото childNodes е просто масив ние може да индексира в него с [1], за да получите втори елемент на този масив. С този нов обект ул. можем да осъществите достъп до различни свойства на елемент като си ID. Ако кажем, че ul.id ще бъде равна на низ списък защото това е, което имаме в HTML нашата страница. Можем също така да получите своята име на маркер, който в този случай ще бъде какъв тип елемент е, в този случай, Ул. Можем също да си родител или на възела над него, който в този случай ще бъде елемент тялото. Ако кажем. ParentNode, че ще бъде същото като document.body. Разбира се, това е ул. децата на себе си, така че ние все още може да се каже. childNodes на този елемент, и този масив вече трябва да имат дължина 3, защото има три позиции в нашия списък. И накрая, може би най-полезно свойство ще бъде. InnerHTML, и това ще бъде действителното съдържание на списъка, което в нашия пример страница бяха тези три пасиви тагове. Разбира се, ако ние имаме голям документ, достъп до елементи по този начин ще бъде наистина тежък, защото в крайна сметка ще трябва да казват неща като document.body.childNodes скоба нещо. childNodes скоба нещо друго, и тя ще стане наистина тежък. Вместо това, което наистина искам да направя е да може да задава въпроси към документ, така че просто искал да търси неща в интернет с помощта на ключови думи ние наистина се нуждаят от начин за търсене този документ да накратко се върна само елементите, за които се грижим за без преминаващи цялата горна дърво до долу. За щастие, модерни браузъри ни позволи да направите това със специална функция, наречена querySelectorAll, и тази функция може да отнеме един аргумент че е CSS селектор, и че ще се връщат при нас на всички елементи, които съответстват на тази за избор. Това означава, че не трябва да се научат един нов синтаксис за заявки на DOM. Вместо това можете да приложите знанията, които вече знаят за селектори CSS. Нека да разгледаме някои примери за заявки документа. Ако кажем, querySelectorAll и преминават го този низ # Foo че ще ни върне елемента с ID Foo. Можете също така да се каже document.getElementById и да го давате на низ Foo без тази hashtag. Ще се върна точно същата обект. Ако вместо да се минава на низ. Греда document.querySelectorAll ние ще се върнем всички елементи с класа бар. Можем също така да комбинирате CSS селектори. Ако премине в низ # Foo IMG че ще ни върне всички графични елементи , че са деца на елемента с ID Foo. Както можете да видите, чрез комбиниране на селектори имаме някои много мощни възможности за търсене. Но под капака, на DOM наистина е само едно дърво, и тези селектори ни позволи да абстрактни, че далеч в известна степен защото ние не винаги се грижим за цялата структура на дървото DOM. Това беше един бърз преглед на DOM, и благодаря за присъедини към нас. [CS50.TV]