网页基础（二）结构 day4
文章目录
一、 节点树及节点间的关系
1.DOM 定义： 模板是也
DOM 是 W3C （万维网联盟）的标准，其英文全称 Document Object Model ， 即文档对象模型。 它定义了访问 HTML 和 XML 文档的标准：
W3C 文档对象模型（ DOM ）是中立于平台和语言的接口 ，它允许程序和脚本动态地访 问和更新文档的内容、结构和样式。 例如JavaScript动态更新HTML。
2 W3CDOM标准被分为 3 个不同的部分。
（1）核心 DOM ：针对任何结构化文档的标准模型。
（2） XML DOM ： 针对 XML 文挡的标准模型。
（3） HTML DOM ： 针对 HTML 文档的标准模型。
3 HTML 文档的所有内容都是节点。
- 口 整个文档是一个文档节点。
- 口 每个 HTML 元素是元素节点。
- 口 HTML 元素内的文本是文本节点。
- 口 每个 HTML 属性是属性节点。
- 口 注释是注释节点。
4 节点树
HTML DOM 将 HTML 文档视作树结构，这种结构被称为节点树
通过 HTMLDOM，树中的所有节点均可通过 JavaScript访问，所有 HTML 节点元素均可被修改， 也可以被创建或删除。
二、CSS选择器
1.作用
定位节点 ，根据不同的节点设置不同的样式规则
2.选择方法
(1）id
div 节点的 id 为 container，那么就 可以表示为＃container，其中＃开头代表选择 id ，其后紧跟 id 的名称。
(2)class
如果我们想选择 class 为 wrapper 的节点，便可以使用.wrapper，这里以点（．）开头代表选择 class ，其后紧跟 class 的名称。
（3）标签
根据标签名筛选，例如想选择二级标题，直接用 h2 即可
（4）嵌套选择
空格分隔嵌套：
各个选择器之间加上空格分隔开便可以代表嵌套关系， 如 #container .wrapper p 则代表先选择 id 为 container 的节点，然后选中其内部的 class 为 wrapper 的节 点，然后再进一步选中其内部的 p 节点
不加空格(,)代表并列关系：
（5）CSS语法举例
3.其他选择器
Xpath