HTML，DOM 和 CSS
在元素定位之前，我们需要先打好基础。让我们来谈谈 HTML、DOM 和 CSS。HTML 是一种用于创建 Web 页面的标记语言，它描述了页面的结构和内容。而 DOM（文档对象模型）是一种将 HTML 文档表示为对象的方式，使得开发人员可以轻松地访问和操作页面的元素。最后，CSS（层叠样式表）则用于定义页面的外观和样式。
深入了解 HTML、DOM 和 CSS 对于浏览器自动化来说至关重要。通过了解这些技术，我们可以更好地理解页面的结构和元素的属性，从而更轻松地使用 Playwright 来进行自动化操作。
HTML
HTML是一种用于描述网页结构的语言，它由一系列的元素组成，每个元素都有自己的标签和属性。我们将使用这些标签或属性来定位元素。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 。
HTML 标签通常是成对出现的，比如 和 。
标签对中的第一个标签是开始标签，第二个标签是结束标签。
开始和结束标签也被称为开放标签和闭合标签。
HTML 属性
属性是 HTML 元素提供的附加信息。
HTML 元素可以设置属性。
属性可以在元素中添加附加信息。
属性一般描述于开始标签。
属性总是以名称/值对的形式出现，比如：href=“https://www.baidu.com”。
id 和 name 属性是大部分标签都有的属性，描述的是当前标签的名称，不同的是 id 不允许重复，name 可以重复。
属性值应该始终被包括在引号内，双引号是最常用的，不过使用单引号也没有问题。
属性和属性值对大小写不敏感，不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
在HTML中有很多种元素类型，我们先了解一些常用的元素类型。
文本元素用于显示文本，最常见的文本元素是 p 元素，表示一个段落。此外，span元素帮助对段落中的部分文本进行样式设置。同时，label元素用于表示表单中的标签，可以将文本和输入框关联起来。
输入元素用于接收用户输入，最常见的输入元素是 input 元素，它可以接收文本、数字、密码、日期、时间、颜色等等，具体取决于type的值。例如，下面这个输入框接收文本：
我们还有用于下拉列表的 select 元素和表示下拉列表项的 option 元素。同时，a 元素也被称为链接，它的设计目的是把你带到另一个页面，但现在也常用于触发页面内的操作。
每个元素都有自己的属性，例如百度首页的搜索按钮对应的代码如下：
这段代码中，input 标签中包含了type、id、value和class属性的定义。其中，type属性定义了输入元素的类型，id属性定义了输入元素的唯一标识，value属性定义了输入元素的值，class属性定义了输入元素的样式类。
DOM
DOM，全称“DocumentObjectModel（文档对象模型）”，它是由W3C组织定义的一个标准。
在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。
说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。这下大家就懂了吧。记住，DOM就是文档对象模型，文档对象模型就是DOM，很多人在学习DOM的时候看到“文档对象模型”还不知道是什么？
二、DOM结构
DOM采用树形结构作为分层结构，以树节点形式表示页面中各种元素或内容。
举例：
<html>
<head>
<title><title>
<body>
<h1>php中文网</h1>
<p>php中文网成立.....</p>
</body>
</html>
在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。（这句话对理解DOM操作太重要了）。
下面我们介绍几个关于节点的概念。
1、根节点
在HTML文档中，html就是根节点。
2、父节点
一个节点之上的节点就是该节点的父节点，例如h1的父节点就是body，body的父节点就是html。
3、子节点
一个节点之下的节点就是该节点的子节点，例如h1就是body的子节点。
4、兄弟节点
如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。
例如h1和p就是兄弟节点，因为他们拥有相同的父节点body。
CSS 选择器
CSS 选择器是一种用于从 HTML 文档中查找特定元素的规则。在 Playwright 中，我们可以使用这些选择器来查找元素并与之交互。
除了 id 选择器外，还有许多其他的选择器。例如，元素选择器，如 h1,p,a,span 等等，可以用来选择特定类型的元素。类选择器，如 .s_btn，可以用于选择具有特定类名的元素。属性选择器，如 [type=“text”]，则可以选择具有特定属性及其值的元素。
一个选择器也可以与其他选择器组合使用，以便更准确地选择元素。例如，input[type=“text”].s_ipt 可以同时选择具有 type 属性值为 text 且 class 属性包含 .s_ipt 的元素。
掌握这些选择器的知识，可以让我们在 Playwright 中更轻松地定位和交互特定的元素。
494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
