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

最新推荐文章于 2022-07-31 05:00:00 发布

少年游四方

最新推荐文章于 2022-07-31 05:00:00 发布

阅读量9.6k

点赞数 30

分类专栏： # Web技术应用基础——javascript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_45823118/article/details/116090662

版权

Web技术应用基础——javascript 专栏收录该内容

11 篇文章 59 订阅

订阅专栏

1.创建节点

任务描述

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

2.具体要求如下：

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

<form id="myForm" method="post"></form>

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

2.插入节点

任务描述

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

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

2.具体要求如下：

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

3.删除节点

任务描述

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

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

2.要求按照步骤进行：

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

4.替换节点

任务描述

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

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

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

5.综合练习

任务描述

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

2.具体要求如下：

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

相关知识

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

下拉列表的级联

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

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

<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>

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>

【做题的过程中，发生了很多次单词拼写错误哦，大家一定要细心，可不要学我，找了半天的错，结果是一个字母错了】

-----------------------------------------一日句子：
“我们是否知道我们心中的风筝到底在什么地方，人生错过就不会再得到，也许我们会忏悔，会救赎，但这些似乎都已经晚了，每当天空放飞起风筝的那一刻，我们是不是应该问问自己我们是否真的珍惜我们所拥有的一切。”
——卡勒德·胡赛尼《追风筝的人》

少年游四方

关注

30
点赞
踩
50

收藏

觉得还不错? 一键收藏
打赏
3
评论
JavaScript学习手册十四：HTML DOM——文档元素的操作（二）

HTML DOM——文档元素的操作1.创建节点任务描述相关知识创建节点代码文件2.插入节点任务描述相关知识插入节点代码文件3.删除节点任务描述相关知识删除节点代码文件4.替换节点任务描述相关知识替换节点代码文件5.综合练习任务描述相关知识下拉列表的级联代码文件1.创建节点任务描述1.本关任务：创建一个表单<form>节点。2.具体要求如下：创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示：<form id
复制链接

扫一扫