DOM元素的获取和用法及三级联动

最新推荐文章于 2022-04-12 20:52:55 发布

wjj1209973939

最新推荐文章于 2022-04-12 20:52:55 发布

阅读量411

点赞数 1

文章标签： DOM 三级联动数组去重

本文链接：https://blog.csdn.net/wjj1209973939/article/details/73739784

版权

知识点一：数组的三种创建方法
1.var arr1=[]; //构建一个空数组（字面量方式）
2.var arr2=new Array(10); //构建一个长度为10的数组（对象方式）
3.var arr3=new Array(1,2,3,4,5); //直接将元素写进数组(对象方式)

知识点二：三级联动(数组的使用方式)
1.将数据动态绑定到元素：Option(文本值,value值)。
2.对象往元素追加，用到的语法：appendChild();
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select id="s" οnchange="select_s()">
<option value="">-请选择省-</option>
</select>
<select id="city" οnchange="select_city()">
<option value="">-请选择市-</option>
</select>
<select id="q">
<option value="">-请选择区-</option>
</select>
<script>
//在远程服务端获取的数据格式为数组型
//定义一个省的数据
var s_list=["陕西省","山西省","甘肃省"];
//创建一个市的数据
var city_list=[
["西安市","宝鸡市","渭南市"],
["太原市","运城市","大同市"],
["兰州市","天水市","酒泉市"]
]
//创建一个区的数据
var q_list = [
[
["西安市1", "西安市2"], ["宝鸡市1", "宝鸡市2"], ["渭南市1", "渭南市2"]
],
[
["太原市1", "太原市2"], ["运城市1", "运城市2"], ["大同市1", "大同市2"]
],
[
["兰州市1", "兰州市2"], ["天水市1", "天水市2"], ["酒泉市1", "酒泉市2"]
]
]
//获取省，市，区元素
var os=document.getElementById("s");
var ocity=document.getElementById("city");
var oq=document.getElementById("q");
//1.将数据动态绑定到元素
//实例化对象 new
// Option(文本值,value值)
for(var i=0;i<s_list.length;i++){
var option=new Option(s_list[i],i);
//对象往元素追加用到的语法 appendChild（）
os.appendChild(option);
}
//选择省，调用市
var quinfo;
function select_s(){
ocity.options.length=1;
var index=os.value;
quinfo=q_list[index];
var city_info=city_list[index];
for (var i = 0; i < city_info.length; i++) {
var option = new Option(city_info[i], i);
city.appendChild(option);
}
}
//选区
function select_city(){
oq.options.length=1;
var index=ocity.value;
var qu=quinfo[index];
for (var i = 0; i < qu.length; i++) {
var option = new Option(qu[i], i);
oq.appendChild(option);
}
}
</script>
</body>
</html>

知识点三：DOM元素的获取方式
1.document.getElementsByClassName(" "); //通过类名称获取元素
2.document.getElementById(""); //通过ID名称来获取元素
3.document.getElementsByTagName(""); //通过元素的标签名称来获取

知识点四：常用的HTML DOW方法
1.追加元素：appendChild()；
2.操作DOM元素移除子节点removeChild();
3.parentNode() 属性直接是当前元素的父节点;
4.childNodes() 属性里面元素,文本都算子节点;
5.创建文本节点：createTextNode("你好");
6.nextSibling(); //下一个同胞
7.previousSibling(); //上一个同胞兄弟

知识点五：产生10个不同的1-100的随机数并进行排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var array=[];
function getRandom(start,end){
var dis=end-start+1;
return Math.floor(Math.random()*dis)+start;//1-100
}
for( var i=0;i<10;i++){
array.push(getRandom(1,100));
}

function sortNum(a,b){
return a-b;//升序排列
//return b-a;//降序排列
}
var result=array.sort(sortNum);
document.write("排序后数组为："+result);
</script>
</body>
</html>

知识点六：数组去重，并统计元素个数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var array = [1, 1, 1, 2, 2, 3, 2, 5, 6, 4, 4, 5, 2, 3, 5, 2, 4, 5, 6, 8, 9, 7, 9, 7, 7, 8, 9];
var arr = [];
var test = [];
var temp = "";
var num = 1;
var len = array.length;
for(var i = 0; i < len; i++) {
for(var j = i + 1; j < len; j++) {
if(array[i] === array[j]) {
temp = array[j];
array[j] = array[len - 1];
array[len - 1] = temp;
len--;
j--;
num++;
}
}
test[i]=num;
num=1;
arr[i]=array[i];
}
for(var i=0;i<arr.length;i++){
document.write("元素"+arr[i]+"个数为："+test[i]+"<br/>")
}
</script>
</body>
</html>

wjj1209973939

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM元素的获取和用法及三级联动

知识点一：数组的三种创建方法 1.var arr1=[]; //构建一个空数组（字面量方式） 2.var arr2=new Array(10); //构建一个长度为10的数组（对象方式） 3.var arr3=new Array(1,2,3,4,5); //直接将元素写进数组(对象方式) 知识点二：三级联动(数组的使用方式) 1.将数据动态绑定到元素：Opt
复制链接

扫一扫