search

博客列表 >HTML 文档结构、三大通用选择器，JavaScript 获取元素

HTML 文档结构、三大通用选择器，JavaScript 获取元素

无人问津的博客
无人问津的博客原创
2020年06月21日 08:31:491897浏览

一、 HTML 文档结构

基本结构列举

标签 说明
<!DOCTYPE> 文档类型声明
<html> 根元素
<head> 头元素
<meta> 元数据
<title> 当前页面标题
<body> 主体元素

<DOCTYPE>

<!DOCTYPE> 声明必须是在文档中的最前面的位置，处于 <html>标签之前。
<!DOCTYPE>不是 HTML 标签。它为浏览器提供一项信息（声明），即是用哪个 HTML 版本进行编写的指令。如<!DOCTYPE html>是 html5 标准网页声明，支持 html5 的主流浏览器都认识这个声明，表示该网页采用 html5。
注：<!DOCTYPE>声明没有结束标签，且对大小写不敏感。

<html>

<html>元素可告知浏览器其自身是一个 HTML 文档。
<html>与</html>标签限定了文档的开始点和结束点；html 是双标签。
注：即使html元素是文档的根元素，但他不包含DOCTYPE元素,DOCTYPE元素必须位于 html 元素之前。

<head>

<head>标签用于定义文档的头部，他是所有头元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题，在 web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正的作为内容显示给读者。head 是双标签
注：应该把<head>标签放在文档的开始处，紧跟在<html>后面，并处于<body>标签之前。

<meta>

<meta>元素提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。
注：在html中，<meta>标签没有结束标签，<meta>标签永远位于head头元素内部。

<title>

<title>元素可定义当前文档的标题。title 是双标签
注：<title>标签是<head>标签中唯一要求包含的元素。

<body>

body元素定义文档的主体
body元素包含文档的所有内容（比如：文本、超链接、图片、表格和列表等等）

整合示例（一个简单的 html5 基本结构）

  1. <!-- 文档类型声明 html5 -->
  2. <!DOCTYPE html>
  3. <!-- html 根元素 -->
  4. <html lang="en">
  5.   <!-- head 头元素 -->
  6.   <head>
  7.     <!-- meta 元数据  -->
  8.     <meta charset="UTF-8" />
  9.     <!-- title 当前页面标题 -->
  10.     <title>html文档结构</title>
  11.   </head>
  12.   <!-- body 主体元素 -->
  13.   <body>
  14.     html文档内容...
  15.   </body>
  16. </html>

效果如下

html5基本结构

所列举的标签为基础标签，更多标签请自行查阅

二、 HTML 三大通用属性

id 属性

  • id 一般用于页面中唯一的一个元素,可以通过 css 或 javascript 来获取页面中的唯一的元素。

    注：id 是由用户来保证它在当前页面的唯一性，浏览器并不做检查；如果没有保证 id 的唯一性，则 JavaScript 脚本通过 ID 获取到元素只能获取到第一个 id 元素。

  • 简单示例

  1. <!-- 文档类型声明 html5 -->
  2. <!DOCTYPE html>
  3. <!-- html 根元素 -->
  4. <html lang="en">
  5.   <!-- head 头元素 -->
  6.   <head>
  7.     <!-- meta 元数据  -->
  8.     <meta charset="UTF-8" />
  9.     <!-- title 当前页面标题 -->
  10.     <title>id属性</title>
  11.     <!-- 内部样式表 -->
  12.     <style>
  13.       /* id选择器 */
  14.       #div_id {
  15.         /* 设置字体的颜色为红色 */
  16.         color: #f00;
  17.       }
  18.     </style>
  19.   </head>
  20.   <!-- body 主体元素 -->
  21.   <body>
  22.     <div id="div_id">
  23.       ###...
  24.     </div>
  25.   </body>
  26. </html>

  • 效果如下

id属性

class 属性

  • class 一般用于多个具有共同特征的元素

  • 简单示例

  1. <!-- 文档类型声明 html5 -->
  2. <!DOCTYPE html>
  3. <!-- html 根元素 -->
  4. <html lang="en">
  5.   <!-- head 头元素 -->
  6.   <head>
  7.     <!-- meta 元数据  -->
  8.     <meta charset="UTF-8" />
  9.     <!-- title 当前页面标题 -->
  10.     <title>class属性</title>
  11.     <!-- 内部样式表 -->
  12.     <style>
  13.       /* class选择器 */
  14.       .div_class {
  15.         /* 设置字体的颜色为蓝色 */
  16.         color: #00f;
  17.       }
  18.     </style>
  19.   </head>
  20.   <!-- body 主体元素 -->
  21.   <body>
  22.     <div class="div_class">
  23.       ###...
  24.     </div>
  25.     <div class="div_class">
  26.       ***...
  27.     </div>
  28.   </body>
  29. </html>

  • 效果如下

class属性

style 属性

  • style 一般用于设置当前元素对象的样式

  • 简单示例

  1. <!-- 文档类型声明 html5 -->
  2. <!DOCTYPE html>
  3. <!-- html 根元素 -->
  4. <html lang="en">
  5.   <!-- head 头元素 -->
  6.   <head>
  7.     <!-- meta 元数据  -->
  8.     <meta charset="UTF-8" />
  9.     <!-- title 当前页面标题 -->
  10.     <title>style属性</title>
  11.   </head>
  12.   <!-- body 主体元素 -->
  13.   <body>
  14.     <!-- style设置字体的颜色为绿色 -->
  15.     <div style="color: #0f0;">
  16.       ###...
  17.     </div>
  18.   </body>
  19. </html>

  • 效果如下

style属性

优先级说明

  • 综合示例

  1. <!-- 文档类型声明 html5 -->
  2. <!DOCTYPE html>
  3. <!-- html 根元素 -->
  4. <html lang="en">
  5.   <!-- head 头元素 -->
  6.   <head>
  7.     <!-- meta 元数据  -->
  8.     <meta charset="UTF-8" />
  9.     <!-- title 当前页面标题 -->
  10.     <title>HTML三大属性综合示例</title>
  11.     <!-- 内部样式表 -->
  12.     <style>
  13.       /* id选择器 */
  14.       #div_id {
  15.         /* 设置字体的颜色为红色 */
  16.         color: #f00;
  17.       }
  18.       /* class选择器 */
  19.       .div_class {
  20.         /* 设置字体的颜色为蓝色 */
  21.         color: #00f;
  22.       }
  23.     </style>
  24.   </head>
  25.   <!-- body 主体元素 -->
  26.   <body>
  27.     <div class="div_class" id="div_id">
  28.       &&&...
  29.     </div>
  30.     <!-- style设置字体的颜色为绿色 -->
  31.     <div id="div_id" style="color: #0f0;">
  32.       ###...
  33.     </div>
  34.   </body>
  35. </html>

  • 效果如下

HTML三大属性综合示例

  • 结论

    通过这个综合示例，我们可以得出以下结论:

    style > id > class

三、 JavaScript 获取元素

JavaScript 获取 html 相关内容

指令 说明
window 全局 window
document 当前的 html 文档
document.doctype 当前文档声明
document.documentElement 根元素 html
document.head 头元素
document.body 主体元素
document.URL 当前 url
document.charset 当前文档编码
document.title 当前文档标题
document.styleSheets 样式表 css 集合
document.scripts 客户端脚本集合
document.currentScript 当前执行的脚本

  • 代码示例

  1. <!-- 文档类型声明 html5 -->
  2. <!DOCTYPE html>
  3. <!-- html 根元素 -->
  4. <html lang="en">
  5.   <!-- head 头元素 -->
  6.   <head>
  7.     <!-- meta 元数据  -->
  8.     <meta charset="UTF-8" />
  9.     <!-- title 当前页面标题 -->
  10.     <title>JavaScript 获取 html 相关内容</title>
  11.   </head>
  12.   <!-- body 主体元素 -->
  13.   <body>
  14.     <!-- javascript脚本 -->
  15.     <script>
  16.       //   console.log();
  17.       // 指令将代码执行结果发送到浏览器控制台显示
  18.       //   全局 window
  19.       console.log(window);
  20.       //   当前的 html 文档
  21.       console.log(document);
  22.       //   当前文档声明
  23.       console.log(document.doctype);
  24.       //   根元素 html
  25.       console.log(document.documentElement);
  26.       // 头元素
  27.       console.log(document.head);
  28.       //   主体元素
  29.       console.log(document.body);
  30.       //   当前 url
  31.       console.log(document.URL);
  32.       //   当前文档编码
  33.       console.log(document.charset);
  34.       //   当前文档标题
  35.       console.log(document.title);
  36.       //   样式表 css 集合
  37.       console.log(document.styleSheets);
  38.       //   客户端脚本集合
  39.       console.log(document.scripts);
  40.       //   当前执行的脚本
  41.       console.log(document.currentScript);
  42.     </script>
  43.   </body>
  44. </html>

  • 效果如下

JavaScript 获取 html 相关内容

JavaScript 通过属性获取元素

指令 说明
document.getElementById() 通过 ID 查找元素
document.getElementsByClassName() 通过类名（class）查找元素集合
document.getElementsByTagName() 通过标签名查找元素集合
document.querySelector() 通过 css 选择器查找第一个元素
document.querySelectorAll() 通过 css 选择器查找元素集合

  • 综合示例

  1. <!-- 文档类型声明 html5 -->
  2. <!DOCTYPE html>
  3. <!-- html 根元素 -->
  4. <html lang="en">
  5.   <!-- head 头元素 -->
  6.   <head>
  7.     <!-- meta 元数据  -->
  8.     <meta charset="UTF-8" />
  9.     <!-- title 当前页面标题 -->
  10.     <title>JavaScript 通过属性获取元素</title>
  11.   </head>
  12.   <!-- body 主体元素 -->
  13.   <body>
  14.     <div id="div_id">
  15.       ID元素
  16.     </div>
  17.     <div class="div_class">
  18.       Class元素
  19.     </div>
  20.     <div>
  21.       TagName元素
  22.     </div>
  23.     <!-- javascript脚本 -->
  24.     <script>
  25.       // 通过id获取元素
  26.       const id_el = document.getElementById("div_id");
  27.       console.log("获取到的id元素");
  28.       console.log(id_el);
  29.       // 通过class获取元素集合
  30.       const class_els = document.getElementsByClassName("div_class");
  31.       console.log("获取到的class元素集合");
  32.       console.log(class_els);
  33.       // 通过tagname获取元素集合
  34.       const tag_els = document.getElementsByTagName("div");
  35.       console.log("获取到的tagname元素集合");
  36.       console.log(tag_els);
  37.       // 通过css选择器获取第一个元素（这里用标签选择器做示例）
  38.       const el = document.querySelector("div");
  39.       console.log("通过标签标签选择器获取到的第一个元素");
  40.       console.log(el);
  41.       //通过css选择器获取元素集合（这里用标签选择器做示例）
  42.       const els = document.querySelectorAll("div");
  43.       console.log("通过标签标签选择器获取到的元素集合");
  44.       console.log(els);
  45.     </script>
  46.   </body>
  47. </html>

  • 效果如下

JavaScript 通过属性获取元素

小结

  • 在样式表中使用 id属性需要在 id 名称前面加# （如 id 名为div_id，则需要写成#div_id）; 使用 class属性需要在 class 名称前面加.（如 class 名为div_class，则需要写成.div_class）。

  • 使用 js 通过属性获取元素，都只需要写名称即可，需用单引号或双引号包裹。
    如：通过 id 获取元素，id 名为div_id,则指令为
    document.getElementById('div_id') 或
    document.getElementById("div_id")

  • js 通过 css 选择器document.querySelector()获取元素时，如果该 css 选择器在页面中不止一个元素，则只返回第一个元素。

上一条：第三课 关于a标签及JS事件的理解！下一条：CSS 选择器、伪类与伪元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多