何处使用script标签

  1. <head>标签里

    需要注意的是:浏览器是自上到下解析的。因此,如果涉及到包含获取页面元素的内容, 导致失败。解决方案如下:

    <script>
      // 表示HTML页面加载完毕后, 做什么
      window.onload = function () {
        // 所有的javascript代码编写在这里
      }
    </script>
  2. 写在<body>元素的最下方

    <body>
      <!-- 将<script>元素放置在相关HTML元素的后面, 或者<body>元素内的最后 -->
      <script></script>
    </body>

什么是DOM

DOM是个缩写,全称是 Document Object Model,被译为文档对象模型。

  • D表示Document,就是DOM将HTML页面解析为一个文档。同时提供了document对象。

  • O表示Object,就是DOM将HTML页面中每个元素解析为一个对象

  • M表示Model,就是DOM中表示各个对象之间的关系

DOM的作用

DOM被设计用于解析HTML页面文档,方便 Javascrip语言通过DOM访问和操作HTML页面中的内容。
DOM是由W3C组织定义标准规范,并且由各大浏览器厂商支持。严格意义上来讲,DOM并非属于JavaScript语言。
我们之所以可以在 Javascript语言中使用DOM,是因为各大浏览器将DOM的标准规范内容封装成了 Javascrip语言所支持的形式。
对DOM中的对象,我们只有调用的权限,没有修改的权限,也说明了这个问题。

浏览器加载并运行HTML页面后,会创建DOM结构。由于DOM中的内容被封装成了 JavaScript语言中的对象,所以我们可以使用 JavaScript语言通过DOM结构来访问和操作HTM页面中的内容

DOM树结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <h2>这是一个示例页面</h2>
    <p id="p" title="this is p.">这是一个段落内容。</p>
</body>

</html>

什么是节点

节点(Node)原本是网络术语,表示网络中的连接点。一个网络是由一些节点构成的集合。
在DOM树结构中,节点也是很重要的一个概念。简单来说,节点作为DOM树结构中的连接点,最终构成了完整的DOM树结构。

常量描述
Node.DOCUMENT_NODE9文档节点,表示整个HTML页面(相当于document对象)
Node.ELEMENT_NODE1元素节点,表示HTML页面中的标签(即HTML页面的结构)
Node.ATTRIBUTE_NODE2属性节点,表示HTML页面中的开始标签包含的属性。在DOM规范里Node接口将不再实现这个元素属性
Node.TEXT_NODE3文本节点,表示HTML页面中的标签所包含的文本内容

节点之间的关系

  • 父级与子级

    如果将HTML页面中某一个元素作为父级的话,那包含该元素内的第一层所有元素都可以称为该元素的子级。

  • 祖先与后代

    如果将HTML页面中某一个元素作为祖先的话,那包含在该元素内的所有元素(除子级之外)都可以称为该元素的后代。

  • 兄弟关系:具有相同父级元素的两个或几个元素之间就是兄弟。