修真源Web工程师零基础全能教程
本课内容：
主母
演讲者介绍
小道消息技术总监秦修
丰富的项目经验，擅长H5移动端项目开发。
专注于技术选型、底层开发、最佳代码实践的总结和推广。
直播录屏版本：
文字分析版：
1. 什么是DOM
DOM即 Model，什么是 Model？ 这需要好好谈谈。
HTML 文档页面是一切的基础，没有它就没有 dom。
当一个页面被创建并加载到浏览器中时，DOM就会悄然诞生，它将网页文档转换为文档对象，其主要功能是处理网页内容。
在这个文档对象中，所有的元素都呈现出层次结构，这意味着除了顶级元素html之外，其他所有元素都包含在其他元素中。
如果有这样一段html代码：
我的链接
我的头衔
那么它的树应该是像下面这棵一样倒过来的树。
家谱和家谱本身是一个模型，其典型用法是表示人类家谱。
很容易展现家庭成员之间的关系，简洁地表达复杂的关系，所以这个模型很适合表示一个html文档：
Model就是基于这样的文档视图结构的模型
所有的html页面都逃不过这个模型，叫它节点树更准确。
2. 节点类型
一个节点代表网络中的一个连接点，一个网络是由一些节点组成的。
文档是节点的集合javascript如何获取指定class属性名的元素，但它们是节点树上的枝叶。
这些节点有很多不同的类型，我们先来看看其中的三种：
元素节点、文本节点和属性节点。
HTML的标签元素是DOM的元素节点，它提供了文档的结构。
但文档本身不包含任何内容，因此元素节点可以包含其他节点。
文本节点是一种节点，它始终包含在元素节点内，构成页面文档的主要内容。
属性节点用于对元素进行具体的描述，例如：
a 元素的 href 属性和 img 元素的 alt 属性。
属性总是放在开始标签中，所以属性节点总是包含在元素节点中。
虽然不是所有的元素节点都包含属性，但所有的属性都必须被元素节点包含。
3. 节点运行
3.1 获取元素节点
元素节点的获取方式有4种，分别通过元素ID、标签名、类名和css选择器获取。
3.1.1 元素 ID
该方法是一个对象特定的函数，传入一个参数，即元素的id属性的值，将返回一个对象。
这个对象对应的是id属性为指定值的节点，我们也可以用它来验证它的类型：
。（“车”）;
警报（。（“汽车”））;
实际上，文档中的每一个元素都是一个对象，任何对象都可以通过DOM提供的方法来获取。
但是如果为每个元素定义一个唯一的ID值太麻烦了，所以DOM还提供了另一种获取不带id的对象的方法。
3.1.2 标签名称
该方法返回一个对象数组，其元素与获取的对象相似：
.("李");
您还可以使用数组方法来获取此数组的长度：
.("李").;
如果你觉得在编程的时候重复写这段代码会很麻烦，你也可以把它赋值给一个变量：
var lis = .("li");
对于 (var i = 0; i < lis.; i++) {
警报（lis[i]）；
}
此外，还可以组合使用，缩小选择范围
比如现在我只想知道id为car的元素下有多少个列表项，那么可以这样：
var car = .("汽车");
var lis = car..("li");
3.1.3 类名
me 方法允许我们通过类名访问元素。
它的返回值类似于返回一个对象数组：
.me("销售");
值得注意的是，它也可以匹配包含多个类的元素，当指定多个类名时
你只需要在字符串参数中间用瑜伽空格分隔类名，顺序并不重要。
另外，也可以和前面两种方法结合使用，用法和结合使用的例子一致。
3.1.4 CSS 选择器
html5中还有两个新的方法，可以让我们使用css选择器来选择DOM节点。 这两种方法必须在IE8以上的现代浏览器中使用。
第一个方法返回单个节点。 如果有多个匹配元素，则只返回第一个，如果没有匹配到，则返回null。
第二种方法返回节点列表的集合。 参数都是 CSS 选择器字符串：
.("#foo");
。（“。酒吧”）;
3.2 获取和设置属性
获取到元素后，就可以获取到它们的属性，改变属性的值：
3.2.1
函数是属于节点对象的方法，可以通过传入参数获取节点对象下的各种属性：
var p = .("解析");
var title = p.("标题");
警报（标题）；
3.2.2
方法对应的，不再是获取，而是修改，所以它有两个参数：
第一个是属性名称，第二个是您要修改为的值：
var p = .("解析");
p.("title","美好的一天！");
警报（p.（“标题”））；
值得注意的是，此时如果查看源码，会发现P元素的title属性值并没有发生变化。
这是因为DOM的工作模式是：
先加载静态内容，再动态刷新，动态刷新不影响文档的静态内容。
3.3 在树上爬行
，在一个节点树上，这个属性可以用来获取一个元素的所有子元素，得到一个包含所有子元素的数组：
.
// 如果要获取body元素下的所有子元素
.("正文")[0].;
, 获取当前节点的父节点元素，如果指定节点没有父元素则返回null。
，每个节点都有一个属性，这个属性是一个值，这样我们就可以知道正在处理的是哪种类型的节点。
节点的种类有十多种，但我们最需要了解的有以下三种：
元素节点的属性值为1
属性节点的属性值为2
文本节点的属性值为3
这意味着我们只能处理某些类型的节点，比如只能处理元素节点。
警报（节点。）；
，如果你想改变文本节点的值，你可以使用这个属性：
节点。;
比如有一个p元素节点，里面有一些文本内容，如果要获取文本内容，直接在p元素上使用，会得到一个null值。
因为这种方式获取的是p元素节点的值，而不是其子元素文本节点的值，所以可以这样获取真正需要的内容：
p.[0].;
和 , 是更容易对子元素数组进行操作的属性，即第一个和最后一个，它们更短且更易读。
3.4 动态创建
前面的方法都是搜索和修改已有的元素。
但是，js也可以用来改变网页的结构和内容。 它可以通过创建新元素和更改现有元素来改变网页的结构。
3.4.1 传统方法
.write() 方法可以轻松快速地将字符串插入到文档中
属性可用于读写html内容
3.4.2 DOM操作方法
如果你想在p元素中放入一段文字内容，然后将p元素插入到页面的一个节点中，那么这个任务可以分为几个步骤：
A。 创建ap元素节点
b. 优化p元素节点为文档中的#元素节点
C。 创建文本节点
d. 将此文本节点附加到刚刚创建的 p 元素节点
var para = .("p");
= .("");
.(段落);
var txt = .("你好世界");
段落(txt);
让我们熟悉一下这些方法：
，创建一个元素节点，传入的参数为标签名称字符串。 但它只是文档片段，还不是DOM节点树的一部分，无法在浏览器中显示。
, 为文本内容创建一个文本节点，和上面几乎一样，只是传入的参数是一个文本字符串，创建后还是文档中的游走孤儿。
，将新创建的节点插入节点树的最简单方法之一是使其成为节点的子节点。
, 此方法在现有元素之前插入一个新元素。
调用此方法时必须知道三件事：新元素、目标元素和父元素。 语法如下：
.(, );
例如，如果你想在 img 图片前插入 ap 标签，你可以这样做：
var img = .("img");
var p = .("p");
img..(p, img);
4.操作包
前面提到了方法，那么是不是应该有对应的()呢？ 不幸的是，这儿没有。 . .
那么我们实际上可以实现这样一个方法：
(, ) {
变量 =.;
如果（。==）{
.();
} 别的 {
.(, .);
}
}
其实现步骤如下：
A。 首先这个函数有两个参数，一个是要插入的元素，一个是目标元素。
b. 将目标元素的父元素保存到变量中
C。 检查目标元素是否是父元素的最后一个子元素
d. 如果是，使用方法将新元素追加到父元素，这样新元素就插入到目标元素之后
e. 如果不是，则在目标元素的下一个兄弟元素之前插入新元素，使新元素在目标元素之后
通过这样一个功能，再加上几个已知的方法，就可以自己封装自己需要的方法了。
5.物料清单
BOM，model，浏览器对象model，这个对象对应浏览器窗口。
它提供了访问与网页内容无关的浏览器功能的方法。
5.1 对象
对象是BOM的核心，代表浏览器打开的窗口，是一个全局对象。
它还有一些属性方法和子对象，其实我们都默默用过。
比如alert()方法，但是因为它是Widow对象的直系后代，所以不需要加前缀。
另外，我们定义的全局变量其实就是上面定义的。
5.1.1 全球范围
var car = "特斯拉";
跑步（） {
警报（这辆车）；
};
警报（.car）；
跑步（）;
。跑步（）;
变量 car 和函数 run 定义在全局范围内，它们被自动归类为对象，因此可以通过点访问它们。
另外，run函数存在于全局范围内，所以也指向了这一点。
5.1.2 系统对话框
alert(),(),()这些方法可以调用系统对话框向用户显示消息。
alert 生成一个警告框来显示一些用户无法控制的消息，只有阅读后才能关闭。
生成的对话框和前者的区别是多了一个按钮，让用户决定是否执行，并返回一个布尔值
true 表示点击确定，false 表示点击取消。
就是生成一个提示框，提示用户输入一些文本内容。 此方法接受 2 个参数：
文本提示和输入框的默认值。 用户点击确定后，返回文本框中输入的值；
如果点击或直接关闭，则返回null。
5.1.3 窗口操作
方法
阐明
.()
用于将窗口移动到相对位置
.()
用于将窗口移动到特定位置
.()
用于按相对数量调整窗口大小
.()
用于将窗口调整为特定大小
5.2 对象
该对象允许我们访问有关当前加载的 URI（统一资源标识符）的任意信息
属性
例子
阐明
散列
#
返回url中的hash值，即#后面的字符
主持人
:80
返回服务器名称和端口
返回没有端口的服务器名称
参考资料
返回当前页面的完整 url
//
返回 url 中的目录
港口
80
返回端口号javascript如何获取指定class属性名的元素，如果没有则返回空字符串
