前端笔记4 JS BOMDOM
2024-06-10 02:47:19
Bom
概念
Browser Object Model 浏览器对象模型
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
window对象
概念
称为 浏览器对象, 当浏览器打开一个 html 文档的时候, 通常会创建一个 window 对象
属性
| window对象属性 | 含义 |
|---|---|
| history | 历史- 表示客户访问过的历史记录(URL) |
| location | 当前页面 URL (网址) 信息 |
| screen | 只读属性, 包含有关客户端显示屏幕的有关信息 |
方法
| 方法名 | 说明 |
|---|---|
| 弹窗 alert | 警告框 (带有提示信息,和一个确定按钮) |
| 弹窗 confirm | 确认框 (带有提示信息, 和确认 与取消按钮的对话框) |
| 弹窗 prompt | 输入框 (可以使用对话框接收用户的输入信息) |
| close() | 关闭窗口功能 |
| open() | 打开一个新的浏览器窗口,加载指定URL 文档 |
| setTimeout() | 在指定毫秒数后执行指定函数(一次性) |
| setInterval() | 在指定毫秒数后执行指定函数(周期性) |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
弹窗案例
警告框
<button onclick="window.alert('有种再点我一次')">点我一下试试</button>
<button onclick="alert('有种再点我一次')">点我一下试试</button>
确认框
<button onclick="f1()">点我一下试试</button>
function f1(){// confirm 确认框 有返回值, 当点击确认的时候,返回true var boo = confirm('有种再点我一次');console.log(boo);
}
// 主要用处 删除按钮. 确认用户是否确定要删除function f1(){var boo = confirm('你确定要删除吗?');if(boo){console.log("删除成功!");}else{console.log("取消删除!");}
}
输入框
prompt(参数一,参数二) , 表示 提示信息 和 默认值
<button onclick="f1()">登录</button>function f1(){var pwd = prompt('请输入密码');console.log(pwd);
}
窗口案例
// 父页面
<button onclick="open_win()">打开页面</button>
function open_win(){window.open("test.html"); // 可以传递一些参数, 用于表示新窗口的样式
}// 子页面 test.html
<button onclick="close_win()">关闭页面</button>
function close_win(){window.close();
}
定时任务
setTimeout() 一次性定时任务
function open_win(){// 执行定时任务// window.setTimeout("要执行的函数",需要等待的毫秒数);window.setTimeout("window.open('test.html')",3000);
}
setInterval() 周期性任务
// 向浏览器中 输出一些小图片(每隔两秒钟输入一张图片)
function setInterval_print(){window.setInterval("document.write('<img src=\"a.gif\">')",2000);
}
setInterval_print();
撤销定时任务 clearInterval()
<button onclick="setInterval_print()">开启定时任务</button>
<button onclick="clearInterval_print()">关闭定时任务</button>var num;
function setInterval_print(){// 返回值表示 该定时任务的一个编号num = window.setInterval("console.log('123')",200);
}
function clearInterval_print(){// 取消 编号为num的定时任务window.clearInterval(num);
}
history
| history 方法 | 说明 |
|---|---|
| back() | 加载history 对象列表中 前一个 URL |
| forward() | 加载history 对象列表中 后一个 URL |
| go(参数) | 加载history 对象列表中 指定的一个 URL |
back() forward()
<button onclick="history.back()">返回到上一个页面</button><br><br>
<button onclick="history.forward()">加载到一个页面</button>
<h1>A 页面</h1>
<a href="b.html">B页面</a>
go()
<button onclick="history.back()">返回到上一个页面</button><br><br>
<button onclick="history.forward()">加载到一个页面</button>
/*******相当于********/
<button onclick="history.go(-1)">返回到上一个页面</button><br><br>
<button onclick="history.go(1)">加载到一个页面</button><button onclick="history.go(-2)">返回到上两层页面</button><br><br>
<h1>B 页面</h1>
location
| 属性方法 | 名称 | 说明 |
|---|---|---|
| 属性 | host | 主机号,url 端口号 |
| 属性 | hostname | 主机名 |
| 属性 | href | 返回完整URL |
| 方法 | reload() | 重新加载当前文档 |
| 方法 | replace() | 用新文档替换当前文档 |
获取属性案例
console.log(window.location.host);
console.log(window.location.hostname)
console.log(window.location.href);
// 需要使用 webStorm 内置服务器打开页面
设置属性
location.href 直接获取
location.href = “”; 设置新网址
window.location.href = "URL地址"; 跳转页面到指定地<button onclick="changeURL()">改变网页地址</button>
<br>
<br>
<a href="http://www.baidu.com">百度首页</a>function changeURL(){//改变页面网址, 类似于 使用a链接 跳转页面window.location.href = "http://www.baidu.com";
}
方法案例
<script>document.write(new Date());document.write("<br/>");document.write("<br/>");function changeDate(){//刷新页面window.location.reload();}
</script><button onclick="changeDate()">改变时间</button>
Dom 文档模型
DOM 文档对象模型
基于文档编程的一组API 接口
是W3C组织 编写的一组规范, 允许访问和操作 HTML 页面中每一个单独的元素
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
类似于一个上帝视角, 可以对看到的每一个元素, 进行操作
下棋 没有棋盘 , 定位某一个旗棋子的位置
document 文档对象
获取节点对象的常用方法
| 常用方法 | 方法含义 |
|---|---|
| write() | 向文档书写文本, html标签 甚至 script 脚本 |
| getElementById() | 返回 指定ID的第一个对象的引用 |
| getElementsByName() | 返回所有该名称属性的对象集合 |
| getElementsByTagName() | 返回所有该标签名称的对象集合 |
事件和 Dom 联动
行内方法联动
<body><button onclick="f1()">点击</button>
</body>
<script>function f1(){// 执行代码}
</script>
对象联动
<body><button >点击</button>
</body>
<script>var button = document.getElementsByTagName("button")[0];// 对象.事件 = 函数, (只能写函数名, 不能加括号)// button.onclick = f1(); //错误button.onclick = f1; // 正确//错误的原因 当程序运行到 f1() 认为 是函数的调用 , 直接执行 f1 函数function f1(){alert(123);}
</script>
匿名函数
<script>var button = document.getElementsByTagName("button")[0];// 对象.事件 = 匿名函数button.onclick = function (){alert(123);}
</script>
this 关键字
button.onclick = function (){// this 指代当前对象alert(this.innerHTML);
}
DOM 节点
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子节点
- 同胞是拥有相同父节点的节点 (兄弟节点)
节点分类
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
每一个节点 都有相同的属性
nodeName
nodeValue
nodeType 类型编号
| 分类(类型) | nodeType 值 |
|---|---|
| 元素 Element | 1 |
| 属性 attr | 2 |
| 文本 text | 3 |
| 注释节点 comments | 8 |
| 文档节点document | 9 |
<html><!-- 注释 --><head><meta charset="UTF-8" /><title >标题</title></head>
</html>
节点的属性
| 属性名称 | 描述 |
|---|---|
| parentNode | 获取该节点的父节点 |
| childNodes | 获取所有子节点的集合 |
| firstChild | 获取该节点的第一个子节点(最常用的是获取元素的文本节点) |
| lastChild | 获取最后一个子节点 |
| nextSibling | 下一个节点 (兄弟节点) |
| previousSibling | 上一个节点 |
通常使用 firstChild 想要获取元素节点 但是有可能 会被 空格 换行之类的内容影响, 所以需要换成
| 避免空格影响 | |
|---|---|
| firstElementChild | 获取第一个子节点, 元素节点(标签节点) |
| lastElementChild | |
| nextElementSibling | |
| previousElementSibling |
案例
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
</body>
<script>// 根据标签获取对象 , 标签可以重复, 对象是一个集合var arr = document.getElementsByTagName("html");// 获取集合中的第一个对象var obj = arr[0];var children = obj.childNodes;// console.log(children);for(var i in children){console.log(children[i].nodeName + "\t"+children[i].nodeType);}
</script>
</html>
<body><div class="dv"><p id="pid"></p></div>
</body>
<script>var dvs = document.getElementsByClassName("dv");// console.log(dvs[0].firstChild);// console.log(dvs[0].lastChild);// 使用 firstChild 用可能 会被 空格 换行之类的内容影响, 所以需要换成console.log(dvs[0].firstElementChild);console.log(dvs[0].lastElementChild);
</script>
</html>
获取标签属性
获取节点属性 getAttribute(“属性名”);
设置节点属性 setAttribute(“属性名”,“属性值”);
<body><input type="text"><br/><br/><input type="button"><button onclick="fun()">改变样式</button>
</body>
<script>function fun(){// 获取input 节点对象var ipt = document.getElementsByTagName("input")[0];console.log(ipt.getAttribute("type"));var ipt1 = document.getElementsByTagName("input")[1];console.log(ipt1.getAttribute("type"));ipt1.setAttribute("type","date");}
</script>
获取标签文本
表单元素 value
<body><input type="text" ><input type="radio" value="男" name="sex">男<input type="radio" value="女" name="sex">女<select name="" id=""><option value="青岛">青岛</option><option value="济南">济南</option></select>
</body>
<script>var set = document.getElementsByTagName("select")[0];set.onchange = function(){alert(set.value);}// 两个焦点事件var ipt = document.getElementsByTagName("input")[1]// 光标从 输入框移除的时候ipt.onblur = f1;function f1(){alert(ipt.value);}
/*ipt.onfocus = f2;function f2(){alert("focus");}*/
</script>
普通标签 innerHTML
<p><b>123</b></p>
<button>点击切换 p 标签中的内容</button>var btn = document.getElementsByTagName("button")[0];
var p = document.getElementsByTagName("p")[0];
btn.onclick = function (){// innerHTML 获取 标签之内的所有内容// alert(p.innerHTML); // <b>123</b>p.innerHTML = "切换完成";
}
innerText
// innerText 只获取文本 不获取标签
alert(p.innerText); // 123
创建节点,插入节点,删除和替换节点
| 节点操作方法 | |
|---|---|
| createElement(“标签名”) | 创建一个新元素节点 |
| A.appendChild(B) | 把B 标签 添加到 A 标签的(内部)尾部 |
| insertBefore(A,B) | 把A节点添加到B节点之前 |
| cloneNode(A) | 复制节点A |
| A.removeChild(B) | 从A节点中删除节点B |
| replaceChild(A,B) | 使用新节点A 替换 旧节点B |
案例1
<body>选择你喜欢的书:<input type="radio" name="book" onclick="add1()">我和狗狗一起活下来<input type="radio" name="book" onclick="add2()">灰霾来了怎么办<br><br>
</body><script>function add1(){// <img src="data:images/dog.jpg" alt="">// 1- 创建一张图片 对象var img = document.createElement("img"); // <img />// 2- 设置图片的属性为 一个图片路径img.setAttribute("src","images/dog.jpg"); // <img src="data:images/dog.jpg">// 3- 把图片添加到body 网页中var body = document.getElementsByTagName("body")[0];body.appendChild(img);}function add2(){// <img src="data:images/dog.jpg" alt="">// 1- 创建一张图片 对象var img = document.createElement("img"); // <img />// 2- 设置图片的属性为 一个图片路径img.setAttribute("src","images/mai.jpg"); // <img src="data:images/dog.jpg">// 3- 把图片添加到body 网页中var body = document.getElementsByTagName("body")[0];body.appendChild(img);}</script>
案例2
<body><h1>微博发布系统</h1><br><br><textarea name="" id="" cols="30" rows="10"></textarea><br><button onclick="submit_1()">发布</button><hr><ul><li>2018年 已成为历史</li></ul><script>function submit_1(){/*1- 获取到用户输入的内容2- 把用户输入的内容 添加到之后的ul列表中(新添加的内容 优先显示)*/// 获取textarea 对象var area = document.getElementsByTagName("textarea")[0];// 表单元素 使用 value 属性获取 元素内容// 创建li 对象var li = document.createElement("li"); // <li></li>// li 是 普通标签 非表单标签li.innerHTML = area.value; //<li>新添加的信息</li>// 添加元素到 列表var ul = document.getElementsByTagName("ul")[0];/*ul.appendChild(li);*/// 获取 ul 中的第一个元素// 把 li 插入到 ul 中的第一个元素之前ul.insertBefore(li,ul.firstElementChild);}</script>
</body>
案例3
<body>
<ul><li id="first"><img src="data:images/f01.jpg" ><p><button onclick="del()">删除我吧</button></p></li><li id="second"><img src="data:images/f02.jpg" ><p><button onclick="rep()">替换我吧</button></p></li>
</ul>
</body>
<script>function del(){// 获取第一个 li 对象var first = document.getElementById("first");// 获取li 中的 img 对象var li = first.firstElementChild;// 移除first.removeChild(li);}function rep(){var second = document.getElementById("second");// 先创建一个img 对象var img = document.createElement("img");img.setAttribute("src","images/f04.jpg");// 使用新对象替换旧对象second.replaceChild(img,second.firstElementChild);}</script>
操作节点样式
对象.style.样式属性
案例1 购物车案例 , 鼠标指向显示列表, 鼠标移除, 列表隐藏
<body>
<section id="shopping"><div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div><div id="cartList"><h2>最新加入的商品</h2><ul><li><img src="data:images/makeup.jpg"></li><li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li><li>¥558.00×1<br/>删除</li></ul><div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div></div>
</section>
</body>
<script>function over(){// 获取 cartList 对象var cartList = document.getElementById("cartList");var cart = document.getElementById("cart");// 把该对象的样式切换为 blockcart.style.borderBottom = "none";cart.style.backgroundColor = "#fff";cart.style.zIndex = 100; // 图层级别很高cartList.style.display = "block";cartList.style.position = "relative";cartList.style.top = "-1px";}function out(){// 获取 cartList 对象var cartList = document.getElementById("cartList");// 把该对象的样式切换为 nonecartList.style.display = "none";}</script>
*{margin: 0;padding: 0; font-family: "Arial", "微软雅黑"; font-size: 12px; line-height: 25px;}
ul,li{list-style: none;}
#shopping{margin: 20px auto 0 auto; width: 320px;
}
#cart{background: #f9f9f9 url("../images/cart.png") 20px 6px no-repeat;border: solid 1px #dcdcdc;float: right;width: 100px;height: 28px;padding-left: 45px;line-height: 28px;position: relative;cursor: pointer;
}
#cart span{position: absolute;color: #fff;background: #dc1742;display: block;width: 15px;height: 15px;border-radius: 50%;top:-5px;right: 20px;font-size: 8px;line-height: 15px;text-align: center;
}
#cartList{width: 310px; float: right; border: solid 1px #dcdcdc; display: none;}
#cartList h2{border-bottom: 1px dashed #cccccc; font-size: 14px; padding-left: 10px;}
#cartList li{float: left;}
#cartList li:nth-of-type(1){width: 65px; text-align: center;}
#cartList li:nth-of-type(2){width: 155px;}
#cartList li:nth-of-type(3){text-align: center; width: 85px;}
#cartList .footer{clear: both; height: 35px; line-height: 35px; background: #f5f5f5; padding:0 5px;}
#cartList .footer span{padding: 0 12px;}
#cartList .footer span:nth-of-type(2){color: #fff;background: #dc1742;display: block;height: 25px;border-radius: 6px;float: right;text-align: center;font-weight: bold;margin-top: 5px;
}#shopping .cartOver{background-color: #ffffff;z-index: 100;border-bottom: none;
}
#shopping .cartListOver{display:block;position:relative;top:-1px;
}
#shopping .cartOut{background-color:#f9f9f9;border-bottom:solid 1px #dcdcdc;
}
#shopping .cartListOut{display:none;
}
案例优化 使用 className 优化
<script>function over(){// 获取 cartList 对象var cartList = document.getElementById("cartList");var cart = document.getElementById("cart");// 把该对象的样式切换为 blockcart.className = "cartOver";cartList.className = "cartListOver";}function out(){// 获取 cartList 对象var cartList = document.getElementById("cartList");var cart = document.getElementById("cart");// 把该对象的样式切换为 nonecartList.className = "cartListOut";cart.className = "cartOut";}</script>
操作位置属性
scrollTop scrollLeft
获得滚动轴的位置
<script>// 当 页面 滚动轴 移动的时候 触发事件window.onscroll = f1;
// 获取到 滚动轴的位置var top1;var left1;function f1(){/*top1 = parseInt(document.documentElement.scrollTop || document.body.scrollTop);console.log(top1);*/left1 = parseInt(document.documentElement.scrollLeft || document.body.scrollLeft);console.log(left1);}
</script>
案例
隔行换色
// 隔行换色功能
/*
1- 获取所有li 对象
2- 如果是奇数行 设置为一个颜色, 偶数行 相反*/
var arr = document.getElementsByTagName("li");
for(var i in arr){if(i % 2 == 0){arr[i] .style.backgroundColor = "skyblue";}else{arr[i] .style.backgroundColor = "pink";}
}
鼠标指向高亮显示
第一种
var lis = document.getElementsByTagName("li");
for(let i in lis){// 给每一个li 添加事件lis[i].onmouseover = function (){lis[i].style.backgroundColor = "gold";}lis[i].onmouseout = function (){lis[i].style.backgroundColor = "#fff";}
}
第二种
// 给每一个li 添加 样式 给他的所有兄弟修改颜色
var lis = document.getElementsByTagName("li");
for(let i in lis){// 给每一个li 添加事件lis[i].onmouseover = function (){// alert(123);// 其他所有标签全部变为白色for(let k in lis){if(k == i){lis[k].style.backgroundColor = "gold";}else{lis[k].style.backgroundColor = "white";}}}
}
全选全不选案例/反选案例
<body><input type="checkbox" name="hobby">抽烟<br><input type="checkbox" name="hobby">喝酒<br><input type="checkbox" name="hobby">烫头<br><input type="checkbox" name="hobby">学Java<br><input type="checkbox" name="check" >全选/全不选<input type="checkbox" name="reverse">反选</body>
<script>// 1- 获取所有的hobby 的 标签对象// 2- 获取全选和全不选框的选择状态// 3- 给全选框添加点击事件// 4- 更改 所有hobby的状态 和 check的状态保持一致// 1var hobbies = document.getElementsByName("hobby");// 2 html 中 如果给标签添加 checked 属性 默认选中var check01 = document.getElementsByName("check")[0];// alert(check01.checked); 选中状态 是 true , 非选中状态为 false// 3check01.onclick = function(){// 4for(let i in hobbies){hobbies[i].checked = check01.checked;}}// 反选步骤// 1- 给反选按钮添加点击事件// 2- 把所有 hobby 的 状态修改为相反的状态var reverse = document.getElementsByName("reverse")[0];reverse.onclick = function(){for(let i in hobbies){hobbies[i].checked = !hobbies[i].checked;}}
</script>
图片轮播器
<body><div class="main"><img src="img/left.png" alt="" id="left"><img src="img/right.png" alt="" id="right"><img src="img/1.jpg" alt="" id="content"></div>
</body>
样式
div{height: 400px;width: 600px;margin: 0 auto;position: relative;}#left,#right{position: absolute;width: 50px;height: 50px;top: 175px;}#left{left: 10px;}#right{right: 10px;}#content{width: 100%;height: 100%;}
</style>
JS 控制 手动切换
<script>// 1- 左右两个图标 需要添加点击事件// 2- 每一次点击需要切换图片, 实际上就是修改图片的src 属性var left = document.getElementById("left");var right = document.getElementById("right");var content = document.getElementById("content");// 3- 因为图片 的名称 是 从1-11 的 修改src 属性就是修改这些 数字// 设置当前图片的 图片数字名称为 countvar count = 1;right.onclick = next;left.onclick = pre;function next(){// 每一次向右切换 count + 1count++;// 如果超出第十一张图片, 就需要重新回到第一张if(count > 11){count = 1;}content.src = "img/"+count+".jpg";}function pre(){count--;// 如果图片小于 1if(count < 1){count = 11;}content.src = "img/"+count+".jpg";}// 定时任务完成自动切换window.setInterval("next()",1500);</script>
定时任务功能, 鼠标移入停止切换, 移除继续切换
var main = document.getElementsByClassName("main")[0];
// 定时任务完成自动切换
var no;
function start(){no = window.setInterval("next()",1500);
}
start();
main.onmouseover = function(){clearInterval(no);
}
main.onmouseout = function(){start()
}
使用按钮控制 表格的添加
分析步骤
// 1- 获取到用户在输入框中输入的内容
// 2- 填充到表格分步
// 2-1 创建 4个td 对象, 把文本添加到td对象中
// 2-2 创建tr对象 , 把 td 添加到 tr 中
// 2-3 把tr 对象 添加到 table 中
案例准备
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 400px;margin: 0 auto;text-align: center;background-color: skyblue;}div>table{width: 100%;border-collapse: collapse;}table tr>td,table tr>th{border:1px solid black;}</style>
</head>
<body><!-- 学员统计 --><!--table>((tr>th*4)+(tr>td*4))--><div class="main"><table><caption>学员统计</caption><tr><th>学号</th><th>姓名</th><th>年龄</th><th>操作</th></tr><tr><td>10086</td><td>毕吉伦</td><td>25</td><td><button>删除</button></td></tr></table><hr><br>学号: <input type="text" name="sid"> <br><br>姓名: <input type="text" name="sname"> <br><br>年龄: <input type="text" name="sage"> <br><br><button id="btn"> 提交 </button></div>
</body>
</html>
JS 代码实现
<script>var btn = document.getElementById("btn");btn.onclick = btn_add;function btn_add() {// 1- 获取到用户在输入框中输入的内容var sid = document.getElementsByName("sid")[0];var sname = document.getElementsByName("sname")[0];var sage = document.getElementsByName("sage")[0];// 2- 填充到表格分步// 2-1 创建 4个td 对象, 把文本添加到td对象中var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");td1.innerText = sid.value;td2.innerText = sname.value;td3.innerText = sage.value;// 把删除按钮创建出来添加到第四个 td 中var but = document.createElement("button");but.innerText = "删除";// 给删除按钮添加事件, 点击事件, 移除当前行// 谁有权利移除一行 (父级标签可以移除子集标签)// 通过but 找到当前行对象but.onclick = function(){// but > td > trvar tr = this.parentNode.parentNode;// tr > table , 通过table 删除 trtr.parentNode.removeChild(tr);}td4.appendChild(but);// 2-2 创建tr对象 , 把 td 添加到 tr 中var tr = document.createElement("tr");tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);// 2-3 把tr 对象 添加到 table 中var table = document.getElementsByTagName("table")[0];table.appendChild(tr);}
</script>
二级联动案例
实例图片
环境准备
<body>省份: <select id="province"></select> 城市 : <select id="city"></select>
</body>
<script>// 创建省份数组var province = ["请选择", "北京", "上海", "天津", "重庆", "山东", "河南", "湖北", "湖南", "广东", "河北", "山西", "辽宁", "吉林", "内蒙古", "黑龙江", "江苏", "浙江", "安微", "福建", "江西", "四川", "贵州", "云南", "陕西", "甘肃", "青海", "广西", "西藏", "宁夏", "新疆", "海南", "香港", "澳门", "台湾"];var city = [[],["", "东城", "西城", "海淀", "朝阳", "丰台", "石景山", "通州", "顺义", "房山", "大兴", "昌平", "怀柔", "平谷", "门头沟", "密云", "延庆"],["", "黄浦", "浦东", "徐汇", "长宁", "静安", "普陀", "闸北", "虹口", "杨浦", "闵行", "宝山", "嘉定", "金山", "松江", "青浦", "奉贤", "崇明"],["", "和平", "河西", "南开", "河东", "河北", "红桥", "东丽", "津南", "西青", "北辰", "滨海新区"],["", "万州", "黔江", "涪陵", "渝中", "大渡口", "江北", "沙坪坝", "九龙陂", "南岸", "北碚", "渝北", "巴南", "长区", "江津", "合川", "永川", "南川", "綦江", "大足", "铜梁"],["", "济南", "青岛", "淄博", "枣庄", "东营", "烟台", "潍坊", "济宁", "泰安", "威海", "日照", "滨州", "德州", "聊城", "临沂", "菏泽", "莱芜"],["", "郑州", "开封", "洛阳", "平顶山", "安阳", "鹤壁", "新乡", "焦作", "濮阳", "许昌", "漯河", "三门峡", "商丘", "周口", "驻马店", "南阳", "信阳", "济源"],["", "武汉", "黄石", "十堰", "荆州", "宜昌", "襄阳", "鄂州", "荆门", "黄冈", "孝感", "咸宁", "仙桃", "潜江", "恩施", "神农架", "天门", "随州"],["", "长沙", "株洲", "湘潭", "衡阳", "邵阳", "岳阳", "常德", "张家界", "益阳", "娄底", "郴州", "永州", "怀化", "湘西"],["", "广州", "深圳", "珠海", "汕头", "佛山", "东莞", "中山", "潮州", "惠州", "湛江", "肇庆", "江门", "茂名", "韶关", "揭阳", "云浮", "梅州", "汕尾", "河源", "阳江", "清远"],["", "石家庄", "保定", "沧州", "衡水", "邢台", "邯郸", "张家口", "廊坊", "唐山", "秦皇岛", "承德"],["", "太原", "大同", "阳泉", "长治", "晋城", "朔州", "晋中", "运城", "忻州", "临汾", "吕梁"],["", "沈阳", "大连", "鞍山", "抚顺", "本溪", "丹东", "锦州", "营口", "阜新", "辽阳", "盘锦", "铁岭", "朝阳", "葫芦岛"],["", "长春", "吉林", "四平", "辽源", "通化", "白山", "白城", "松原", "延边", "长白山", "梅河口", "公主岭"],["", "呼和浩特", "包头", "乌海", "赤峰", "通辽", "鄂尔多斯", "呼伦贝尔", "巴彦淖尔", "乌兰察布", "兴安盟", "锡林郭勒", "阿拉善"],["", "哈尔滨", "齐齐哈尔", "鸡西", "鹤岗", "双鸭山", "大庆", "伊春", "佳木斯", "七台河", "牡丹江", "黑河", "绥化", "大兴安岭"],["", "南京", "无锡", "徐州", "常州", "苏州", "南通", "连云港", "淮安", "盐城", "扬州", "镇江", "秦州", "宿州"],["", "杭州", "宁波", "温州", "绍兴", "湖州", "嘉兴", "金华", "衢州", "舟山", "台州", "丽水"],["", "合肥", "芜湖", "蚌埠", "马鞍山", "宿州", "安庆", "淮南", "铜陵", "黄山", "宣城", "池州", "滁州", "淮北", "阜阳", "六安", "毫州"],["", "福州", "厦门", "漳州", "泉州", "三明", "莆田", "南平", "龙岩", "宁德", "平潭"],["", "南昌", "九江", "上饶", "抚州", "宜春", "吉安", "赣州", "景德镇", "萍乡", "新余", "鹰潭"],["", "成都", "绵阳", "自贡", "攀枝花", "泸州", "德阳", "广元", "遂宁", "内江", "乐山", "资阳", "宜宾", "南充", "达州", "雅安", "阿坝", "甘孜", "凉山", "广安", "巴中", "眉山"],["", "贵阳", "六盘水", "遵义", "铜仁", "黔西", "毕节", "安顺", "黔东", "黔南"],["", "昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "普洱", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山", "西双版纳"],["", "西安", "宝鸡", "咸阳", "渭南", "铜川", "治中", "安康", "商洛", "榆林", "延安", "汉中", "杨陵"],["", "兰州", "嘉峪关", "金昌", "白银", "天水", "酒泉", "张掖", "武威", "定西", "陇南", "平凉", "庆阳", "临夏", "甘南"],["", "西宁", "海东", "海北", "黄南", "海南", "果洛", "玉树", "海西"],["", "南宁", "柳州", "桂林", "梧州", "北海", "防城港", "钦州", "贵港", "玉林", "百色", "贺州", "河池", "来宾", "崇左"],["", "拉萨", "昌都", "日喀则", "山南", "那曲", "阿里", "林芝"], ["", "银川", "石嘴山", "吴忠市", "固原市", "中卫"],["", "乌鲁木齐", "克拉玛依", "吐鲁番", "哈密", "昌吉", "博尔塔", "巴音郭楞", "阿克苏", "克孜勒苏柯尔克", "喀什", "和田", "伊犁", "塔城", "阿勒泰", "石河子", "阿拉尔", "图木舒克", "五家渠", "北屯", "铁门关", "双河市"],["", "海口", "三亚", "三沙"],["", "中西区", "湾仔区", "东区", "南区", "油尖旺", "深水埗", "九龙城", "黄大仙", "观塘", "葵青", "荃湾", "屯门", "元朗", "北区", "大埔", "沙田", "西贡", "离岛"],["", "花地玛堂", "圣安多尼堂", "大堂", "望德堂", "风顺堂", "嘉模堂", "圣方济各堂"], ["", "台北", "新北", "桃园", "台中", "台南", "高雄", "基隆", "新竹", "嘉义"]];</script>
步骤分析
// 1- 页面加载之后需要把省份数组中的所有数据填充到 省份下拉菜单中
// 2- 给省份下拉菜单添加 切换事件
// 3- 获取到用户选择的是哪个省
// 4- 找到该省所对应的所有城市
// 5- 把所有城市添加到对应的城市 下拉菜单中
JS 代码实现
// 1- 页面加载之后需要把省份数组中的所有数据填充到 省份下拉菜单中// 获取省份对象var pro = document.getElementById("province");var ct = document.getElementById("city");function provinceinit(){// 遍历数组for(let i = 0 ; i < province.length ; i++){// 数组中每一个值 都对应一个 optionvar option = document.createElement("option");option.innerText = province[i];// 不要求获取 省份名称, 只需要获取该省份所在的下标, 和城市的下标一一对应option.setAttribute("value",i);// 把每一项 都添加到 省份下拉菜单中pro.appendChild(option);}}provinceinit();
// 2- 给省份下拉菜单添加 切换事件pro.onchange = function(){// 每一次事件切换的时候, 城市下拉菜单内容都需要重置ct.innerHTML = "";// 3- 获取到用户选择的是哪个省// 4- 找到该省所对应的所有城市var cityArr = city[pro.value];console.log(cityArr);// 5- 把所有城市添加到对应的城市 下拉菜单中for(let i in cityArr){// 每循环一次, 需要创建一个option 对象let option = document.createElement("option");option.innerText = cityArr[i];ct.appendChild(option);}}
前端笔记4 JS BOMDOM相关推荐
- Web前端笔记-two.js加载图片
目前关于two.js的资料,国内的不是很多,项目中要加载图片,官方文档上没有关于加载图片的相关资料,但在github生态圈找到了,在此记录下. 如下图片: 图片路径: 在JS文件中导入图片: impo ...
- Web前端笔记-two.js实现坐标定位（动画效果非瞬移定位）
先来看下程序运行截图: 画图相关代码: ;import * as Two from "JS/two"; import * as $ from "JS/jquery&quo ...
- Web前端笔记-two.js图形旋转动画的2种实现方式
这里有两种方式! 第一种是使用setInterval: 代码如下: let time = setInterval(function(){if(sun.sun.rotation >= TWO_PI ...
- Web前端笔记-two.js画三角形及画tip含tip旋转
程序运行截图如下: 旋转下: 代码如下: import * as Two from "JS/two"; import * as $ from "JS/jquery&quo ...
- 【前端笔记】js计算两个日期差多少天
只是粗略的计算,对差额的时分秒毫秒没有做更具体的处理,原理是通过时间戳计算两个时间点的毫秒差,再换算为天 方式1: (new Date('2021/04/22').getTime() - new Da ...
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 参考文章: (1)移动端前端笔记 - 遇到的常见JS与CSS问题及解决方法 (2)https://www.cnblogs.com/zhaoda ...
- 前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型 常见的HTML事件 DOM 冒泡与捕获 流程控制语句 for..in 计时器 let,var,const的区别 ...
- Henry前端笔记之 Node及npm相关
Henry前端笔记之 npm入门相关 NodeJs 简介: 1.Nod简介与概述: 2.交互式运行环境:PEPL 3.Node.js模块和包 3.npm包管理工具 npm简介详见:https://dk ...
- 1.前端笔记之html
title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 出处:http://www ...
最新文章
- What’s new: Windows Phone 7 与 Windows Phone 6.5功能对比
- Java多线程编写简易飞机大战（一）
- DPDK — 数据平台优化技术
- mac电脑如何与手机同步复制粘贴_苹果换安卓手机如何同步手机自带备忘录便签?...
- 原来Rproj还可以这么使用
- 山东外贸职业学院王彩霞老师网上考试系统及c语言考试题库》,2019年山东外贸职业学院单独招生考试测试内容及安排...
- SQL SERVER 备份数据库到指定路径语句
- altiumdesigner的基本你操作
- Atitit 数据库结果集映射 ResultSetHandler 目录 1. 常见的四种配置ResultSetHandler 1 2. Dbutil 1 3. Mybatis 致敬 3 4. H
- jetty文件服务器,在Jetty中访问Web容器外部的文件
- mybatis13--2级缓存
- My Firest FireMonkey App
- 《MLB棒球创造营》：走近棒球运动·纽约扬基队
- 深度挖掘新闻营销带给企业的好处和优势
- 如何制作一份优秀的简历？
- form表单的enctype
- 如何安装KEIL MDK5开发软件
- 凯光dk4000说明书_《凯光dk4000烟弹》用户正在提问-魔笛moti行业门户网
- 李笑来——关于资本（阅读总结）
- bitmap 位图 头结构