爱站程序员基地表单案例：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><link rel=\"stylesheet\" href=\"CSS/formCss.css\"></head><body><form action=\"\"><fieldset><legend>学生档案</legend><label for=\"userName\">姓名：</label><input type=\"text\" name=\"userName\" id=\"userName\" placeholder=\"请输入用户名\"><label for=\"userPhone\">手机号码：</label><input type=\"text\" name=\"userPhone\" id=\"userPhone\" ><label for=\"userUrl\">邮箱地址：</label><input type=\"text\" name=\"userUrl\" id=\"userUrl\" ><label for=\"usercollage\" >所属学院：</label><input type=\"text\" name=\"usercollage\" id=\"usercollage\" list=\"userList\" placeholder=\"请选择\"><datalist id=\"userList\"><option value=\"信息技术与工程学院\"></option><option value=\"旅游学院\"></option><option value=\"会计学院\"></option></datalist><label for=\"userScore\">入学成绩：</label><input type=\"number\" name=\"userScore\" id=\"userScore\" max=\"100\" min=\"0\" value=\"0\"><label for=\"userLevel\">基础水平：</label><meter id=\"userLevel\" max=\"100\" min=\"0\" high=\"85\" low=\"59\"></meter><label for=\"userInSchool\">入学日期：</label><input type=\"date\" name=\"userInSchool\" id=\"userInSchool\"><label for=\"userOutSchool\">毕业日期：</label><input type=\"date\"name=\"userOutSchool\" id=\"userOutSchool\"><input type=\"submit\" value=\"提交\"></fieldset><script >document.getElementById(\"userScore\").oninput=function(){document.getElementById(\"userLevel\").value=document.getElementById(\"userScore\").value;}</script></form></body></html>
运行结果：
基础水平会随着成绩的变化而变化。
获取dom元素：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><body><ul><li class=\"first\">java</li><li class=\"second\">javascript</li><li id=\"third\">html</li></ul><script>window.onload=function(){// 索引：不直观 以后的数据都是从后台动态获取，前台动态生成添加的//query：查询 Selector：选择器 querySelector（传入选择器的名称）//如果是类选择器，选择器名称要加上“.”,如果是id选择器，要加上“#”，否则当成标签处理var firstLi=document.querySelector(\"li\");//获取li标签，因为获取的是单数元素，当满足条件的不止一个的时候只能返回符合的第一个li标签console.log(firstLi);var Li1=document.querySelector(\".first\");console.log(Li1);var Li3=document.querySelector(\"#third\");console.log(Li3);//querySelectorAll获取满足条件的所有元素---数组var allLi=document.querySelectorAll(\"li\")[0];console.log(allLi);}</script></body></html>
运行结果：
自定义属性：
定义
1.data- 开头
2.data- 后面必须至少有一个字符，多个单词使用“-”连接起来
建议：
1.名称应该都使用小写—-不要包含任何的大写字符
2.名称中不要有任何的特殊符号
3.名称不要有纯数字
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title></head><body><p data-school-name=\"itcast\"></p><script>window.onload=function(){//获取自定义是属性值//将data- 后面的单词必须使用camel（驼峰）命名法连接var p=document.querySelector(\"p\").dataset[\"schoolName\"];//实际进行获取的时候是解析成这个data-school-name来获取console.log(p);}</script></body></html>
运行结果：
