JavaWeb=JavaScript高级

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。

javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
2. BOM 是各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
3. window 是 BOM 对象，而非 js 对象；

DOM（文档对象模型）是 HTML 和XML 的应用程序接口（API）。

Window对象包含属性：document、location、navigator、screen、history、frames

浏览器运行时中的两个不同的概念。

1、BOM 浏览器对象模型

Browser Object Model（浏览器对象模型），提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）

用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。比如 alert();弹出一个窗口,这属于BOM

2、DOM 文档对象模型

Document Object Model（文档对象模型），DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。

DOM是Document ，简称文档对象模型。是用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值。document.getElementById("").value; 这属于DOM

一 .Bom对象

1.bom简介： bom ：browser object model 浏览器对象模型

js把浏览器抽象成一个window对象，运行我们使用js来模拟浏览器的行为、

2.JS三种方式弹框：

1. 警告框：提示信息alert()
2. 确认框：确认信息confirm()
3. 输入框：输入信息prompt()<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>01-js三个弹框</title></head>
<body>
<!--
JS三个弹框
-->
<script>// 1. 警告框：提示信息// alert('哈哈');// 2. 确认框：确认信息/*let result = confirm('您确定要删除吗？');if(result==true){console.log('用户点击确定');}else{console.log('用户点击取消');}*/// 3. 输入框：输入信息（了解）let result = prompt('请输入你的年龄');if(result!=null){console.log(`用户输入的值：${result}`);}else{console.log('你点击了取消按钮');}
</script>
</body>
</html>

3.二种定时器方式

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>02-js二个定时器</title></head>
<body>
<!--JS两个定时器1）一次性定时器创建：let 定时器对象 = setTimeout('函数()',毫秒);关闭：clearTimeout(定时器对象)2）循环性定时器创建：let 定时器对象 = setInterval(函数,毫秒);关闭：clearInterval(定时器对象);
--><button id="btn1">取消打印时间</button>
<button id="btn2">取消打印自然数</button><script>// 1. 定时5秒之后在控制台打印当前时间function fun1() {console.log(new Date().toLocaleString());}let timeout = setTimeout('fun1()',5000);// 2. 点击按钮取消打印时间document.getElementById('btn1').onclick=function () {clearTimeout(timeout);}// 3. 每隔2秒在控制台打印递增自然数let num = 1;function fun2() {console.log(num++);}let interval = setInterval(fun2,2000);// 4. 点击按钮取消打印自然数document.getElementById('btn2').onclick=function () {clearInterval(interval)}
</script>
</body>
</html>

3.Location对象

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>03-location对象</title></head>
<body>
<!--
location地址1）获取当前窗口地址location.href2）刷新当前页面location.reload()3）跳转页面（重点）location.href='新页面地址'
--><button onclick="addr()">获取当前浏览器地址</button>
<button onclick="refresh()">刷新当前页面</button>
<button onclick="jump()"> 跳转页面(重点)</button><script>// 1.获取当前窗口的地址function addr() {console.log(location.href);}// 2.刷新当前页面function refresh() {location.reload();}// 3.跳转到新页面function jump() {location.href='https://www.jd.com';}
</script>
</body>
</html>

二.Dom对象

1.文档对象模型（Document Object Model）

作用：把所有页面标签抽象成为一个Document对象，我们可以使用js动态修改标签及属性内容。

2.dom获取元素

* 第一种：es6之前获取方式1）获取一个document.getElementById(id属性值)2）获取多个（了解）document.getElementsByTagName(标签名)   根据标签名获取，返回数组对象document.getElementsByClassName(class属性值)  根据class属性获取，返回数组对象document.getElementsByName(name属性值)  根据name属性获取，返回数组对象* 第二种：es6可根据CSS选择器获取1）获取一个document.querySelector(id选择器)2）获取多个document.querySelectorAll(css选择器)标签class属性后代并集父子....

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>04-dom获取元素</title></head>
<body>
<form action="#" method="get">姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>密码 <input type="password" name="password"> <br/>生日 <input type="date" name="birthday"><br/>性别<input type="radio" name="gender" value="male" class="radio">男&emsp;<input type="radio" name="gender" value="female" class="radio"/>女<br/>爱好<input type="checkbox" name="hobby" value="smoke">烟<input type="checkbox" name="hobby" value="drink">酒<input type="checkbox" name="hobby" value="perm">烫头<br/>头像 <input type="file" name="pic"><br/>学历<select name="edu"><option value="0">请选择</option><option value="1">入门</option><option value="2">精通</option><option value="3">放弃</option></select><br/>简介<textarea name="userIntro" cols="30" rows="10">默认值</textarea><br/><input type="reset" value="清空按钮"/><input type="submit" value="提交按钮"/><br/></form><script>// 1.获取id="username"的标签对象console.log(document.getElementById('username'));console.log(document.querySelector('#username'));// 2.获取class="radio"的标签对象数组console.log(document.getElementsByClassName('radio'));console.log(document.querySelectorAll('.radio'));// 3.获取所有的option标签对象数组console.log(document.getElementsByTagName('option'));console.log(document.querySelectorAll('option'));// 4.获取name="hobby"的input标签对象数组console.log(document.getElementsByName('hobby'));console.log(document.querySelectorAll('input[name="hobby"]')); // css的属性选择器// 5.获取文件上传选择框console.log(document.querySelectorAll('form input[type="file"]'));// 注意：为什么获取id使用这种方案？//  document.getElementById('username').onclick  有提示//  document.querySelector('#username').onfo   没有提示
</script>
</body>
</html>

3.dom操作内容

1. 获取或者修改元素（标签）的纯文本内容
   语法：
       js对象.innerText;

2. 获取或者修改元素的html超文本内容
   语法：
       js对象.innerHTML;

3. 获取或者修改包含自身的html内容
   语法：
       js对象.outerHTML;

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>05-dom操作内容</title><style>#myDiv {border: 1px solid red;}</style>
</head>
<body>
<div id="myDiv">程序猿最讨厌的事：<br>写注释、写文档……</div><script>let myDiv = document.getElementById('myDiv');// 1.innerText操作div内容// 1.1 获取纯文本// console.log(myDiv.innerText);// 1.2 设置纯文本// myDiv.innerText='<h1>别人不写注释，别人不写文档</h1>'; // 覆盖// myDiv.innerText+='别人不写注释，别人不写文档'; // 追加// 2.innerHTML操作div内容// 2.1 获取超文本内容console.log(myDiv.innerHTML);// 2.2 设置超文本// myDiv.innerHTML='<h1>别人不写注释，别人不写文档</h1>'; // 覆盖//  myDiv.innerHTML+='<h1>别人不写注释，别人不写文档</h1>'; // 追加// 3.outerHTML操作div （扩展）myDiv.outerHTML = '<p>我摇身一变，成了小P</p>';
</script>
</body>
</html>

4.Dom属性操作

1. 获取文本框的值,单选框或复选框的选中状态
   语法:
       js对象.属性名获取属性值
       js对象.属性名='新属性值'

2. 给元素设置自定义属性
   语法:
       js对象.setAttribute(属性名,属性值)

2. 获取元素的自定义属性值
   语法:
       js对象.getAttribute(属性名)

4. 移除元素的自定义属性
   语法:
       js对象.removeAttribute(属性名)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>06-dom操作属性</title></head>
<body>
<form action="#" method="get">姓名 <input type="text" name="username" id="username" value="西亚"/> <br/>爱好<input type="checkbox" name="hobby" value="smoke">烟<input type="checkbox" name="hobby" value="drink">酒<input type="checkbox" name="hobby" value="perm">烫头<br/><input type="reset" value="清空按钮"/><input type="submit" value="提交按钮"/><br/>
</form><script>// 1.获取文本框预定义的属性值let username = document.getElementById('username');console.log(username);console.log(username.type); // textconsole.log(username.name); // usernameconsole.log(username.value); // 西亚// 2.给文本框设置自定义属性（了解） [新增、修改]username.setAttribute('zidingyi','我是自定义属性');// 3.获取文本框自定义属性（了解）console.log(username.getAttribute('zidingyi'));// 4.移出文本框自定义属性（了解）username.removeAttribute('zidingyi')username.removeAttribute('value')</script>
</body>
</html>

5.Dom操作样式

1. 设置一个css样式语法: js对象.style.样式名='样式值'特点：样式名按照驼峰式命名css格式：font-sizejs格式：fontSize2. 批量设置css样式语法: js对象.style.cssText='css样式字符串'缺点：让开发者痛苦，有耦合性3. 通过class设置样式语法: js对象.className='class选择器名'特点：解耦

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>07-dom操作样式</title><style>#p1{ background-color: red;}.mp {color: green;font-size: 30px;font-family: 楷体;}.mpp {background-color: lightgray;}</style>
</head>
<body><p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3" >3. 通过class设置样式</p><script>let p1 = document.getElementById("p1");//获取段落标签let p2 = document.getElementById("p2");//获取段落标签let p3 = document.getElementById("p3");//获取段落标签// 1. 设置一个css样式p1.style.backgroundColor='black';p1.style.color='white';// 2. 批量设置css样式p2.style.cssText='border:1px solid red;font-size:20px;';// 3. 通过class设置样式p3.className='mp mpp'; </script>
</body>
</html>

6.Dom操作元素-标签

1. 创建一个标签对象语法：document.createElement(标签名称)2. 给父标签添加一个子标签语法：父标签对象.appendChild(子标签对象)

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>08-dom操作元素</title></head>
<body><ul id="star"><li>古力</li><li>迪丽</li></ul>
<script>// 添加一个新列表项    <li>马尔</li>// 方式一document.getElementById('star').innerHTML+='<li>马尔</li>';// 方式二// 1.1 创建li标签let li = document.createElement('li');li.innerText='小：都要'console.log(li);// 1.2 父标签添加子标签document.getElementById('star').appendChild(li);</script>
</body>
</html>

三.正则表达式

作用：根据定义好的规则，过滤文本内容；

 在js中使用正则表达式1.创建方式1）let rege = new RegExp(“正则表达式字符串”);2）let rege = /正则表达式/;2.验证方法1）正则对象.test(字符串)符合正则规则就返回true，否则false2）字符串对象.match(正则对象)返回字符串中符合正则规则的内容。3. 了解下正则修饰符4. 在线正则表达式https://tool.oschina.net/regex/#

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>09-正则表达式</title></head>
<body><script>// 1.创建正则对象let reg1 = new RegExp('\\d+'); // 规则只能是纯数字console.log(reg1.test('abc')); // falseconsole.log(reg1.test('123321')); // true// 2.直接使用正则表达式let reg2 = /\d+/;console.log(reg2.test('abc')); // falseconsole.log(reg2.test('123321')); // trueconsole.log("a1".match(reg2)); // 表示获取字符串符合正则规则那部分内容
</script><script>//正则表达式修饰符let regi = /[amn]/i;//不区分大小写匹配amn  ignore 忽略大小写let resi = "ABC".match(regi);//从"ABC"中匹配regi模式字符串console.log(resi);let regg = /\d/g;//全局查找数字  global 全局let resg = "1 plus 2 equals 3".match(regg);console.log(resg);let regm = /^\d/m;//多行匹配开头的数字  （^ 限定开始  $ 限定结束） multpart 多行let resm = "abc1 plus 2 equals 3\n6abcmnk".match(regm);console.log(resm);
</script><script>console.log('-------------------------------')// 以邮箱举例let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;console.log(emailReg.test('sadfsadf')); // falseconsole.log(emailReg.test('ys_123@163.com')); // true// 以手机号举例let phoneReg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;console.log(phoneReg.test('123123')); // falseconsole.log(phoneReg.test('18312332199')); // true</script></body>
</html>

四.综合案例

1.表单校验：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>表单校验</title><style type="text/css">.regist_bg {width: 100%;height: 600px;padding-top: 40px;background-image: url(../img/b.jpg);}.regist {border: 7px inset #ccc;width: 700px;padding: 40px 0;padding-left: 80px;background-color: #fff;margin-left: 25%;border-radius: 10px;}input[type="submit"] {background-color: aliceblue;width: 100px;height: 35px;color: red;cursor: pointer;border-radius: 5px;}.warn {color: red;font-size: 12px;display: none;}</style><!--表单校验1. 两次密码输入一致2. 邮箱格式正确3. 手机号格式正确4. 提交表单时校验表单项是否合法.总结:form表单的 onsubmit 事件 表单提交之前触发-->
</head>
<body>
<div class="regist_bg"><div class="regist"><form action="#" id="myForm"><table width="700px" height="350px"><tr><td colspan="3"><font color="#3164af">会员注册</font> USER REGISTER</td></tr><tr><td align="right">用户名</td><td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/><spanid="loginnamewarn" class="warn">用户名不能为空</span></td></tr><tr><td align="right">密码</td><td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/></td></tr><tr><td align="right">确认密码</td><td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/><spanid="pwdwarn" class="warn">密码不一致</span></td></tr><tr><td align="right">Email</td><td colspan="2"><input id="email" type="text" name="email" size="50"/> <span id="emailwarn"class="warn">邮箱格式有误</span></td></tr><tr><td align="right">姓名</td><td colspan="2"><input name="text" name="username" size="50"/></td></tr><tr><td align="right">性别</td><td colspan="2"><input type="radio" name="gender" value="男" checked="checked"/>男<input type="radio" name="gender" value="女"/>女</td></tr><tr><td align="right">电话号码</td><td colspan="2"><input id="phone" type="text" name="phone" size="50"/> <span id="phonewarn"class="warn">手机格式有误</span></td></tr><tr><td align="right">所在地</td><td colspan="3"><select id="provinceId" onchange="selectCity(this.value)" style="width:150px"><option value="">----请-选-择-省----</option><option value="0">北京</option><option value="1">辽宁</option><option value="2">江苏</option></select><select id="cityId" style="width:150px"><option>----请-选-择-市----</option></select></td></tr><tr><td width="80" align="right">验证码</td><td width="100"><input type="text" name="verifyCode"/></td><td><img src="../img/checkMa.png"/></td></tr><tr><td></td><td colspan="2"><input id="rebtn" type="submit" value="注册"/></td></tr></table></form></div>
</div>
<script>// . 两次密码输入一致// .获取密码框和确认密码框的js对象let pwd1 = document.getElementById('pwd1');let pwd2 = document.getElementById('pwd2');//  校验密码是否一致的方法function checkPwd() {let boo = pwd1.value == pwd2.value;if(boo == true){// 密码一致document.getElementById('pwdwarn').style.display='none';}else{// 密码不一致document.getElementById('pwdwarn').style.display='inline';}return boo;}// 给确认密码框绑定失去焦点事件pwd2.onblur=checkPwd; // 这里绑定函数，不能加括号//  邮箱格式正确// 定义邮箱正则表达式let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;// 2.2 获取邮箱的js对象let email = document.getElementById('email');// 2.3 定义校验函数（方法）function checkEmail() {let boo = emailReg.test(email.value);if(boo ==  true){ // 校验通过document.getElementById('emailwarn').style.display='none';}else{ // 校验不通过document.getElementById('emailwarn').style.display='inline';}return boo;}//  给邮箱绑定失去焦点事件email.onblur=checkEmail;// 表单提交时 会触发这个 onsubmit事件document.getElementById('myForm').onsubmit=function () {return checkPwd()&&checkEmail(); // 返回true可以提交，返回false表单不做任何操作}// 准备数据var data = new Array();data['北京'] = ['顺义区', '昌平区', '朝阳区'];data['河北'] = ["保定","石家庄","廊坊"];data['辽宁'] = ["沈阳","铁岭","抚顺"];let provinceId = document.getElementById("provinceId");//获取省下拉列表let cityId = document.getElementById("cityId");//获取市下拉列表// 1.页面加载成功后，初始化省份数据window.onload=function () {for(let index in data){ // 索引forconsole.log(index);provinceId.innerHTML+=`<option value="${index}">${index}</option>`;}}// 2.给省份下拉框绑定onchange事件provinceId.onchange=function () {// 清空上一次选择城市信息cityId.innerHTML='<option value="">----请-选-择-市----</option>';console.log(this.value);// 当前用户选中的value值 ，它就是二维数组的索引console.log(data[this.value]); // 城市列表let citys = data[this.value];for(let city of citys){ // 增强forcityId.innerHTML+=`<option value="${city}">${city}</option>`;}}</script></body>
</html>

隔行换色：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>隔行变色</title></head>
<body>
<table id="tab1" border="1" width="800" align="center"><tr><th width="100px"><input type="checkbox">全/<input type="checkbox">反选</th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="checkbox"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>5</td><td>牛奶制品</td><td>牛奶制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>6</td><td>大豆制品</td><td>大豆制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="checkbox"></td><td>7</td><td>海参制品</td><td>海参制品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table>
<!--
隔行变色1. 表格奇偶行颜色不同2. 鼠标移入颜色高亮
-->
<script>let oldColor;// 获取所有tr的js对象 数组let trs = document.querySelectorAll('table tr');  // 注意：这里使用的后代选择器  ，这里是js的一个tbody坑 table>tr// 普通for循环for (let i = 0; i < trs.length; i++) {if(i%2==0){//偶数索引（奇数行）trs[i].style.backgroundColor='lightgrey';}else{ // 奇数索引（偶数行）trs[i].style.backgroundColor='skyblue';}trs[i].onmouseover=function () { // 鼠标移入某一行oldColor=trs[i].style.backgroundColor// 获取当前行的颜色trs[i].style.backgroundColor='pink';}trs[i].onmouseout=function () {// 鼠标移出某一行trs[i].style.backgroundColor=oldColor;}}
</script>
</body>
</html>

其他案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>儿童身高预测</title><style type="text/css">#content{margin: 0 auto;width: 600px;border: orange solid 2px;background-color: bisque;}#content div{margin-left: 15px;margin-top: 15px;margin-bottom: 10px;}h3,h5{margin-left: 15px;}.lookresult{margin: 0 auto;width: 550px;height: 45px;background-color: white;border: orange dashed 1px;line-height: 45px;text-align: left;padding-left: 15px;}#resultheight{color: red;font-size: 20px;font-weight: bold;}</style>
</head>
<body>
<div><div id="content"><h3>儿童身高预测</h3><div>儿童性别：<input type="radio" name="sex" value="female" id="female" checked="true"><label for="female">男孩</label><input type="radio" name="sex" value="male" id="male"><label for="male">女孩</label></div><div><label for="batherheight">爸爸的身高：</label><input type="text" id="batherheight">厘米</div><div><label for="motherheight">妈妈的身高：</label><input type="text" id="motherheight">厘米</div><div><button id="lookheihgt">查看结果</button><button id="reloadheight">重新测试</button></div><h5>测试结果</h5><div class="lookresult">小孩的身高是：<span id="resultheight">0</span>厘米</div></div>
</div><script>//查看结果document.getElementById("lookheihgt").onclick = function () {let  sex = document.querySelector("input[name='sex']:checked").value;let batherHeight   = document.getElementById("batherheight").value;let montherHeight   = document.getElementById("motherheight").value;if (batherHeight == "" || isNaN(batherHeight)) {alert("输入父亲身高不是数字");return;}if (montherHeight == "" || isNaN(montherHeight)) {alert("输入母亲身高不是数字");return;}if (batherHeight>250||batherHeight<55){alert("父亲身高必须是55--250之间！");return;}if (montherHeight>250||montherHeight<55){alert("母亲身高必须是55--250之间！");return;}let height=0 ;if (sex == "male") {//女儿身高height =  (parseFloat(batherHeight*0.923)+parseFloat(montherHeight))/2;}else if(sex== "female"){//儿子身高height =  ((parseFloat(batherHeight) +parseFloat(montherHeight))/2)*1.08;}document.getElementById("resultheight").innerText = Math.round(height*100)/100;};//重新测试document.getElementById("reloadheight").onclick = function () {document.getElementById("batherheight").value ="";document.getElementById("motherheight").value="";document.getElementById("resultheight").innerText="0";};
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>动态添加表格</title>
</head>
<body><div><label for="row">行：</label><input type="text" value="0" id="row"><label for="col">列：</label> <input type="text" value="0" id="col"><button id="rowscols">生成表格</button>
</div>
<div id="rowcolstable"></div>
<script>document.getElementById("rowscols").onclick = function () {let rowsId = document.getElementById("row").value;let colsId = document.getElementById("col").value;if (rowsId < 1 || colsId < 1) {alert("生成表格的行或者列不能小于1");return;}let tables = `<table style="border: blue solid 1px;border-collapse: collapse">`;for (let i=0;i<rowsId;i++){tables+='<tr>';for (let j = 0; j < colsId; j++) {tables+=`<td style="border: blue solid 5px;">传智播客</td>`;}tables+='</tr>';}tables += `</table>`;document.getElementById("rowcolstable").innerHTML=tables;document.getElementById("row").value="";document.getElementById("col").value="";};
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>添加行数据</title><style type="text/css">div{margin:0 auto;text-align: center;width: 600px;}table{border: black solid 1px;border-collapse: collapse;}td{width: 200px;border: black solid 3px;}</style>
</head>
<body><div>学生信息<table id="studentInfo"><tr><td>学号</td><td>姓名</td><td>操作</td></tr><tr><td>itcast001</td><td>张三</td><td><a href="#">删除</a></td></tr><tr><td>itcast002</td><td>lisi</td><td><a href="#">删除</a></td></tr></table></div><br><div><label for="xuehao">学号：</label><input type="text" value="" id="xuehao"><label for="xingming">姓名：</label> <input type="text" value="" id="xingming"><button id="addxuesheng">添加一行数据</button></div><script>document.getElementById("addxuesheng").onclick = function () {let xuehao = document.getElementById("xuehao").value;let xingming = document.getElementById("xingming").value;if (xuehao.length<1||xingming.length<1) {alert("学号或者姓名不能为空！");return;}let str=`<tr><td>${xuehao}</td><td>${xingming}</td><td><a href="#">删除</a></td></tr>`;document.getElementById("studentInfo").innerHTML+=str;document.getElementById("xuehao").value="";document.getElementById("xingming").value="";};</script></body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>省市联动</title><style type="text/css">.regist_bg {width: 100%;height: 600px;padding-top: 40px;background-image: url(../img/bg.jpg);}.regist {border: 7px inset #ccc;width: 600px;padding: 40px 0;padding-left: 80px;background-color: #fff;margin-left: 25%;border-radius: 10px;}input[type="submit"] {background-color: aliceblue;width: 100px;height: 35px;color: red;cursor: pointer;border-radius: 5px;}</style>
</head>
<body>
<div class="regist_bg"><div class="regist"><form action="#"><table width="600" height="350px"><tr><td colspan="3"><font color="#3164af">会员注册</font> USER REGISTER</td></tr><tr><td align="right">用户名</td><td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60" /> </td></tr><tr><td align="right">密码</td><td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60" /> </td></tr><tr><td align="right">确认密码</td><td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60" /> </td></tr><tr><td align="right">Email</td><td colspan="2"><input id="emailId" type="text" name="email" size="60" /> </td></tr><tr><td align="right">姓名</td><td colspan="2"><input name="text" name="username" size="60" /> </td></tr><tr><td align="right">性别</td><td colspan="2"><input type="radio" name="gender" value="男" checked="checked" />男<input type="radio" name="gender" value="女" />女</td></tr><tr><td align="right">电话号码</td><td colspan="2"><input type="text" name="phone" size="60" /> </td></tr><tr><td align="right">所在地</td><td colspan="3"><select id="provinceId" style="width:150px"><option value="">----请-选-择-省----</option></select><select id="cityId" style="width:150px"><option value="">----请-选-择-市----</option></select></td></tr><tr><td width="80" align="right">验证码</td><td width="100"><input type="text" name="verifyCode" /> </td><td></td></tr><tr><td></td><td colspan="2"><input type="submit" value="注册" /></td></tr></table></form></div>
</div><script>//城市选择let data = new Array();data["北京"]=["海淀","朝阳","东城","昌平","顺义"];data["上海"]=["越秀","长鸣","聪明"];data["郑州"]=["中原","金水","管城","上街","新郑"];data["西安"]=["襄阳","咸阳","东边","西边"];let provinceId = document.getElementById("provinceId");let cityId = document.getElementById("cityId");window.onload=function () {for (let provice in data){provinceId.innerHTML+=`<option value="${provice}">${provice}</option>`;}}provinceId.onchange = function () {console.log(this.value);if (this.value == "") {cityId.innerHTML=`<option value="">----请-选-择-市----</option>`;return;}let citys = data[this.value];cityId.innerHTML=`<option value="">----请-选-择-市----</option>`;for (let city of citys) {cityId.innerHTML+=`<option value="${city}">${city}</option>`;}}</script></body>
</html>

参考：

w3c-js

bom-dom

bom