webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update:DOM 操作

Browse Source
This commit is contained in:
qianguyihao 2019-08-04 17:41:02 +08:00
parent bf3316d097
commit da68db944f
3 changed files with 425 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
03-JavaScript基础/22-正则表达式.md
View File

@ -29,6 +29,14 @@
- （2）使用 reg 的test() 方法，判断指定字符串是否符合规则。 - （2）使用 reg 的test() 方法，判断指定字符串是否符合规则。
**正则表达式的`test()`方法**：【重要】
```javascript
myReg.test(str); // 判断字符串 str 是否符合 指定的 myReg 这个正则表达式的规则
```
解释：使用`test()`这个方法可以用来检查一个字符串是否符合正则表达式的规则，**如果符合则返回true，否则返回false**。
我们来看看下面的例子。 我们来看看下面的例子。
**1、传一个参数时**： **1、传一个参数时**：
@ -51,14 +59,6 @@
注意，上面的例子中，我们是先定义了一个正则表达式的规则，然后通过正则表达式的`test()`方法来判断字符串是否符合之前定义的规则。 注意，上面的例子中，我们是先定义了一个正则表达式的规则，然后通过正则表达式的`test()`方法来判断字符串是否符合之前定义的规则。
正则表达式的`test()`方法：
```javascript
myReg.test(str); // 判断字符串 str 是否符合 指定的 myReg 这个正则表达式的规则
```
解释：使用`test()`这个方法可以用来检查一个字符串是否符合正则表达式的规则，**如果符合则返回true，否则返回false**。
**2、传两个参数时**：匹配模式 【重要】 **2、传两个参数时**：匹配模式 【重要】
构造函数 RegExp 中，也可以传两个参数。我们可以传递一个**匹配模式**作为第二个参数。这个参数可以是： 构造函数 RegExp 中，也可以传两个参数。我们可以传递一个**匹配模式**作为第二个参数。这个参数可以是：
@ -325,6 +325,19 @@ match()这个方法还是很实用的，可以在一个很长的字符串中，
str = str.replace(/\s*$/, ""); //去除结尾的空格 str = str.replace(/\s*$/, ""); //去除结尾的空格
``` ```
### 判断字符串是否为电子邮件
正则实现：
```javascript
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "abchello@163.com";
console.log(emailReg.test(email));
```
## 我的公众号 ## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
@ -334,4 +347,3 @@ match()这个方法还是很实用的，可以在一个很长的字符串中，
![](http://img.smyhvae.com/20190101.png) ![](http://img.smyhvae.com/20190101.png)

326
03-JavaScript基础/23-事件简介.md Normal file
View File

@ -0,0 +1,326 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8366012.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## 事件简介
事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
JavaScript 是以**事件驱动为核心**的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。
### 事件的三要素
**事件的三要素：事件源、事件、事件驱动程序**。
比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯开了或者关了。
再比如，网页上弹出一个广告，我点击右上角的`X`，广告就关闭了。这件事情里，事件源是：`X`。事件是：onclick。事件驱动程序是：广告关闭了。
于是我们可以总结出：谁引发的后续事件，谁就是事件源。
**总结如下：**
- 事件源：引发后续事件的html标签。
- 事件：js已经定义好了（见下图）。
- 事件驱动程序：对样式和html的操作。也就是DOM。
也就是说，我们可以在时间对应的属性中写一些js代码，当事件被触发时，这些代码将会执行。
**代码书写步骤如下：**（重要）
- （1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById
- （2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
- （3）书写事件驱动程序：关于DOM的操作。
最简单的代码举例：（点击box1，然后弹框）
```html
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
```
常见的事件如下：
![](http://img.smyhvae.com/20180126_1553.png)
下面针对这事件的三要素，进行分别介绍。
### 1、获取事件源的方式（DOM节点的获取）
获取事件源的常见方式如下：
```javascript
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
```
### 2、绑定事件的方式
方式一：直接绑定匿名函数
```html
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
```
方式二：先单独定义函数，再绑定
```html
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
```
注意上方代码的注释。**绑定的时候，是写fn，不是写fn()**。fn代表的是整个函数，而fn()代表的是返回值。
方式三：行内绑定
```html
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
```
注意第一行代码，绑定时，是写的`"fn()"`，不是写的`"fn"`。因为绑定的这段代码不是写在js代码里的，而是被识别成了**字符串**。
### 3、事件驱动程序
我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：
点击鼠标时，原本粉色的div变大了，背景变红：
```html
<style>
#box1 {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//点击鼠标时，原本粉色的div变大了，背景变红了
div1.onclick = function () {
div1.style.width = "200px"; //属性值要写引号
div1.style.height = "200px";
div1.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-color
}
</script>
```
上方代码的注意事项：
- 在js里写属性值时，要用引号
- 在js里写属性名时，是`backgroundColor`，不是CSS里面的`background-color`。
实现效果如下：
![](http://img.smyhvae.com/20180126_1720.gif)
### onload事件
> onload事件比较特殊，这里单独讲一下。
**当页面加载（文本和图片）完毕的时候，触发onload事件。**
举例：
```html
<script type="text/javascript">
window.onload = function () {
console.log("smyhvae"); //等页面加载完毕时，打印字符串
}
</script>
```
有一点我们要知道：**js的加载是和html同步加载的**。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
### 事件举例：京东顶部广告栏
![](http://img.smyhvae.com/20180122_1020.png)
比如上面这张图，当鼠标点击右上角的`X`时，关掉整个广告栏，这就要用到事件。
代码实现如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.top-banner {
background-color: pink;
height: 80px;
}
.w {
width: 1210px;
margin: 10px auto;
position: relative;
}
img {
display: block;
width: 1210px;
height: 80px;
background-color: blue;
}
a {
position: absolute;
top: 5px;
right: 5px;
color: #fff;
background-color: #000;
text-decoration: none;
width: 20px;
height: 20px;
font: 700 14px/20px "simsum";
text-align: center;
}
.hide {
display: none!important;
}
</style>
</head>
<body>
<div class="top-banner" id="topBanner">
<div class="w">
<img src="" alt=""/>
<a href="#" id="closeBanner">×</a>
</div>
</div>
<script>
//需求：点击案例，隐藏盒子。
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
//1.获取事件源和相关元素
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
//2.绑定事件
closeBanner.onclick = function () {
//3.书写事件驱动程序
//类控制
// topBanner.className += " hide"; //保留原类名，添加新类名
topBanner.className = "hide";//替换旧类名（方式一）
// topBanner.style.display = "none"; //方式二：与上一行代码的效果相同
}
</script>
</body>
</html>
```
注意最后一行代码，这种方式会替换旧类名，意思是，不管之前的类名叫什么，都会被修改。
### 事件举例：
要求实现效果：当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。
代码实现：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</html>
```
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png)

416
03-JavaScript基础/25-DOM操作.md → 03-JavaScript基础/24-DOM简介和DOM操作.md
View File

@ -1,10 +1,10 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8366012.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。 > 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8366012.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。 > 以下是正文。
## 常见概念
## 前言
### JavaScript的组成 ### JavaScript的组成
@ -12,344 +12,42 @@ JavaScript基础分为三个部分：
- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 - ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- **DOM**：文档对象模型，操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。 - **DOM**：文档对象模型（Document object Model），操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。
- **BOM**：浏览器对象模型，操作**浏览器部分功能**的API。比如让浏览器自动滚动。 - **BOM**：浏览器对象模型，操作**浏览器部分功能**的API。比如让浏览器自动滚动。
## 事件 ### 节点
> JS是以**事件驱动为核心**的一门语言。 **节点**（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。
### 事件的三要素 虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：
**事件的三要素：事件源、事件、事件驱动程序**。 - 文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。 - 元素节点（标签）：HTML标签。
再比如，网页上弹出一个广告，我点击右上角的`X`，广告就关闭了。这件事情里，事件源是：`X`。事件是：onclick。事件驱动程序是：广告关闭了。 - 属性节点（属性）：元素的属性。
于是我们可以总结出：谁引发的后续事件，谁就是事件源。 - 文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。
**总结如下：** 节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。
- 事件源：引发后续事件的html标签。
- 事件：js已经定义好了（见下图）。
- 事件驱动程序：对样式和html的操作。也就是DOM。
**代码书写步骤如下：**（重要）
- （1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById
- （2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
- （3）书写事件驱动程序：关于DOM的操作。
最简单的代码举例：（点击box1，然后弹框）
```html
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getElementById("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
```
常见的事件如下：
![](http://img.smyhvae.com/20180126_1553.png)
下面针对这事件的三要素，进行分别介绍。
### 1、获取事件源的方式（DOM节点的获取）
获取事件源的常见方式如下：
```javascript
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
```
### 2、绑定事件的方式
方式一：直接绑定匿名函数
```html
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
```
方式二：先单独定义函数，再绑定
```html
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
```
注意上方代码的注释。**绑定的时候，是写fn，不是写fn()**。fn代表的是整个函数，而fn()代表的是返回值。
方式三：行内绑定
```html
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
```
注意第一行代码，绑定时，是写的`"fn()"`，不是写的`"fn"`。因为绑定的这段代码不是写在js代码里的，而是被识别成了**字符串**。
### 3、事件驱动程序
我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：
点击鼠标时，原本粉色的div变大了，背景变红：
```html
<style>
#box1 {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//点击鼠标时，原本粉色的div变大了，背景变红了
div1.onclick = function () {
div1.style.width = "200px"; //属性值要写引号
div1.style.height = "200px";
div1.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-color
}
</script>
```
上方代码的注意事项：
- 在js里写属性值时，要用引号
- 在js里写属性名时，是`backgroundColor`，不是CSS里面的`background-color`。
实现效果如下：
![](http://img.smyhvae.com/20180126_1720.gif)
### onload事件
> onload事件比较特殊，这里单独讲一下。
**当页面加载（文本和图片）完毕的时候，触发onload事件。**
举例：
```html
<script type="text/javascript">
window.onload = function () {
console.log("smyhvae"); //等页面加载完毕时，打印字符串
}
</script>
```
有一点我们要知道：**js的加载是和html同步加载的**。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
### 事件举例：京东顶部广告栏
![](http://img.smyhvae.com/20180122_1020.png)
比如上面这张图，当鼠标点击右上角的`X`时，关掉整个广告栏，这就要用到事件。
代码实现如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.top-banner {
background-color: pink;
height: 80px;
}
.w {
width: 1210px;
margin: 10px auto;
position: relative;
}
img {
display: block;
width: 1210px;
height: 80px;
background-color: blue;
}
a {
position: absolute;
top: 5px;
right: 5px;
color: #fff;
background-color: #000;
text-decoration: none;
width: 20px;
height: 20px;
font: 700 14px/20px "simsum";
text-align: center;
}
.hide {
display: none!important;
}
</style>
</head>
<body>
<div class="top-banner" id="topBanner">
<div class="w">
<img src="" alt=""/>
<a href="#" id="closeBanner">×</a>
</div>
</div>
<script>
//需求：点击案例，隐藏盒子。
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
//1.获取事件源和相关元素
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
//2.绑定事件
closeBanner.onclick = function () {
//3.书写事件驱动程序
//类控制
// topBanner.className += " hide"; //保留原类名，添加新类名
topBanner.className = "hide";//替换旧类名（方式一）
// topBanner.style.display = "none"; //方式二：与上一行代码的效果相同
}
</script>
</body>
</html>
```
注意最后一行代码，这种方式会替换旧类名，意思是，不管之前的类名叫什么，都会被修改。
### 事件举例：
要求实现效果：当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。
代码实现：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</html>
```
## DOM的介绍
### 什么是DOM ### 什么是DOM
DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 **DOM**：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。 DOM就是由节点组成的。
### 解析过程 **解析过程**：
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的**属性**。 HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的**属性**。
### DOM树（一切都是节点） **DOM树**：（一切都是节点）
DOM的数据结构如下： DOM的数据结构如下：
![](http://img.smyhvae.com/20180126_2105.png) ![](http://img.smyhvae.com/20180126_2105.png)
上图可知，**在HTML当中，一切都是节点**：（非常重要） 上图可知，**在HTML当中，一切都是节点**（非常重要）。节点的分类，在上一段中，已经讲了。
- **元素节点**：HMTL标签。
- **文本节点**：标签中的文字（比如标签之间的空格、换行）
- **属性节点**：：标签的属性。
整个html文档就是一个文档节点。所有的节点都是Object。 整个html文档就是一个文档节点。所有的节点都是Object。
@ -365,19 +63,18 @@ DOM的数据结构如下：
- 事件的触发响应：事件源、事件、事件的驱动程序 - 事件的触发响应：事件源、事件、事件的驱动程序
## 元素节点的获取
## DOM节点的获取 DOM节点的获取方式其实就是**获取事件源的方式**。关于事件，上一篇文章中已经讲到了。
DOM节点的获取方式其实就是**获取事件源的方式**，在上一段已经讲到。这里再重复一下。 想要操作元素节点，必须首先要找到该节点。有三种方式可以获取DOM节点：
操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：
```javascript ```javascript
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获得 标签数组，所以有s var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组，所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获取 元素节点数组，所以有s
``` ```
既然方式二、方式三获取的是标签数组，那么习惯性是**先遍历之后再使用**。 既然方式二、方式三获取的是标签数组，那么习惯性是**先遍历之后再使用**。
@ -412,7 +109,6 @@ JS中的**父子兄**访问关系：
节点.parentNode 节点.parentNode
``` ```
### 获取兄弟节点 ### 获取兄弟节点
**1、下一个节点 | 下一个元素节点**： **1、下一个节点 | 下一个元素节点**：
@ -455,8 +151,7 @@ JS中的**父子兄**访问关系：
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling 前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
``` ```
**3、补充**：获得任意一个兄弟节点：
**3、补充：**获得任意一个兄弟节点：
```javascript ```javascript
节点自己.parentNode.children[index]; //随意得到兄弟节点 节点自己.parentNode.children[index]; //随意得到兄弟节点
@ -525,7 +220,6 @@ JS中的**父子兄**访问关系：
子节点数组 = 父节点.children; //获取所有节点。用的最多。 子节点数组 = 父节点.children; //获取所有节点。用的最多。
``` ```
## DOM节点的操作（重要） ## DOM节点的操作（重要）
上一段的内容：节点的**访问关系**都是**属性**。 上一段的内容：节点的**访问关系**都是**属性**。
@ -593,8 +287,6 @@ JS中的**父子兄**访问关系：
我们可以看到，b1标签被插入到了box1标签的里面，和a1标签并列，在a1标签的前面。 我们可以看到，b1标签被插入到了box1标签的里面，和a1标签并列，在a1标签的前面。
**特别强调：** **特别强调：**
关于方式1的appendChild方法，这里要强调一下。比如，现在有下面这样一个div结构： 关于方式1的appendChild方法，这里要强调一下。比如，现在有下面这样一个div结构：
@ -616,7 +308,6 @@ JS中的**父子兄**访问关系：
![](http://img.smyhvae.com/20180129_2125.png) ![](http://img.smyhvae.com/20180129_2125.png)
### 删除节点 ### 删除节点
格式如下： 格式如下：
@ -666,8 +357,8 @@ JS中的**父子兄**访问关系：
方式1： 方式1：
```javascript ```javascript
元素节点.属性; 元素节点.属性名;
元素节点[属性]; 元素节点[属性名];
``` ```
举例：（获取节点的属性值） 举例：（获取节点的属性值）
@ -695,7 +386,7 @@ JS中的**父子兄**访问关系：
上方代码中的img标签，有各种属性，我们可以逐一获取，打印结果如下： 上方代码中的img标签，有各种属性，我们可以逐一获取，打印结果如下：
![](http://img.smyhvae.com/20180127_1340.png) ![](http://img.smyhvae.com/20180127_1340.png)
f
方式2： 方式2：
```javascript ```javascript
@ -792,8 +483,6 @@ JS中的**父子兄**访问关系：
</body> </body>
``` ```
## DOM对象的属性 ## DOM对象的属性
DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、title、className、href等。 DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、title、className、href等。
@ -898,11 +587,62 @@ DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、titl
![](http://img.smyhvae.com/20180128_1939.png) ![](http://img.smyhvae.com/20180128_1939.png)
## 文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
**onload 事件**：
onload 事件会在整个页面加载完成之后才触发。为 window 绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
代码举例：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript">
// 【方式一：先加载，后执行】这段 js 代码是写在 <head> 标签里的，所以建议放在 window.onload 里面。
window.onload = function() {
// 获取id为btn的按钮
var btn = document.getElementById("btn");
// 为按钮绑定点击事件
btn.onclick = function() {
alert("hello");
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<script type="text/javascript">
// 【方式二：后加载，后执行】这段 js 代码是写在 <body> 标签里的，代码的位置是处在页面的下方。这么做，也可以确保：在页面加载完毕后，再执行 js 代码。
// 获取id为btn的按钮
var btn = document.getElementById("btn");
// 为按钮绑定点击事件
btn.onclick = function() {
alert("hello");
};
</script>
</body>
</html>
```
上方代码中，方式一和方式二均可以确保：在页面加载完毕后，再执行 js 代码。
## 我的公众号 ## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg) ![](http://img.smyhvae.com/20190101.png)