[Powered by Google Translate] [DOM] [Tommy玛克威廉的] [哈佛大学] [这是CS50。] [CS50.TV] 在这段视频中，我们要看一看在DOM。 当浏览器下载一个网页，它需要在内存中表示不知何故。 文档对象模型DOM， 代表介绍了如何在浏览器内存中的网页。 在这段视频中，我们就来看看在DOM的JavaScript的背景下， 但DOM是一种与语言无关的概念。 例如，PHP有它自己的DOM实现。 然而，经常用来通过JavaScript DOM 因为JavaScript允许我们改变网页的内容上飞， 和DOM允许我们访问一个网页的部分。 让我们来看看一个例子网页。 好吧，现在让我们来看看这一页将在DOM表示。 每一棵树都需要有一个根节点在顶部。 此文档的HTML元素是根节点 因为它是出现的第一个元素。 让我们添加一个根节点到我们的树。 让我们再看看HTML文档。 注意身体标记是嵌套的HTML标签内。 这意味着，body元素是一个孩子的HTML元素。 我们可以代表这我们的DOM树中，通过身体的叶 降HTML。 让我们做到这一点。 我们有身体下面的HTML。 现在，我们可以看到该机构有2个孩子自身的， h1元素和ul元素。 这意味着我们可以将这些元素都 到body元素，让我们做到这一点。 我们有一个h1和UL。 最后，ul元素有3个孩子， 这将完成我们的DOM树，所以，让我们添加李丽，李。 这就完成了我们的DOM树，这是浏览器是如何存储你的网页。 现在，让我们来看看我们如何能够使用JavaScript遍历这棵树。 我们可以使用特殊的JavaScript变量称为文档访问此树。 此文件对象的一个​​属性 是身体属性，这个对象代表 在我们的例子中网页中的主体元素。 如果我们希望得到所有的孩子的身体元素， 如果你还记得的是，h1标签和UL标签， 我们可以说document.body.childNodes。 这会给我们双方h1元素的数组，包含 ul元素，因为他们是直接的孩子的身体。 如果我们想创建一个变量代表ul元素 我们可以说VRR UL =那么这段代码在这里， 现在，因为子节点是一个简单的数组 我们可以索引到它与[1]得到该数组的第二个元素。 有了这个新的UL对象，我们就可以访问不同的元素属性，如它的ID。 如果我们说ul.id将是相等的字符串列表 因为这是我们所拥有的，在我们的HTML页面。 我们还可以得到它的tagName，在这种情况下，将是 元素的类型，它是在这种情况下，微升。 我们还可以得到其父母或它上面的节点，在这种情况下， 将是身体的元素。 如果我们说。parentNode，那将是一样document.body的。 当然，这微升有其自己的孩子， 所以我们仍然可以说这个元素的子节点， 和现在应该有这个数组长度为3，因为在我们的名单中有3项。 最后，也许是最有用的属性是怎么回事。的innerHTML 这将是列表中的实际内容，这在我们的示例页面 是那些3华里标签。 当然，如果我们有一个大的文件，访问元素 以这种方式将是非常繁琐的，因为 最终我们将不得不说之类的东西document.body.childNodes 支架的东西。子节点支架别的东西， 它要得到真正麻烦。 而不是我们真正想要做的是能够查询文档， 所以就像我们的东西在互联网上使用搜索关键字 我们确实需要一些方式简明扼要地搜索这个文件 只拿回我们关心的元素，而无需遍历 整个树从上到下。 幸运的是，现代的浏览器允许我们这样做 具有特殊功能的称为querySelectorAll， 这个函数接受一个参数 这是一个CSS选择器，它会返回给我们 所有匹配的元素，选择。 这意味着你不需要学习一个全新的查询DOM语法。 相反，你可以运用所学知识，你已经知道了 关于CSS选择器。 让我们来看看一些例子查询文件。 如果我们说querySelectorAll，并通过这串＃富 那将会给我们的元素的ID富。 你也可以说的document.getElementById 并把它传递字符串foo，不包括hashtag。 你要去找回完全相同的对象。 相反，如果我们通过字符串。酒吧document.querySelectorAll的 我们要拿回所有的元素与类酒吧。 我们还可以结合CSS选择器。 如果我们通过字符串中的＃foo的IMG 要给我们所有的图像元素 儿童的元素的ID富。 正如你可以看到，通过组合选择器，我们有一些非常强大的搜索功能。 但引擎盖下，DOM是真的只是一棵树， 这些选择使我们能够抽象，客场在一定程度上 因为我们不总是关心DOM树的整个结构。 这是一个快速概述的DOM，并加入我们的感谢。 [CS50.TV]