HTML DOM 入门知识点总结

迷南。 2022-10-12 04:27 227阅读 0赞

### HTML DOM 入门知识点总结 ###

*  HTML DOM
 *   *  节点概念
     *  获取节点
     *  节点的属性
     *  样式
     *  事件
 *  HTML DOM 节点关系
 *   *  基本概念
     *  创建节点
     *  删除节点
     *  替换节点
     *  插入节点
     *  使用场景

> 教程来源：[how2j 的 html dom 教程][how2j _ html dom]

> 详细知识点目录：[【重识 HTML + CSS】知识点目录][HTML _ CSS]

> Gitee 代码：[https://gitee.com/szluyu99/how2j\_front\_note/tree/master/html\_dom][https_gitee.com_szluyu99_how2j_front_note_tree_master_html_dom]

# HTML DOM #

## 节点概念 ##

DOM 是 Document Object Model（文档对象模型）的缩写，它是以面向对象的角度来看待 HTML，比如一个超链接（a 标签），作为一个 DOM 对象，就可以使其隐藏，修改其 `href` 指向的地址。

DOM 把所有的 html 都转换为节点：

*  **整个文档** 是一个节点
 *  **元素** 是节点
 *  **元素属性** 是节点
 *  **元素内容** 是节点
 *  **注释** 也是节点

下例中：

*  通过 `document.getElementById` 获取了 `id='d1'` 的 div 标签对应的**元素节点**
 *  然后通过`attributes` 获取了该节点对应的**属性节点**
 *  接着通过 `childNodes` 获取了**内容节点**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]

<html>
    
    <body>
        <div id="d1">hello HTML DOM</div>
    </body>
    
    <script> function p(s) { document.write(s); document.write("<br>"); } var div1 = document.getElementById("d1"); p("文档节点" + document); p("元素" + div1); p("属性节点" + div1.attributes[0]); p("内容节点" + div1.childNodes[0]); </script>
    
    </html>

## 获取节点 ##

代码：[html\_dom - 获取节点][html_dom -]

*  [getElementById][] 通过 **id** 获取元素节点
 *  [getElementsByTagName][] 通过**标签名称**获取元素节点
 *  [getElementsByClassName][] 通过**类名**获取元素节点
 *  [getElementsByName][] 通过**表单元素的 name** 获取元素节点
 *  [attributes][] 获取属性节点
 *  [childNodes][] 获取内容节点

## 节点的属性 ##

代码：[html\_dom - 节点的属性][html_dom - 1]

*  [nodeName][] 节点名称
 *  [nodeValue][] 节点值
 *  [nodeType][] 节点类型
 *  [innerHTML][] 元素的文本内容
 *  [id value className][] 元素上的属性

练习：

*  [切换不同的图片][Link 1]
 *  [判断输入框的值是否是整数][Link 2]
 *  [验证账号是否存在][Link 3]

## 样式 ##

一个元素节点的 style 属性即对应的 css，代码：[html\_dom - 样式][html_dom - 2]

*  [d.style.display][] 隐藏和显示
 *  [d.style.backgroundColor][] 改变背景色
    
    > css 属性名是 “background-color”，这里是 “backgroundColor”。 [jQuery][] 可以用 css 属性名操作样式

练习：[表格斑马线][Link 4]

## 事件 ##

代码：[html\_dom - 事件][html_dom - 3]

*  [onfocus、onblur][onfocus_onblur] 焦点事件
 *  [onmousedown、onmouseup、onmousemove、onmouseout][onmousedown_onmouseup_onmousemove_onmouseout] 鼠标事件
 *  [onkeydown、onkeypress、onkeyup][onkeydown_onkeypress_onkeyup] 键盘事件
 *  [onclick、ondblclick][onclick_ondblclick] 点击事件
 *  [onchange][] 变化事件
 *  [onsubmit][] 提交事件
 *  [onload][] 加载事件
 *  [this][] 当前组件
 *  [οnsubmit=“return false”][nsubmit_return false] 阻止事件的发生

练习：

*  [下拉菜单][Link 5]
 *  [选中所有 checkbox][checkbox]
 *  [验证账号是否存在][Link 6]

# HTML DOM 节点关系 #

## 基本概念 ##

代码：[html\_dom - 节点关系 - 基本概念][html_dom - _ -]

<div id="parentDiv">
    	<div id="d1">第一个div</div>
    	<div id="d2">第二个div</div>
     	<div id="d3">第三个div</div>
    </div>

以上代码对应的元素节点关系如下图：

> parentDiv 的 children 是 d1 d2 d3

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]

*  [parentNode][] 父节点
 *  [previousSibling、nextSibling][previousSibling_nextSibling] 同胞节点
 *  [firstChild、lastChild、childNodes][firstChild_lastChild_childNodes] 子节点  
    childNodes 和 children 都可以获取一个元素节点的子节点  
    childNodes 会包含**文本节点**  
    children 会排除**文本节点**

## 创建节点 ##

代码：[html\_dom - 节点关系 - 创建节点][html_dom - _ - 1]

*  [createElement][] 创建元素节点
 *  [createTextNode][] 创建文本节点
 *  [createAttribute][] 创建属性节点

练习：[动态创建一个表][Link 7]

## 删除节点 ##

代码：[html\_dom - 节点关系 - 删除节点][html_dom - _ - 2]

*  [removeChild][] 删除元素节点
 *  [removeAttribute][] 删除属性节点
 *  [removeChild、innerHTML][removeChild_innerHTML] 删除文本

## 替换节点 ##

[replaceChild][] 替换节点

## 插入节点 ##

代码：[html\_dom - 节点关系 - 创建节点][html_dom - _ - 3]

*  [appendChild][] 在最后追加节点
 *  [insertBefore][] 在前方插入节点

练习：[动态加载js][js]

## 使用场景 ##

代码：[html\_dom - 节点关系 - 使用场景][html_dom - _ - 4]

*  [删除行为前的提示][Link 8]
 *  [验证账号密码是否为空][Link 9]
 *  [提交数据验证长度][Link 10]
 *  [提交数据验证年龄是否数字][Link 11]
 *  [提交数据验证年龄是否为整数][Link 12]
 *  [验证e-mail格式是否正确][e-mail]
 *  [隐藏和显示][Link 13]
 *  [表格排序][Link 14]

[how2j _ html dom]: https://how2j.cn/k/dom/dom-node/457.html?p=128417
[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[https_gitee.com_szluyu99_how2j_front_note_tree_master_html_dom]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]: /images/20221005/29879d7efd6f401595a9cb31249d4461.png
[html_dom -]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom/2-%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9
[getElementById]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/2-%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/1-%E9%80%9A%E8%BF%87id%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9.html
[getElementsByTagName]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/2-%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/2-%E9%80%9A%E8%BF%87%E6%A0%87%E7%AD%BE%E5%90%8D%E7%A7%B0%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9.html
[getElementsByClassName]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/2-%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/4-%E9%80%9A%E8%BF%87%E7%B1%BB%E5%90%8D%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9.html
[getElementsByName]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/2-%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/3-%E9%80%9A%E8%BF%87%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0%E7%9A%84name%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9.html
[attributes]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/2-%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/5-%E8%8E%B7%E5%8F%96%E5%B1%9E%E6%80%A7%E8%8A%82%E7%82%B9.html
[childNodes]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/2-%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/6-%E8%8E%B7%E5%8F%96%E5%86%85%E5%AE%B9%E8%8A%82%E7%82%B9.html
[html_dom - 1]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom/3-%E8%8A%82%E7%82%B9%E7%9A%84%E5%B1%9E%E6%80%A7
[nodeName]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/3-%E8%8A%82%E7%82%B9%E7%9A%84%E5%B1%9E%E6%80%A7/1-%E8%8A%82%E7%82%B9%E5%90%8D%E7%A7%B0.html
[nodeValue]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/3-%E8%8A%82%E7%82%B9%E7%9A%84%E5%B1%9E%E6%80%A7/2-%E8%8A%82%E7%82%B9%E5%80%BC.html
[nodeType]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/3-%E8%8A%82%E7%82%B9%E7%9A%84%E5%B1%9E%E6%80%A7/3-%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8B.html
[innerHTML]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/3-%E8%8A%82%E7%82%B9%E7%9A%84%E5%B1%9E%E6%80%A7/4-%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%87%E6%9C%AC%E5%86%85%E5%AE%B9.html
[id value className]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/3-%E8%8A%82%E7%82%B9%E7%9A%84%E5%B1%9E%E6%80%A7/5-%E5%85%83%E7%B4%A0%E4%B8%8A%E7%9A%84%E5%B1%9E%E6%80%A7.html
[Link 1]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/3-%E8%8A%82%E7%82%B9%E7%9A%84%E5%B1%9E%E6%80%A7/%E7%BB%83%E4%B9%A0-%E5%88%87%E6%8D%A2%E4%B8%8D%E5%90%8C%E7%9A%84%E5%9B%BE%E7%89%87.html
[Link 2]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/3-%E8%8A%82%E7%82%B9%E7%9A%84%E5%B1%9E%E6%80%A7/%E7%BB%83%E4%B9%A0-%E5%88%A4%E6%96%AD%E8%BE%93%E5%85%A5%E6%A1%86%E7%9A%84%E5%80%BC%E6%98%AF%E5%90%A6%E6%98%AF%E6%95%B4%E6%95%B0.html
[Link 3]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/3-%E8%8A%82%E7%82%B9%E7%9A%84%E5%B1%9E%E6%80%A7/%E7%BB%83%E4%B9%A0-%E9%AA%8C%E8%AF%81%E8%B4%A6%E5%8F%B7%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8.html
[html_dom - 2]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom/4-%E6%A0%B7%E5%BC%8F
[d.style.display]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/4-%E6%A0%B7%E5%BC%8F/1-%E9%9A%90%E8%97%8F%E5%92%8C%E6%98%BE%E7%A4%BA.html
[d.style.backgroundColor]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/4-%E6%A0%B7%E5%BC%8F/2-%E6%94%B9%E5%8F%98%E8%83%8C%E6%99%AF%E8%89%B2.html
[jQuery]: https://blog.csdn.net/weixin_43734095/article/details/113880137
[Link 4]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/4-%E6%A0%B7%E5%BC%8F/%E7%BB%83%E4%B9%A0-%E8%A1%A8%E6%A0%BC%E6%96%91%E9%A9%AC%E7%BA%BF.html
[html_dom - 3]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom/5-%E4%BA%8B%E4%BB%B6
[onfocus_onblur]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/1-%E7%84%A6%E7%82%B9%E4%BA%8B%E4%BB%B6.html
[onmousedown_onmouseup_onmousemove_onmouseout]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/2-%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6.html
[onkeydown_onkeypress_onkeyup]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/3-%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6.html
[onclick_ondblclick]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/4-%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6.html
[onchange]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/5-%E5%8F%98%E5%8C%96%E4%BA%8B%E4%BB%B6.html
[onsubmit]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/6-%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E4%BA%8B%E4%BB%B6.html
[onload]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/7-%E5%8A%A0%E8%BD%BD%E4%BA%8B%E4%BB%B6.html
[this]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/8-%E5%BD%93%E5%89%8D%E7%BB%84%E4%BB%B6.html
[nsubmit_return false]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/9-%E9%98%BB%E6%AD%A2%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%8F%91%E7%94%9F.html
[Link 5]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/%E7%BB%83%E4%B9%A0-%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95.html
[checkbox]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/%E7%BB%83%E4%B9%A0-%E9%80%89%E4%B8%AD%E6%89%80%E6%9C%89checkbox.html
[Link 6]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/5-%E4%BA%8B%E4%BB%B6/%E7%BB%83%E4%B9%A0-%E9%AA%8C%E8%AF%81%E8%B4%A6%E5%8F%B7%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8.html
[html_dom - _ -]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/1-%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221005/3a0760bdd20d4f7c8d9eee39aa8620cd.png
[parentNode]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/1-%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5/1-%E7%88%B6%E8%8A%82%E7%82%B9.html
[previousSibling_nextSibling]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/1-%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5/2-%E5%90%8C%E8%83%9E%E8%8A%82%E7%82%B9.html
[firstChild_lastChild_childNodes]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/1-%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5/3-%E5%AD%90%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB.html
[html_dom - _ - 1]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/2-%E5%88%9B%E5%BB%BA%E8%8A%82%E7%82%B9
[createElement]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/2-%E5%88%9B%E5%BB%BA%E8%8A%82%E7%82%B9/1-%E5%88%9B%E5%BB%BA%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9.html
[createTextNode]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/2-%E5%88%9B%E5%BB%BA%E8%8A%82%E7%82%B9/2-%E5%88%9B%E5%BB%BA%E6%96%87%E6%9C%AC%E8%8A%82%E7%82%B9.html
[createAttribute]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/2-%E5%88%9B%E5%BB%BA%E8%8A%82%E7%82%B9/3-%E5%88%9B%E5%BB%BA%E5%B1%9E%E6%80%A7%E8%8A%82%E7%82%B9.html
[Link 7]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/2-%E5%88%9B%E5%BB%BA%E8%8A%82%E7%82%B9/%E7%BB%83%E4%B9%A0-%E5%8A%A8%E6%80%81%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E8%A1%A8.html
[html_dom - _ - 2]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/3-%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9
[removeChild]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/3-%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9/1-%E5%88%A0%E9%99%A4%E5%85%83%E7%B4%A0%E8%8A%82%E7%82%B9.html
[removeAttribute]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/3-%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9/2-%E5%88%A0%E9%99%A4%E5%B1%9E%E6%80%A7%E8%8A%82%E7%82%B9.html
[removeChild_innerHTML]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/3-%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9/3-%E5%88%A0%E9%99%A4%E6%96%87%E6%9C%AC%E8%8A%82%E7%82%B9.html
[replaceChild]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/4-%E6%9B%BF%E6%8D%A2%E8%8A%82%E7%82%B9/1-%E6%9B%BF%E6%8D%A2%E8%8A%82%E7%82%B9.html
[html_dom - _ - 3]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/5-%E6%8F%92%E5%85%A5%E8%8A%82%E7%82%B9
[appendChild]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/5-%E6%8F%92%E5%85%A5%E8%8A%82%E7%82%B9/1-%E5%90%8E%E6%96%B9%E8%BF%BD%E5%8A%A0%E8%8A%82%E7%82%B9.html
[insertBefore]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/5-%E6%8F%92%E5%85%A5%E8%8A%82%E7%82%B9/2-%E5%9C%A8%E5%89%8D%E6%96%B9%E6%8F%92%E5%85%A5%E8%8A%82%E7%82%B9.html
[js]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/5-%E6%8F%92%E5%85%A5%E8%8A%82%E7%82%B9/%E7%BB%83%E4%B9%A0-%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BDjs.html
[html_dom - _ - 4]: https://gitee.com/szluyu99/how2j_front_note/tree/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/6-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF
[Link 8]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/6-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/1-%E5%88%A0%E9%99%A4%E8%A1%8C%E4%B8%BA%E5%89%8D%E7%9A%84%E6%8F%90%E7%A4%BA.html
[Link 9]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/6-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/2-%E9%AA%8C%E8%AF%81%E8%B4%A6%E5%8F%B7%E5%AF%86%E7%A0%81%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A9%BA.html
[Link 10]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/6-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/3-%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81%E9%95%BF%E5%BA%A6.html
[Link 11]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/6-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/4-%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81%E5%B9%B4%E9%BE%84%E6%98%AF%E5%90%A6%E6%95%B0%E5%AD%97.html
[Link 12]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/6-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/5-%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81%E5%B9%B4%E9%BE%84%E6%98%AF%E5%90%A6%E4%B8%BA%E6%95%B4%E6%95%B0.html
[e-mail]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/6-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/6-%E9%AA%8C%E8%AF%81e-mail%E6%A0%BC%E5%BC%8F%E6%98%AF%E5%90%A6%E6%AD%A3%E7%A1%AE.html
[Link 13]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/6-%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/7-%E9%9A%90%E8%97%8F%E5%92%8C%E6%98%BE%E7%A4%BA.html
[Link 14]: https://gitee.com/szluyu99/how2j_front_note/blob/master/html_dom/6-%E8%8A%82%E7%82%B9%E5%85%B3%E7%B3%BB/7-%E8%A1%A8%E6%A0%BC%E6%8E%92%E5%BA%8F/test.html