JS（JavaScript）入门指南（DOM、事件处理、BOM、数据校验）

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

玉阶生白露，夜久侵罗袜。
却下水晶帘，玲珑望秋月。
——《玉阶怨》

文章目录

一、DOM操作
- 1. DOM介绍
- 2. 查询操作
- - 2.1 查询方法
  - 2.2 查询示例
  - - 2.2.1 根据id获取dom
    - - 2.2.1.1 示例
      - 2.2.1.2 结果
    - 2.2.2 根据tag获取dom
    - - 2.2.2.1 示例
      - 2.2.2.2 结果
    - 2.2.3 根据css样式获取dom
    - - 2.2.3.1 示例
      - 2.2.3.2 结果
    - 2.2.4 根据已有节点获取其他节点dom
    - - 2.2.4.1 示例
      - 2.2.4.2 结果
  - 2.3 查询示例代码汇总
  - 2.4 示例代码下载
- 3. 访问和修改操作
- - 3.1 访问和修改属性
  - - 3.1.1 语法
    - 3.1.2 示例代码
    - 3.1.3 浏览器输出
  - 3.2 访问和修改内容
  - - 3.2.1 语法
    - 3.1.2 示例代码
    - 3.1.3 浏览器输出
  - 3.3 访问和修改css
  - - 3.3.1 语法
    - 3.3.2 示例代码
    - 3.3.3 浏览器输出
  - 3.4 访问修改示例代码下载
- 4. 添加替换操作
- - 4.1 方法列举
  - 4.2 示例代码
  - 4.3 效果展示
  - - 4.3.1 添加
    - 4.3.2 指定位置添加
    - 4.3.3 替换
  - 4.4 添加替换元素示例代码下载
- 5. 删除操作
- - 5.1 方法列举
  - 5.2 示例代码
  - 5.3 效果演示
  - - 5.3.1 remove方法删除
    - 5.3.2 removeChild方法删除
  - 5.4 删除元素示例代码下载
- 6. 趣味案例
- - 6.1 效果图
  - 6.2 搜索引擎的参数获取
  - - 6.2.1 百度的参数获取
    - 6.2.2 搜狗的参数获取
    - 6.2.3 360的参数获取
  - 6.3 示例代码
  - 6.4 效果演示
  - 6.5 案例的示例代码下载
- 7. DOM操作示例代码下载
二、事件处理
- 1. 事件简介
- - 1.1 事件的定义
  - 1.2 事件源
  - 1.3 事件对象
  - 1.4 事件监听
- 2. 事件的绑定
- - 2.1 静态绑定
  - 2.2 动态绑定
  - 2.3 注意事项
  - 2.4 示例代码
  - 2.5 页面效果
  - 2.6 示例代码下载
- 3. 常用事件
- - 3.1 鼠标事件
  - - 3.1.1 事件列举
    - 3.1.2 示例代码
    - 3.1.2 页面展示
  - 3.2 键盘事件
  - - 3.2.1 事件列举
    - 3.2.2 示例代码
    - 3.2.3 页面效果
  - 3.3 表单事件
  - - 3.3.1 事件列举
    - 3.3.2 示例代码
    - 3.3.3 页面效果
  - 3.4 常用事件相关示例代码下载
- 4. 事件操作
- - 4.1 事件冒泡
  - - 4.1.1 定义
    - 4.1.2 特点
    - 4.1.3 语法
    - 4.1.4 示例代码
    - 4.1.5 页面效果
  - 4.2 事件默认行为
  - - 4.2.1 定义
    - 4.2.2 语法
    - 4.2.3 示例代码
    - 4.2.4 页面效果
  - 4.3 事件操作的示例代码下载
- 5. 下拉列表
- - 5.1 Select
  - - 5.1.1 属性
    - 5.1.2 方法
    - 5.1.3 事件
  - 5.2 Option
  - - 5.2.1 属性
    - 5.2.2 构造函数
  - 5.3 示例代码
  - 5.4 页面效果
  - 5.5 示例代码下载
- 6. 二级菜单联动
- - 6.1 目标效果
  - 6.2 示例代码
  - 6.3 页面效果
  - 6.4 示例代码下载
- 7. 事件处理趣味实例
- - 7.1 创建表格
  - - 7.1.1 示例代码
    - 7.1.2 页面效果
  - 7.2 创建表单
  - - 7.2.1 示例代码
    - 7.2.2 页面效果
  - 7.3 添加样式
  - - 7.3.1 示例代码
    - 7.3.2 页面效果
  - 7.4 表格中的事件绑定
  - - 7.4.1 示例代码
    - 7.4.2 页面效果
  - 7.5 表单中的事件绑定
  - - 7.5.1 示例代码
    - 7.5.2 页面效果
  - 7.6 复选框功能实现
  - - 7.6.1 示例代码
    - 7.6.2 页面效果
  - 7.7 示例代码下载
三、BOM操作
- 1. BOM简介
- 2. window对象
- 3. window对象的常用方法
- - 3.1 常用方法列举
  - 3.2 方法示例代码
  - - 3.2.1 alert示例
    - 3.2.2 prompt示例
    - 3.2.3 confirm示例
    - 3.2.4 open示例
    - 3.2.5 setTimeout示例
    - 3.2.6 setInterval示例
    - 3.2.7 clearTimeout示例
    - 3.2.8 clearInterval示例
  - 3.3 示例代码下载
- 4. window对象的常用事件
- - 4.1 常用事件列举
  - 4.2 方法示例代码
  - - 4.2.1 alert示例
    - 4.2.2 prompt示例
    - 4.2.3 confirm示例
  - 4.3 示例代码下载
- 5. window对象的常用子级对象
- - 5.1 location对象
  - 5.2 history对象
  - 5.3 示例代码
  - 5.4 页面效果
  - 5.5 window常用子级对象示例代码下载
- 6. BOM操作的趣味案例
- - 6.1 示例代码
  - 6.2 页面效果
  - 6.3 示例代码下载
- 7. BOM操作示例代码下载
四、数据校验
- 1. 正则表达式
- - 1.1 简介
  - 1.2 定义方式
  - - 1.2.1 字面量定义
    - 1.2.2 构造函数定义
    - 1.2.3 说明
  - 1.3 匹配规则
  - - 1.3.1 元字符
    - 1.3.2 量词
    - 1.3.3 特殊符号
  - 1.4 基本用法
  - 1.5 示例代码
  - 1.6 浏览器页面效果
  - 1.7 示例代码下载
- 2. 表单校验-案例
- - 2.1 目的
  - 2.2 实现
  - 2.3 案例演示
  - - 2.3.1 预览效果
    - 2.3.2 示例代码
    - 2.3.3 示例代码演示
    - 2.3.4 示例代码下载
五、示例代码下载

JS（JavaScript）入门指南
JS（JavaScript）学习专栏

一、DOM操作

1. DOM介绍

DOM全称为dom document object model 文档对象模型

dom树
浏览器加载html页面时，会将html文档解析为一个树形结构，称为dom树

html文档和dom树是一一对应的
dom树被改变时，与之对应的html文档也会随之改变
当需要对html中的内容进行动态改变时，可以使用dom进行操作
dom提供了一组用来操作html文档的api，即提供一套属性、方法和事件
树上的每一个节点都是一个dom对象，树的顶层为document对象，表示整个文档

2. 查询操作

查询就是获取dom对象

2.1 查询方法

查询的方法和含义如下表

方法或属性	含义
document.getElementById(“id”)	根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName(“name”)	根据name属性查询，并返回所有匹配的节点集合
document.getElementsByTagName(“tagName”)	根据标签名来查询，返回所有匹配的节点集合
documnet.querySelector(“selector”)	根据css选择器来查询，返回匹配的第一个节点
document.querySelectorAll(“selector”)	根据css选择器来查询，返回所有匹配的节点集合
parentNode属性	查询当前节点的父节点
previous Sibing属性	查询当前节点的上一个节点
nextSibing属性	查询当前节点的下一个节点
firstChild属性	查询当前节点的第一个子节点
lastChild属性	查询当前节点的最后一个子节点

2.2 查询示例

示例代码共分为以下几种：根据id获取dom对象、根据标签tag获取dom对象、根据css样式获取dom对象、根据已有节点获取其他节点dom对象

2.2.1 根据id获取dom

根据id获取dom对象方法：document.getElementById(“id”)

2.2.1.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-查询</title>
    <script>
        function query(){
     
            console.log(12345);

            console.log("根据id获取dom对象");
            //根据id获取dom对象，返回单个值
            var objDiv = document.getElementById("d1");
            //获取对象的类型
            console.log(typeof objDiv);
            //打印对象
            console.log(objDiv);
        }

    </script>
</head>
<body>

    <input type="button" value="获取页面中的元素" onclick="query()">

    <div id="d1" class="c">
        hello!
    </div>

</body>
</html>

2.2.1.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述

浏览器控制台输出如下
在这里插入图片描述

2.2.2 根据tag获取dom

根据标签tag获取dom对象，示例如下

2.2.2.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-查询</title>
    <script>
        function query(){
     
            console.log(12345);

            console.log("根据name获取dom对象");
            //根据name获取dom对象，返回数组
            var objDivs = document.getElementsByName("hobby");
            //获取对象的类型
            console.log(typeof objDivs);
            //打印对象
            console.log(objDivs);
            //遍历数组对象
            for(var index in objDivs){
     
                console.log(objDivs[index])
            }

        }

    </script>
</head>
<body>

    <input type="button" value="获取页面中的元素" onclick="query()">

    hobbies:
                <input type="checkbox" value="eat" name="hobby">吃饭
                <input type="checkbox" value="sleep" name="hobby">睡觉
                <input type="checkbox" value="kingplay" name="hobby">打王者
    name:       <input type="text" name="username">

</body>
</html>

2.2.2.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述
浏览器控制台输出如下

2.2.3 根据css样式获取dom

通过css样式style获取dom对象

2.2.3.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-查询</title>

    <script>
        function query(){
     
            console.log(12345);

            console.log("根据css选择器获取单个dom对象");
            //根据css选择器获取单个dom对象
            var objCss = document.querySelector("#d1");
            console.log(objCss);
            //根据css选择器，使用标签获取对象，只会取第一个input标签的对象
            var objCss2 = document.querySelector("input");
            console.log(objCss2);
            //根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象
            var objCss3 = document.querySelector(".c");
            console.log(objCss3);
            //根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象
            var objCss4 = document.querySelector("p.c");
            console.log(objCss4);
            //根据css选择器获取多个dom对象
            //根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象
            var objCss5 = document.querySelectorAll(".c");
            console.log(objCss5);

        }

    </script>
</head>
<body>

    <input type="button" value="获取页面中的元素" onclick="query()">

    <div id="d1" class="c">
        hello!
    </div>

    <div id="d2" class="c">
        world!
    </div>

    <p class="c">test</p>

</body>
</html>

2.2.3.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述

浏览器控制台输出如下
在这里插入图片描述

2.2.4 根据已有节点获取其他节点dom

根据已有节点获取其他节点的dom对象，示例如下

2.2.4.1 示例

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-查询</title>

    <script>
        function query(){
     
            console.log(12345);

            //根据已有节点获取其他节点
            var objId = document.getElementById("id-du");
            //获取li标签的父类标签的对象
            console.log(objId.parentNode);
            //获取指定标签的上一个同级标签
            console.log(objId.previousSibling);
            //获取指定标签的下一个同级标签
            console.log(objId.nextSibling);
            //注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值
            //如果有text类型的值，则需要取两次才能取到
            //获取指定标签的上一个同级标签
            console.log(objId.previousSibling.previousSibling);
            //获取指定标签的下一个同级标签
            console.log(objId.nextSibling.nextSibling);
            
            //获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容
            console.log(objId.parentNode.firstChild);
            
            //获取当前节点下子节点的最后一个节点
            console.log(objId.parentNode.lastChild);

        }

    </script>
</head>
<body>

    <input type="button" value="获取页面中的元素" onclick="query()">

    <ul>a
        <li id="id-li">李白</li>
        <li id="id-du">杜甫</li>
        <li>王维</li>
        <li>杜牧</li>b
    </ul>

</body>
</html>

2.2.4.2 结果

使用浏览器打开代码，点击获取页面中的元素
在这里插入图片描述

浏览器控制台输出如下
在这里插入图片描述

2.3 查询示例代码汇总

以上方法的示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-查询</title>
    
    <script>
        function query(){
     
            console.log(12345);

            console.log("根据id获取dom对象");
            //根据id获取dom对象，返回单个值
            var objDiv = document.getElementById("d1");
            //获取对象的类型
            console.log(typeof objDiv);
            //打印对象
            console.log(objDiv);

            console.log("根据name获取dom对象");
            //根据name获取dom对象，返回数组
            var objDivs = document.getElementsByName("hobby");
            //获取对象的类型
            console.log(typeof objDivs);
            //打印对象
            console.log(objDivs);
            //遍历数组对象
            for(var index in objDivs){
     
                console.log(objDivs[index])
            }
            
            console.log("根据tag获取dom对象");
            //根据tag标签名获取dom对象
            var objIput = document.getElementsByTagName("input");
            for(var index in objIput){
     
                console.log(objIput[index]);
            }

            console.log("根据css选择器获取单个dom对象");
            //根据css选择器获取单个dom对象
            var objCss = document.querySelector("#d1");
            console.log(objCss);
            //根据css选择器，使用标签获取对象，只会取第一个input标签的对象
            var objCss2 = document.querySelector("input");
            console.log(objCss2);
            //根据css选择器，使用class获取对象，只会取第一个div标签的class为c的对象
            var objCss3 = document.querySelector(".c");
            console.log(objCss3);
            //根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象
            var objCss4 = document.querySelector("p.c");
            console.log(objCss4);
            //根据css选择器获取多个dom对象
            //根据css选择器，使用标签和class获取对象，只会取第一个p标签的class为c的对象
            var objCss5 = document.querySelectorAll(".c");
            console.log(objCss5);

            //根据已有节点获取其他节点
            var objId = document.getElementById("id-du");
            //获取li标签的父类标签的对象
            console.log(objId.parentNode);
            //获取指定标签的上一个同级标签
            console.log(objId.previousSibling);
            //获取指定标签的下一个同级标签
            console.log(objId.nextSibling);
            //注意：获取上一个和下一个同级标签时，换行符和空格也算是一个内容称为文本节点，所以前后都是text类型的值
            //如果有text类型的值，则需要取两次才能取到
            //获取指定标签的上一个同级标签
            console.log(objId.previousSibling.previousSibling);
            //获取指定标签的下一个同级标签
            console.log(objId.nextSibling.nextSibling);
            
            //获取当前节点下子节点的第一个节点，如先从li子节点获取父节点ul，再取ul节点下的第一个子节点，这里获取到的是第一个li节点前的文本内容
            console.log(objId.parentNode.firstChild);
            
            //获取当前节点下子节点的最后一个节点
            console.log(objId.parentNode.lastChild);
        }

    </script>
</head>
<body>

    <input type="button" value="获取页面中的元素" onclick="query()">

    <div id="d1" class="c">
        hello!
    </div>

    <div id="d2" class="c">
        world!
    </div>

    <p class="c">test</p>

    hobbies:
                <input type="checkbox" value="eat" name="hobby">吃饭
                <input type="checkbox" value="sleep" name="hobby">睡觉
                <input type="checkbox" value="kingplay" name="hobby">打王者
    name:       <input type="text" name="username">
    
    <ul>a
        <li id="id-li">李白</li>
        <li id="id-du">杜甫</li>
        <li>王维</li>
        <li>杜牧</li>b
    </ul>

</body>
</html>

使用浏览器打开，点击获取页面中的元素
在这里插入图片描述

控制台输出如下
在这里插入图片描述

2.4 示例代码下载

代码已上传至CSDN
下载地址：JavaScript dom操作 dom元素查询示例代码

3. 访问和修改操作

访问和修改操作包括：访问和修改属性、访问和修改内容、访问和修改样式

3.1 访问和修改属性

即获取或者设置dom对象的属性
dom对象的属性和html标签的属性几乎是一样的，一般情况下dom对象都会存在一个与对应html标签同名的属性

3.1.1 语法

访问用法如下

dom对象.属性

修改用法如下

dom对象.属性=值

3.1.2 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-访问和修改</title>

    <script>
        
        // 1 访问属性
        function getProperty(){
     

            let obj = document.getElementById("baidu");
            //获取超链接的href属性值
            console.log(obj.href);
            //获取超链接的target属性值
            console.log(obj.target);

            //获取指定对象的内容
            let objs = document.getElementById("username");
            console.log(objs.value);

            //获取指定对象的是否选中值，这里的checked返回的是false或ture，选中为true
            let obj3 = document.getElementById("male");
            console.log(obj3.checked);

            //设置属性值
            //将超链接百度的地址修改为别的，设置后刷新页面，点访问属性然后再点链接即可跳转到新的网址
            obj.href = "https://blog.csdn.net/mo_sss";
            //将跳转规则修改为当前页面跳转
            obj.target = "_self";

            //修改性别单选值的默认选项，将男性该位默认
            obj3.checked = "true";

        }

    </script>

</head>
<body>

    <!-- 1 访问属性 -->

    <br><br><br>

    <!-- 定义按钮，绑定事件，点击后触发事件，执行函数 -->
    <input type="button" value="访问属性" onclick="getProperty()">

    <br>
    <!-- <hr> -->
    <br>

    <a href="https://www.baidu.com" target="_blank" id="baidu">baidu</a>

    <br><br><br>

    username: <input type="text" name="username" id="username">

    sex: <input type="radio" name="sex" value="male" id="male">男
         <input type="radio" name="sex" value="female" id="female" checked>女
    
         <br><br><br>

</body>
</html>

3.1.3 浏览器输出

使用浏览器打开，点以下访问属性，可以看到默认勾选的女已经换成了男
在这里插入图片描述
控制台输出如下，可以看到dom对象的参数输出

3.2 访问和修改内容

即获取或设置标签中的内容
两种方式：使用innerHTML、使用innerText

3.2.1 语法

访问用法如下，将内容解析为HTML

dom对象.innerHTML

或，将内容作为纯文本

dom对象.innerText

修改值用法如下

dom对象.innerHTML = "内容"

或

dom对象.innerText = "内容"

3.1.2 示例代码

3.1.3 浏览器输出

使用浏览器打开，
在这里插入图片描述

点一下访问内容，内容修改为
在这里插入图片描述

控制台输出如下
在这里插入图片描述

3.3 访问和修改css

即获取或设置css样式
两种方式：使用style属性、使用className属性

3.3.1 语法

访问css用法如下
使用style属性用法

dom对象.style.样式属性

使用className属性用法

dom对象.className

注意：
如果css属性中又短横线-，需要去掉短横线，然后将其后的单词首字母改成大写
对象标签中的class，需要使用className访问

修改css用法如下
使用style属性用法

dom对象.style.样式属性 = "值"

使用className属性用法

dom对象.className = "值"

3.3.2 示例代码

3.3.3 浏览器输出

使用浏览器打开
在这里插入图片描述
点一下访问CSS，效果如下

控制台输出如下
在这里插入图片描述

3.4 访问修改示例代码下载

访问和修改的示例代码已上传CSDN资源库
下载地址：JavaScript dom操作访问和修改元素示例代码

4. 添加替换操作

添加元素节点的方法如下表，包含了新建节点、添加节点、替换节点

4.1 方法列举

方法	含义
document.createElement(“tagName”)	创建一个元素节点，即标签
document.createTextNode(“textContent”)	创建一个文本节点，即标签中的文本内容
node.appendChild(newNode)	将一个新的节点newNode添加到指定的节点node中子节点的末尾
node.insertBefore(newNode,refNode)	将一个新的节点newNode插入到node节点的子节点refNode之前
node.replaceChild(newNode,refNode)	用一个新的节点newNode替换原有的node节点中的子节点refNode

4.2 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-添加</title>

    <!-- dom document object model 文档对象模型
     
    浏览器加载html页面时，会将html文档解析为一个树形结构，称为dom树
    
    html文档和dom树是一一对应的
    dom树被改变时，与之对应的html文档也会随之改变
    当需要对html中的内容进行动态改变时，可以使用dom进行操作
    dom提供了一组用来操作html文档的api，即提供一套属性、方法和事件
    树上的每一个节点都是一个dom对象，树的顶层为document对象，表示整个文档-->

    <script>
        
        function add(){
     
            //1 创建元素节点
            var li = document.createElement("li");

            //2 设置文本内容
            // var content = document.createTextNode("baijuyi");
            //添加到节点中
            // li.appendChild(content);

            li.innerText="add";

            // console.log(li);

            //3 设置属性
            li.setAttribute("id","f4")

            //4 添加到节点中
            var ul = document.getElementById("u11");
            ul.appendChild(li)

        }

        function insert(){
     
            //1 创建元素节点
            var li = document.createElement("li");

            //2 设置文本内容
            // var content = document.createTextNode("baijuyi");
            //添加到节点中
            // li.appendChild(content);

            li.innerText="insert-s2";

            // console.log(li);

            //3 设置属性
            li.setAttribute("id","f4")

            //4 添加到节点中
            var ul = document.getElementById("u11");

            //5 添加到某个节点的前面
            ul.insertBefore(li, document.getElementById("s2"));

        }

        function replace(){
     
            //1 创建元素节点
            var li = document.createElement("li");

            //2 设置文本内容
            // var content = document.createTextNode("baijuyi");
            //添加到节点中
            // li.appendChild(content);

            li.innerText="replace-t3";

            // console.log(li);

            //3 设置属性
            li.setAttribute("id","f4")

            //4 添加到节点中
            var ul = document.getElementById("u11");

            //6 替换某个节点
            ul.replaceChild(li, document.getElementById("t3"))



        }


    </script>

</head>
<body>


    <input type="button" value="add" onclick="add()">
    <input type="button" value="insert" onclick="insert()">
    <input type="button" value="replace" onclick="replace()">

    <ul id="u11">
        <li id="f1">libai</li>
        <li id="s2">dufu</li>
        <li id="t3">dumu</li>
    </ul>





    <!-- 添加操作：
     
    方法---含义
    document.createElement("tagName") 创建一个元素节点，即标签
    document.createTextNode("textContent") 创建一个文本节点，即标签中的文本内容
    node.appendChild(newNode) 将一个新的节点newNode添加到指定的节点node中子节点的末尾
    node.insertBefore(newNode,refNode) 将一个新的节点newNode插入到node节点的子节点refNode之前
    node.replaceChild(newNode,refNode) 用一个新的节点newNode替换原有的node节点中的子节点refNode

    -->


</body>
</html>

4.3 效果展示

使用浏览器打开页面，如下
在这里插入图片描述
元素界面

分别点击添加、插入、替换按钮进行查看效果

4.3.1 添加

点击add按钮后的页面
在这里插入图片描述
元素界面新增add

4.3.2 指定位置添加

点击insert按钮，页面如下
在这里插入图片描述
元素界面如下

4.3.3 替换

点击replace替换元素，页面如下
在这里插入图片描述
元素界面如下

4.4 添加替换元素示例代码下载

添加和替换元素的示例代码已上传至CSDN资源库
下载地址：JavaScript dom操作添加和替换元素示例代码

5. 删除操作

5.1 方法列举

删除方法的列举

方法	含义
node.remove()	删除当前节点
node.removeChild(refNode)	删除当前节点中指定的子节点

5.2 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-删除</title>

    <!-- dom document object model 文档对象模型
     
    浏览器加载html页面时，会将html文档解析为一个树形结构，称为dom树
    
    html文档和dom树是一一对应的
    dom树被改变时，与之对应的html文档也会随之改变
    当需要对html中的内容进行动态改变时，可以使用dom进行操作
    dom提供了一组用来操作html文档的api，即提供一套属性、方法和事件
    树上的每一个节点都是一个dom对象，树的顶层为document对象，表示整个文档-->

    <script>
        
        function del1(){
     
            //1 删除节点
            document.getElementById("f1").remove();
        }
        function del2(){
     
            //2 删除节点的另一种方式，上面可能更简单
            var ul = document.getElementById("u11");
            ul.removeChild(document.getElementById("s2"));
        }

        function del_last(){
     
            //2 删除节点的另一种方式，上面可能更简单
            var ul = document.getElementById("u11");
            //删除最后一个节点（使用这一行代码时请将上面的remove方法注掉），注意，需要删除两次才能删掉，因为文本内容的空格和换行符也是一个节点内容
            ul.removeChild(ul.lastChild);
        }

    </script>

</head>
<body>

    <input type="button" value="del1" onclick="del1()">
    <input type="button" value="del2" onclick="del2()">
    <input type="button" value="del_last" onclick="del_last()">

    <ul id="u11">
        <li id="f1">libai</li>
        <li id="s2">dufu</li>
        <li id="t3">dumu</li>
        <li id="t4">zhaosi</li>
        <li id="t5">wangwu</li>
        <li id="t6">wanger</li>
        <li id="t7">qiansun</li>
        <li id="t8">zhusi</li>
        <li id="t9">huanwu</li>
    </ul>

    <!-- 删除操作：
     
    方法---含义
    node.remove() 删除当前节点
    node.removeChild(refNode) 删除当前节点中指定的子节点
    -->
</body>
</html>

5.3 效果演示

使用浏览器打开页面，如图
在这里插入图片描述

5.3.1 remove方法删除

点击del1
使用remove直接指定某个元素删除，删除id为f1的元素
删除后如下
在这里插入图片描述

5.3.2 removeChild方法删除

使用removeChild方法删除元素
点击del2
删除id为s2的元素
删除后如下
在这里插入图片描述
然后删除最后一个元素，点击del_last，这里需要注意，要点两次才能删除成功，因为第一次删除的是标签外的空格和换行符（也会被作为一个元素）
删除后的结果如下

删除最后一个元素的方法的好处是可以一直删除，直到全部删除

5.4 删除元素示例代码下载

删除元素的示例代码已上传至CSDN资源库
下载地址：JavaScript dom操作删除元素示例代码

6. 趣味案例

制作一个搜索页面，将百度、搜狗、360三个搜索引擎集成进来，在搜索框中输入内容后可以选择不同浏览器搜索

6.1 效果图

制作后的界面如下图
在这里插入图片描述

6.2 搜索引擎的参数获取

这里需要注意，不同的搜索引擎使用的搜索链接和参数名称是不一样的，需要根据对应的链接和参数进行指定

6.2.1 百度的参数获取

在百度首页输入内容点击按钮百度一下搜索
在这里插入图片描述
右键后选择检查，或者快捷键F12
查看Network栏的参数如图所示可以看到百度的搜索引擎为https://www.baidu.com/s
问号?后面是参数，在参数里找到自己输入的内容libai，对应的wd就是搜索内容的key
记下两个参数：

搜索引擎地址

https://www.baidu.com/s

搜索内容的key

wd

在这里插入图片描述

6.2.2 搜狗的参数获取

参考百度参数的获取，获取搜狗的参数
在搜狗的主页搜索框输入libai并按搜索按钮进行搜索
在这里插入图片描述
打开检查界面Network栏进行参数查看
搜索引擎地址

https://www.sogou.com/web

搜索内容的key

query

在这里插入图片描述

6.2.3 360的参数获取

在360主页搜索libai
在这里插入图片描述

打开检查界面的Network栏查看搜索引擎的参数

搜索引擎地址

https://www.so.com/s

搜索内容的key

在这里插入图片描述

6.3 示例代码

代码实现如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-访问和修改的案例</title>

    <script>

        //定义函数用于根据选中的值进行修改对应的图标
        function change(){
     
            if($("baidu").checked){
     
                //修改logo
                $("logo").src="./baidu.png";
                //修改按钮
                $("btnSearch").value="百度搜索"
                //修改搜索引擎的网址
                $("searchEngine").action="https://www.baidu.com/s";
                //修改搜索引擎所用的参数key
                $("searchKey").name="wd";
            }else if($("360").checked){
     
                //修改logo
                $("logo").src="./360.png";
                //修改按钮
                $("btnSearch").value="360搜索";
                //修改搜索引擎的网址
                $("searchEngine").action="https://www.so.com/s";
                //修改搜索引擎所用的参数key
                $("searchKey").name="q";
            }else{
     
                //修改logo
                $("logo").src="./sogou.png";
                //修改按钮
                $("btnSearch").value="搜狗搜索";
                //修改搜索引擎的网址
                $("searchEngine").action="https://www.sogou.com/web";
                //修改搜索引擎所用的参数key
                $("searchKey").name="query";
            }
        }

        //定义一个函数用来获取元素对象
        function $(id){
     
            return document.getElementById(id);
        }


    </script>
    <style>
        /* 定义一个样式用于表单部分 */
        #logo{
     
            width: 30px;
            height: 30px;
        }
    </style>

</head>
<body>

    <input type="radio" name="search" id="baidu" checked onclick="change()"> <label for="baidu">baidu</label>
    <input type="radio" name="search" id="sogou" onclick="change()"> <label for="sogou" >sogo</label>
    <input type="radio" name="search" id="360" onclick="change()"> <label for="360" >360</label>
    <br><br><br>

    <!-- 根据百度搜索界面的代码可以看到搜索调的连接地址是  https://www.baidu.com/s 
                    而搜索内容是通过参数wd传入-->