前端.H5.语义化标记&Selector API

最新推荐文章于 2022-11-08 17:42:53 发布

请叫我院士

最新推荐文章于 2022-11-08 17:42:53 发布

阅读量457

点赞数

分类专栏：前端文章标签： html 前端 web h5

本文链接：https://blog.csdn.net/qq_31515611/article/details/78587054

版权

本文介绍了HTML5中的语义化标记，如header、footer、section等，这些标记有助于提高代码的维护性和整洁度。此外，还详细讲解了Selector API，包括querySelector()和querySelectorAll()函数，它们用于高效地查找匹配CSS选择器的元素，优化了DOM遍历性能。

摘要由CSDN通过智能技术生成

一.语义化标记
《H5程序设计》里作者有一句话，即H5的宗旨之一就是“存在即合理”。由于旧版HTML代码中通用ID名称重复量极大，所以制定H5规定的大佬们干脆就将几个通用的ID直接语义化标记元素。即下面这几个

header ——标记顶部区域内容
footer ——标记底部区域的内容
section ——标记Web页面中的一块区域
article ——文章
aside ——先关引文
nav ——导航类辅助

这些语义化标记没有任何实际的属性值，但是这边便于代码的维护与提高整洁程度

二.Selector API

函数
querySelector()
querySelectorAll()

描述
根据制定的选择原则，返回在页面中找到的第一个匹配元素；
根据制定规则返回页面中所有相匹配的元素；

示例
document.querySelector(“.test”);
document.querySelectorAll(“.test”)

结果
返回第一个CSS类名为test的元素
返回所有CSS类名为test的元素

querySelectorAll()示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Query Selector All Test</title>
  <style type="text/css">
    td {
      border-style: solid;
      bo