JavaScript学习手册十四：HTML DOM——文档元素的操作（二）

超、凢脫俗 2023-01-16 06:29 94阅读 0赞

### HTML DOM——文档元素的操作 ###

*  1.创建节点
 *   *  任务描述
     *  相关知识
     *   *  创建节点
         *  代码文件
 *  2.插入节点
 *   *  任务描述
     *  相关知识
     *   *  插入节点
         *  代码文件
 *  3.删除节点
 *   *  任务描述
     *  相关知识
     *   *  删除节点
         *  代码文件
 *  4.替换节点
 *   *  任务描述
     *  相关知识
     *   *  替换节点
         *  代码文件
 *  5.综合练习
 *   *  任务描述
     *  相关知识
     *   *  下拉列表的级联
         *  代码文件

# 1.创建节点 #

## 任务描述 ##

**1.本关任务：创建一个表单`<form>`节点。**

**2.具体要求如下：**

*  创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示：

*  字符串类型参数用""包含在内。

## 相关知识 ##

有的时候，我们需要往页面动态的添加文档元素（节点），比如根据省份的不同展现不同的城市列表，在添加节点之前需要先创建该节点。

### 创建节点 ###

> `document.createElement("tagName")`用来创建一个新的Element节点（即文档元素），返回值是新创建的节点，tagName是标签的名字，比如a、p、img等，需要注意的是它不区分大小写。

比如创建一个新的超链接节点：

var newA = document.createElement("a");//创建超链接节点
    newA.src = "https://www.educoder.net";//设置超链接的目的地址

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <p></p>
        <script>
        	
            
            
            var newNode = document.createElement('form');
            newNode.method='post';
            newNode.id='myForm';
    
            
    		document.body.appendChild(newNode);
            console.log(newNode.method);
        </script>
    </body>
    </html>

# 2.插入节点 #

## 任务描述 ##

*  ul标签在html中表示无序列表，li标签标识其中的列表项。

**1.本关任务：在无序列表中插入新的列表项。**

**2.具体要求如下：**

*  使用createElement方法创建一个li类型的新节点newNode；
 *  通过innerText方法设置该节点内部文本的内容为Canada；
 *  通过getElementById和appendChild方法将newNode节点添加到ul标签下面，作为它的最后一个子节点；
 *  所有的字符串类型参数请用""包含在内；

## 相关知识 ##

*  插入节点：插入一个新的文档元素。

最常见的应用就是在`<select>`标签里插入一个新的`<option>`标签。

### 插入节点 ###

两种可选的方法：

*  **方法1appendChild()**
 *  `node1.appendChild(node2)`表示将node2插入到node1的最后一个子节点中。

比如原来的选择框是这样：

要把它变成这样：

实现代码如下：

var node1 = document.getElementById("s1");
    var node2 = document.createElement("option");
    node2.innerText = "湘潭";
    node1.appendChild(node2);

*  **方法2insertBefore()**
 *  `pNode.insertBefore(node1,node2)`：将node1插入作为pNode的子节点，并且node1排在已存在的子节点node2的前面。

比如要把最开始的复选框变成这样：

我们需要像下面这样操作节点:

var pNode = document.getElementById("s1");
    var node1 = document.createElement("option");
    node1.innerText = "湘潭";
    var node2 = document.getElementById("zz");
    //将内容为"湘潭"的节点插入到内容为"株洲"的节点前面
    pNode.insertBefore(node1,node2);

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <ul id="ul1">
            <li>America</li>
            <li>Mexio</li>
        </ul>
        <script>
        	
            
            var node = document.getElementById('ul1');
            var newNode = document.createElement('li');
            newNode.innerText='Canada';
            node.appendChild(newNode);
    
            
            var out = document.getElementsByTagName("li")[2];
            console.log(out.innerText);
        </script>
    </body>
    </html>

# 3.删除节点 #

## 任务描述 ##

*  ol标签在html中表示有序列表，li标签表示其中的列表项。

**1.本关任务：在有序列表中删除指定的列表项。**

**2.要求按照步骤进行：**

*  获取id为browser的节点，赋值给变量parent;
 *  获取id为opera的节点，赋值给变量child；
 *  通过removeChild方法删除child节点；
 *  获取节点使用getElementById方法；
 *  字符串类型参数用""包含在内。

## 相关知识 ##

这里的删除节点指的是：父元素删除自己的子元素。

### 删除节点 ###

*  删除节点的方法是`removeChild()`，调用者是父节点，参数是子节点，作用是删除这个子节点。

下面是一个无序列表的代码：

用浏览器打开这个文件，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]  
如果我们要删除第三行，可以这样操作：

**第一步：获取父节点，即ul节点：**

var parentNode = document.getElementById("parent");

**第二步：获取待删除的子结点：**

var childNode = document.getElementById("child3");

**第三步：父节点调用removeChild()方法删除子节点：**

parentNode.removeChild(childNode);

执行完这三个js语句后，再次用浏览器打开，结果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <ol id="browser">
            <li id="chrome">Chrome</li>
            <li id="firefox">Firefox</li>
            <li id="opera">Opera</li>
            <li id="safari">Safari</li>
        </ol>
        <script>
        	
            
            var parent = document.getElementById("browser");
            var child = document.getElementById("opera");
            parent.removeChild(child);
    
            
        </script>
    </body>
    </html>

# 4.替换节点 #

## 任务描述 ##

1.本关任务：**替换指定的节点**。

2.具体要求如下，请按步骤操作：

*  获取id为parent的节点（父节点），赋给变量parent；
 *  获取id为old的节点（子节点），赋给变量old；
 *  newChild已知，用newChild替换子节点old；
 *  使用getElementById方法获取节点；
 *  字符串参数用""包含在内。

## 相关知识 ##

一般来说，`替换节点=删除节点+新增节点`，可以用前面介绍的知识结合起来实现，当然，js提供了replaceChild()方法一次完成替换。

### 替换节点 ###

`replaceChild(a,b)`的调用者是要被替换的节点的父节点，a是新的节点，b是被替换的节点。

以无序列表为例：

要替换掉第三个子节点，过程如下：

**第一步，获取父节点：**

var parNode = document.getElementById("parent");

**第二步，获取要被替换的子节点：**

var oldNode = document.getElementById("child3");

**第三步，创建新节点：**

var newChild = document.createElement("li");
    newChild.innerText = "武夷山";

**第四步，替换：**

parNode.replaceChild(newChild,oldNode);

替换前后的效果对比：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]

### 代码文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <ol id="parent">
            <a id="old" href="https://www.google.com">Google</a>
        </ol>
        <script>
            var newChild = document.createElement("a");
            newChild.innerText = "eduCoder";
            newChild.href = "https://www.educoder.net";
            
            
            var parent = document.getElementById("parent");
            var old = document.getElementById("old");
            parent.replaceChild(newChild,old);
            
            
        </script>
    </body>
    </html>

# 5.综合练习 #

## 任务描述 ##

1.本关任务：**练习节点的操作**。

2.具体要求如下：

*  继续拓展相关知识中介绍的功能，要求第一列选择安徽省后，第二列下拉的选项中出现黄山市和合肥市两个选项，按照以下步骤进行；
 *  创建一个option类型节点child2；
 *  设置child2的value属性的值为HeFeiCity；
 *  设置child2的显示的文本为合肥市;
 *  将child2设置为id为city的节点下面的第二个子节点；
 *  使用getElementById方法获取节点；
 *  字符串类型的参数用""包含在内。

## 相关知识 ##

综合前面学习过的节点的各种操作，可以实现很复杂的功能。

### 下拉列表的级联 ###

相信大家都见过这样的下拉框：  
![在这里插入图片描述][20210424145841426.png]  
它有三列，每一列都会根据前一列的结果动态的改变自己的可选项，称为下拉框的级联，那么如何实现呢？

**第一步：静态的HTML的代码如下（简单起见，只考虑前两列）：**

*  select表示选择框，option表示选择框里面的每一个选项，`onChange="changeCity()"`表示一旦改变当前的选项，就会触发JavaScript函数changeCity()的执行。
 *  对于这个静态的HTML页面，不论你在第一列选择的是北京还是安徽，第二列的选项都只有北京市一项。

**第二步：获取两个选择框对应的节点元素  
（以下的所有代码都是changeCity()函数里面的内容）：**

var province = document.getElementById("province");
    var city = document.getElementById("city");

*  province变量代表第一列的选择框，city变量代表第二列的选择框。

**第三步：清空第二列中的所有内容；  
根据第一列的选择结果改变第二列的内容，就是根据父节点的不同替换不同的子节点，我们采用先删除后新增的方法实现替换：**

var length = city.children.length;
    for(var i = length-1;i >= 0;i--) { 
        city.removeChild(city.children[i]);
    }

*  在for循环里面，依次删除city节点下面的所有子节点。
 *  需要注意的是，**每删除一个子节点后，表示子节点个数的属性city.children.length都会自动减1**，所以我们需要在for循环开始之前索取子节点的长度。

**第四步：根据父节点的不同新增不同的子节点：**

if(province.value == "BeiJing") { 
        var child1 = document.createElement("option");
        child1.value ="BeiJingCity";
        child1.innerText="北京市"
        city.appendChild(child1);
    } else { 
        var child1 = document.createElement("option");
        child1.value="HuangShanCity";
        child1.innerText="黄山市";
        city.appendChild(child1);
    }

*  province.value表示第一列选中的选项的值，即选中的option标签的value的值。
 *  如果第一列选择的是北京，我们需要增加一个选项为北京市的option节点，这个节点将作为city的子节点。如果第一列选择的是安徽，我们需要增加一个选项为黄山市的option节点，这个节点将作为city的子节点。
 *  value属性表示option标签的值，innerText表示option标签呈现出来的值。

### 代码文件 ###

<html>
    <head>
    <title>myTitle</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <select id="province" onChange="changeCity()">
    	<option value="BeiJing" id="bj">北京</option>
        <option value="AnHui" id="ah">安徽</option>
    </select>
    <select id="city">
        <option value="BeiJingCity">北京市</option>
    </select>
    <script>
    function changeCity() { 
        var province = document.getElementById("province");
        var city = document.getElementById("city");
        var length = city.children.length;
        for(var i = length-1;i >= 0;i--) { 
            city.removeChild(city.children[i]);
        }
        if(province.value == "BeiJing") { 
            var child1 = document.createElement("option");
            child1.value="BeiJingCity";
            child1.innerText="北京市"
            city.appendChild(child1);
        } else { 
            var child1 = document.createElement("option");
            child1.value="HuangShanCity";
            child1.innerText="黄山市";
            city.appendChild(child1);
            //请在此处编写代码
            /*********Begin*********/
            var child2 = document.createElement("option");
            child2.value="HeFeiCity";
            child2.innerText="合肥市";
            city.appendChild(child2);
    
            /*********End*********/
        }
    }
    </script>
    </body>
    </html>

> 【做题的过程中，发生了很多次单词拼写错误哦，大家一定要细心，可不要学我，找了半天的错，结果是一个字母错了】
> 
> > \-----------------------------------------一日句子：  
> > “我们是否知道我们心中的风筝到底在什么地方，人生错过就不会再得到，也许我们会忏悔，会救赎，但这些似乎都已经晚了，每当天空放飞起风筝的那一刻，我们是不是应该问问自己我们是否真的珍惜我们所拥有的一切。”  
> > ——卡勒德·胡赛尼《追风筝的人》

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20221022/bfe94863cd184e54b74560a3f7576c13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/093aa4e75b4e4fbc96f991d67a016fb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: /images/20221022/54076408f1cb415f9a1612a2be7d160b.png
[20210424145841426.png]: /images/20221022/00f4b28f95594ad8a12d632670036dcb.png

JavaScript学习手册十四：HTML DOM——文档元素的操作（二）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读