HTML_06(Dom(03))

笔记总结:

dom概念: W3C组织制定的规范，所有脚本在操作HTML页面元素时都使用这个规范
一、window对象: 表示浏览器窗口
1.属性：closed(判断窗口是否关闭，false为默认，窗口打开)
2.对象:
1)document: 表示整个html文档，通过此对象可访问页面上所有的元素
2)history对象：表示已浏览的url，常用的方法
back,返回上一个访问过的页面，forward，前进一个页面，go，访问任意一个已访问的页面
3)location对象: 包含当前url，默认的属性的href。
4)navigator对象：包含浏览器的信息
3.事件：
onload事件：当页面完成加载时触发
onscroll事件：当用户滚动滚动条时触发
4.方法:
1)弹出对话框的三种方式:
alert:弹出消息对话框window.alert([sMessage])
confirm:弹出确认对话框bConfirmed = window.confirm( [sMessage])
prompt:弹出提示对话框vTextData = window.prompt([sMessage] [, sDefaultValue])
2)window.open方法,打开一个新窗口，此方法会返回一个window对象，可以设置窗口的所有属性
3)window.setTimeout：开启定时器，隔多少毫秒后执行一个表达式
此方法返回一个定时器，可以通过clearTimeout清除定时器
4)window.setInterval: 开启定时器，每隔多少毫秒后执行一个表达式
此方法返回一个定时器，可以通过clearInterval清除定时器

二、Node对象，节点对象，只是所有节点对象的一个统称，不表示具体节点
1.nodeType: 节点类型 document、element(所有的页面元素)Text：文本节点，页面上所有的文本
2.node常用属性
nodeName节点名字、nodeType节点类型、childNodes所有子节点、parentNode父节点
nextSibling下一个兄弟节点、previousSibling前一个兄弟节点
firstChild第一个子节点、lastChild最后一个子节点
3.node常用的方法
appendChild增加一个子节点，增加为最后一个子节点
removeChild删除一个子节点
replaceChild替换一个子节点
insertChild在当前子节点之前插入一个子节点
cloneNode克隆节点
hasChildNodes判断当前节点是否有子节点

三、document对象:表示整个页面文档
1.方法:
createElement()创建一个元素节点，返回一个元素对象，需要append到存在的节点下面，页面才会有显示
获得页面元素： getElementById() getElementsByName() getElementsByTagName()
2.对象：
body、title
3.集合
forms所有表单、links所有超链接、anchors所有锚点

四、element元素对象
1.属性：tagName标签名
2.方法:getAttribute和setAttribute获得和设置标签的属性

五、table对象
1.table的字节点是tbody，tbody的子节点才是tr
2.table有个属性rows表示所有行对象，tr有个属性cells表示所有单元格对象
3.添加行的两种方式： table.insertRow([index]) tbody.appendChild(tr)
4.添加单元格的两种方式: tr.insertCell([index]) tr.appendChild(td)
5.删除行： table.deleteRow(index) tbody.removeChild(tr)
两种用法各有用处，就看是拿到行对象，还是知道行号

六、a超链接触发JavaScript脚本的两种方式
常用: <a href='javascript:func()'></a>
<a href='javascript:void(0)' οnclick='func()'></a>

1,心理测试beta1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>心理测试beta1.0</title>
<style type="text/css">.open{display:block;}.close{display:none;}.ulid{list-style:none;margin:12px;}
</style>
<script type="text/javascript">function showResult(){var nodes = document.getElementsByName("no1");var flag = false;var value;for(var x=0; x<nodes.length; x++){if(nodes[x].checked)//如果为真{flag = true;//把状态栏更改为真value = nodes[x].value;break;//跳过本次循环,}else{flag = false;}}if(!flag) //非真就是假{var info = document.getElementById("errorInfo");info.innerHTML = "心理严重有问题".fontcolor("red");return;}if(value>=1&&value<=3){document.getElementById("div_1").className="open"; //打开第一个document.getElementById("div_2").className="close"; //并且把第二个关闭}else{document.getElementById("div_2").className="open";document.getElementById("div_1").className="close";}}
</script>
</head><body><h2>欢迎您参与性格测试:</h2><h4>第一题:</h4><div>你喜欢的水果:</div><ul class="ulid"><li><input type="radio" name="no1" value="1"/>葡萄</li><li><input type="radio" name="no1" value="2">香蕉</li><li><input type="radio" name="no1" value="3">西瓜</li><li><input type="radio" name="no1" value="4"/>芒果</li><li><input type="radio" name="no1" value="5">火龙果</li></ul><input type="button" value=" 点我查看测试的结果:" οnclick="showResult()"/><hr/><div class="close" id="div_1"><font color="red">1-3分以下:您的性格内向并且扭曲,建议去医院看病.</font> </div><span id="errorInfo"></span><div class="close" id="div_2"><font color="red">4分以上: 哥们,你蛮可以的..建议回家吃药.</font></div>
</body>
</html>

2,调查文档的小测试:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">#tableId{display:none;}
</style><script type="text/javascript">/*注意两个小地方:1,默认是隐藏的2,通过更改样式表去完成这题目3,checked = "checked";//默认按钮是这个*/function show(node){var tableNode = document.getElementById("tableId");//通过更改样式表with(tableNode.style) //通过更改table的样式表{if(node.value=='yes'){display="block"; //不隐藏}else{display="none";//隐藏}}}
</script>
</head><body><div><span>您要参与问卷调查吗：</span><input type="radio" name="fun" value="yes" οnclick="show(this)"/>是<input type="radio" name="fun" value="no" checked="checked" οnclick="show(this)"/>否</div><table  id="tableId"><tr><th>问卷调查内容</th></tr><tr><td>您的姓名:<input type="text" name="useName"></td></tr><tr><td>您的邮箱:<input type="text" name="useMail"></td></tr></table></body>
</html>

3,更改文字背景颜色:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">#text{clear:left;margin-top :20px;}
</style><script type="text/javascript">function showColor(){//判断获取里面的样式表var selectNode = document.getElementsByName("selectColor")[0];//获取select集合里面所选中的style样式表var optionColor = selectNode.options[selectNode.selectedIndex].style.backgroundColor;var divNode = document.getElementById("text");divNode.style.backgroundColor = optionColor;}
</script>
</head><body><script type="text/javascript"> </script><select name="selectColor" οnchange="showColor()"><option style="background-color:#000000" value="color">请选择颜色</option><option style="background-color:#FF0000" value="red">红色</option><option style="background-color:#00FF00" value="green">绿色</option><option style="background-color:#000099" value="blue">蓝色</option></select><div id="text">【环球网报道 记者 王欢】日本共同社9月24日报道称，经日本第11管区那霸海上保安总部巡逻船确认，北京时间24日上午9点40分左右，一艘中国渔政船驶入钓鱼岛12海里近海。包括当天清晨的2艘海监船在内，目前共有3艘中方公务船在12海里海域内航行。《读卖新闻》24日报道称，北京时间24日上午9点40分左右，中国渔政船“渔政310”从赤尾屿西北约22公里海域驶入“日本领海”。截止24日上午10点，共有3艘中方公务船在钓鱼岛12海里近海内巡航。这是日本政府自9月11日实施“国有化”方针以来，中方公务船第3次进入12海里海域。日本内阁官房长官藤村修在24日上午的记者会上称，“日方要求中方公务船退出日本领海，已通过外交渠道向中方提出抗议”。此外，当天上午，日本政府将原本设置在首相官邸危机管理中心设立的情报联络室升级为官邸对策室。另据日本NHK电视台报道，鉴于中方公务船第3次进入12海里巡航，日本政府24日以首相官邸的危机管理中心为核心展开情报收集和局势分析工作。首相野田佳彦指示外务事务次官河相周夫在相关情报收集方面与相关省厅保持密切合作。</div>
</body>
</html>

4,对邮箱进行的操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">.one{background-color:#9bf7d5;}.two{background-color:#f3e99a;}.over{background-color:#ef7125;}
</style><script type="text/javascript">/*为表格上颜色*/function trColor(){//1.获取table节点var tableNode = document.getElementById("mailtable");    //2.获取到table节点行集合var rows = tableNode.rows;var name ;for(var x=1; x<rows.length-1; x++){if(x%2==1){rows[x].className = "one";}else{rows[x].className = "two";}/*执行流程:1,从for循环下面执行起来..执行完毕-->到了事件的监听.  事件处理方式: 不管是那个类型..只要是对象调用了.我离开了这个行.咱们就变.*/rows[x].onmouseover = function(){name = this.className;this.className = "over";}rows[x].onmouseout = function(){this.className = name;}}}/*当我完成的时候就加载完毕他*/window.onload = function(){trColor();}/*1.全选的状态*/function checkAll(node){//获取所有的mailid对象var mailNodes = document.getElementsByName("mail");for(var x=0; x<mailNodes.length; x++){mailNodes[x].checked = node.checked;//状态跟着我变化}}/*取消按钮+全选按钮的功能完成*/function checkAllByBut(number){var mailNodes = document.getElementsByName("mail");for(var x=0; x<mailNodes.length; x++){   if(number>1){//复选框的意思: 如果我的状态为真,咱就假,如果咱为假,就真mailNodes[x].checked = !mailNodes[x].checked;}else{mailNodes[x].checked = number;}}}/*删除邮件 ,需要注意的问题:*/function deleteMail(){if(!confirm("确定要删除吗?"))//非真return;//获取到所有的mail对象var mailNodes  = document.getElementsByName("mail");for(var x=0; x<mailNodes.length; x++){var node = mailNodes[x].parentNode.parentNode; //获取到tr节点的内容node.parentNode.removeChild(node);//把它的儿子干掉/*当他删除了第一个元素的时候.角标会往上面移动-->  mailNodes的个数也会少*/x--;}}</script>
</head><body><table id="mailtable"><tr><th><input type="checkbox" name="all" οnclick="checkAll(this)"  />全选</th><th>发件人</th><th>邮件名称</th><th>邮件附属信息</th></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三11</td><td>我是邮件11</td><td>我是附属信息11</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三22</td><td>我是邮件22</td><td>我是附属信息22</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三33</td><td>我是邮件33</td><td>我是附属信息33</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三44</td><td>我是邮件44</td><td>我是附属信息44</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三55</td><td>我是邮件55</td><td>我是附属信息55</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三66</td><td>我是邮件66</td><td>我是附属信息66</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三117</td><td>我是邮件117</td><td>我是附属信息17</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三118</td><td>我是邮件118</td><td>我是附属信息118</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三119</td><td>我是邮件119</td><td>我是附属信息119</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三1100</td><td>我是邮件110</td><td>我是附属信息110</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三11a</td><td>我是邮件11a</td><td>我是附属信息11a</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三11b</td><td>我是邮件11b</td><td>我是附属信息1b1</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三11c</td><td>我是邮件11c</td><td>我是附属信息11c</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三11d</td><td>我是邮件11d</td><td>我是附属信息11d</td></tr><tr><td><input type="checkbox" name="mail" /></td><td>张三11e</td><td>我是邮件11e</td><td>我是附属信息11e</td></tr><tr><th><input type="checkbox" name="all" οnclick="checkAll(this)"  />全选</th><th colspan="3"><input type="button" value="全选" οnclick="checkAllByBut(1)" /><input type="button" value="取消全选" οnclick="checkAllByBut(0)"  /><input type="button" value="反选" οnclick="checkAllByBut(2)"  /><input type="button" value="删除所选附件" οnclick="deleteMail()" /></th></tr>
</table>
</body>
</html>

4,二级表格的的作用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body><script type="text/javascript">function selectCity(){var  collCities = [['选择城市'],['海淀区','朝阳区','东城区','西城区'],['济南','青岛','烟台','威海'],['沈阳','大连','鞍山','抚顺'],['石家庄','保定','邯郸','廊坊']];//1,获取两个对象                      var selNode = document.getElementById("selid");   //省份var CityNode = document.getElementById("subselid");//城市//2,获取到选择省份的角标var index = selNode.selectedIndex;//获取到select对象中所选中的位置//3,获取到二维数组所选择的省份的角标var arr = collCities[index];//alert(arr.length);//将子菜单里面的内容清空,由于长度会变,但是角标会自动往上面移动for(var x=0; x<CityNode.options.length;){//遍历option里面的内容-->把它集合里面的x对象干掉CityNode.removeChild(CityNode.options[x]);}//4,遍历二维数组的内容.并且添加到option里面去for(var x=0; x<arr.length; x++){optionNode = document.createElement("option");//为这个对象添加内容optionNode.innerHTML = arr[x]; //添加到select对象下面CityNode.appendChild(optionNode);}}</script><select id="selid" οnchange="selectCity()"><option>请选择省份</option><option>北京</option><option>山东</option><option>辽宁</option><option>河北</option></select><select id="subselid"><option>请选择城市</option></select>
</body>
</html>

5,附件的添加与删除功能:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body><script type="text/javascript">function addFile(){var tableNode = document.getElementById("fileId");var row = tableNode.insertRow();//创建行var cell = row.insertCell();//创建一个行里面的单元格var delce = row.insertCell();//新创建一个行里面的单元格cell.innerHTML = "<input type='file'/>";//从列里面写上内容delce.innerHTML = "<a href='javascript:void(0)' οnclick='delFile(this)'>删除附件</a>"}function delFile(node){//1,获取行对象var trNode = node.parentNode.parentNode;trNode.parentNode.removeChild(trNode);}</script><table id="fileId"><tr><td><a href="javascript:void(0)" οnclick="addFile()">添加附件</a></td></tr></table>
</body>
</html>

6,简单的表单判断:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body><script type="text/javascript">function check(name,reg,spanid,okinfo,errorinfo){var flag;//默认标记var val = document.getElementsByName(name)[0].value;//获取到value  文本框里面的内容if(reg.test(val)){document.getElementById(spanid).innerHTML = okinfo;flag = true;  //真就是代表成功}else{document.getElementById(spanid).innerHTML = errorinfo.fontcolor("red");flag = false;} }/*效验用户名*/function checkUser(){var regex = /^[a-z]{4}$/i; //忽略大小写return check("user",regex,"userspan","用户名正确","用户名格式不正确!");}/*效验密码  当您调用了我这个方法,其实就是把上面的方法所调用.*/function checkPsw(){var regex = /[a-z]{6}/i;return check("psw",regex,"pswspan","密码可用","密码不可用");}/*获取密码框的内容是否相同*/function checkRepsw(){var psw = document.getElementsByName("psw")[0].value;var repsw = document.getElementsByName("repsw")[0].value;var flag;var repswspan = document.getElementById("repswspan");if(psw==repsw){//获取span里面的内容->显示信息repswspan.innerHTML = "两次密码一致";flag = true;}else{repswspan.innerHTML = "两次密码不一致".fontcolor("red");flag = false;}return flag;//把标识符返回过去}/*邮箱地址的验证*/function checkMail(){var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;return check("mail",reg,"mailspan","邮箱正确","邮箱不正确");//这时候checkMail接收的只有唯一 true false;}/*表单数据的提交*/function checkForm(){if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail())return true;return false;}/*自定义按钮的提交方式*/function mySubmit(){//其实就是获取到form标签的submit方法var info = document.getElementById("userinfo");info.submit();//代表提表单交数据}</script><form id="userinfo" οnsubmit="return checkForm()">  <!--事件:当表单提交数据的时候立即触发,判断是否全部都为true,onsubmit事件判断是真或假，如果为假则发布不出去-->用户名称：<input type="text" name="user" οnblur="checkUser()" /><!--当鼠标离开焦点的时候触发--><span id="userspan"></span><br/>输入密码：<input type="text" name="psw" οnblur="checkPsw()"  /><span id="pswspan"></span><br/>确定密码：<input type="text" name="repsw" οnblur="checkRepsw()" /><span id="repswspan"></span><br/>邮件地址：<input type="text" name="mail" οnblur="checkMail()"  /><span id="mailspan"></span><br/><input type="submit" value="提交数据" /><hr/><!--自定义提交按钮--><input type="button" value="我来提交啦" οnclick="mySubmit()"/></form><hr/>
</body>
</html>

以下题目绝对搞笑：

题目:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>#tableId {}
</style><script type="text/javascript">/*校验器*/function check(name,reg,spanid,okinfo,errorinfo){var flag;var node = document.getElementsByName(name)[0].value;var spanid = document.getElementById(spanid);if(reg.test(node)){spanid.innerHTML = okinfo;flag = true;}else{spanid.innerHTML = errorinfo.fontcolor("red");}return flag;}/*效验用户名*/function checkUse(){var reg = /^[a-z]{4}$/i;return check("useName",reg,"nameSpan","用户名正确","用户名不正确");  //返回true或者false  并且调用了该函数}/*效验密码*/function checkPass(){var reg  =/^[A-Za-z]+$/;return check("passWord",reg,"passSpan","密码格式正确","密码格式不准确");}/*判断密码是否以上面的内容相同*/function verifyPass(){var val = document.getElementsByName("passWord")[0].value;var pass = document.getElementsByName("verifyPassWord")[0].value;//获取输入的密码框var node = document.getElementById("verifyPass");if(pass==val){node.innerHTML = "密码一致";return true;}else{node.innerHTML = "密码不一致".fontcolor("red");return false;    }}function getMail(){var reg = /\w+([-+.]\w+)*@\w+([-.] \w+)*\.\w+([-.]\w+)*/;return check("mailBox",reg,"mailSpan","邮箱格式正确","邮箱格式不正确");}//提交数据处理function checkForm(){if(checkUse()&&checkPass()&&verifyPass()&& getMail()){alert("注册成功,等待服务端反馈信息");return true;}else{alert("注册失败~~");return false;}   }function myForm(){var node = document.getElementById("formId");node.submit();//也是一个提交方式}
</script>
</head><body>
<table id="tableId"><!--当我需要提交数据的时候,我们只需要操作事件就可以..不需要在按钮那边写方法--><form id="formId" οnsubmit="return checkForm()" method="post" action="http://127.0.0.1:8888/"><tr><td>用户名称:</td><td><input type="text" name="useName" οnblur="checkUse()"/></td><td><span id="nameSpan"></span></td></tr><tr><td>输入密码:</td><td><input type="password" name="passWord" οnblur="checkPass()"/></td><td><span id="passSpan"></span></td></tr><tr><td>确认密码:</td><td><input type="password" name="verifyPassWord" οnblur="verifyPass()"/></td><td><span id="verifyPass"></span></td></tr><tr><td>邮箱地址:</td><td><input type="text" name="mailBox" οnblur="getMail()"/></td><td><span id="mailSpan"></span></td></tr><tr><td> <input type="submit" value="提交数据"/></td><td> <input type="reset" value="清空数据"/></td></tr></form>
</table>     <hr/><input type="button" value="管理员专用" οnclick=""/></body>
</html>测试题:练习1：对性别单选按钮进行判断，如果用户没有选择任何性别选项，要给出提示。"必须选择您的性别。"练习2：对兴趣复选选项进行判断，必须至少选择一个兴趣。这个答案保证错!!~但也是无聊实现的结果哦.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body><script type="text/javascript">function checkFun(){var nodes = document.getElementsByName("fun");for(var x=0; x<nodes.length ;x++){if(nodes[x].value=="java"||nodes[x].value=="net"||nodes[x].value=="c"){var node = document.getElementById("spanFun");node.innerHTML = "请选择兴趣".fontcolor('red');}}var sex = document.getElementById("spanSex");sex.innerHTML = "";}function checkSex(){var nodes = document.getElementsByName("sex");for(var x=0; x<nodes.length ;x++){if(nodes[x].value=="man"||nodes[x].value=="wanmax"){var node = document.getElementById("spanSex");node.innerHTML = "请选择性别".fontcolor('red');}}var fun = document.getElementById("spanFun");fun.innerHTML = "";}</script><!--练习1：对性别单选按钮进行判断，如果用户没有选择任何性别选项，要给出提示。"必须选择您的性别。"练习2：对兴趣复选选项进行判断，必须至少选择一个兴趣。思路: 判断里面有一项必须要比选中--><form οnsubmit="return checkForm()"><div>性别:<input type="radio" name="sex" value="man"  οnclick="checkFun()"/>男<input type="radio" name="sex" value="woman" οnclick="checkFun()"/>女<span id="spanSex"></span></div><div>兴趣:<input type="checkbox" name="fun" value="java"οnclick="checkSex()"/>java开发<input type="checkbox" name="fun" value="net" οnclick="checkSex()"/>net开发<input type="checkbox" name="fun" value="C" οnclick="checkSex()"/>C++开发<span id="spanFun"></span></div><div><input type="submit" name="sub" value="提交数据"/></div></form></body>
</html>

心得：思路是锻炼出来的～～加油。

HTML_06(Dom(03))相关推荐

【JavaScript】相关知识学习笔记
JavaScript笔记定义: JavaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言. 特点: 01.向HTML页面中添加交互行为 02.脚本语言,语法跟java类似 ...
坚强一点！！！不要怕！！！
axios 定义:一款ajax请求工具特点:01 前后端都可以使用 02 不依赖dom 03 拦截扩展调用 04 可封装复用性强在vue全局挂载导入main.js: import axios f ...
JQuery-学习笔记03【基础——DOM操作】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性...
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点获取所以子节点 a) . childNodes b) . children ...
03.JavaScript对DOM操作
JavaScript引入方式外部引入在head或者body中,添加以下代码 <script type="text/javascript" src="js/dem ...
前端开发工程师 - 03.DOM编程艺术 - 第1章.基础篇(下)
第1章.基础篇(下) Abstract: 数据通信.数据存储.动画.音频与视频.canvas.BOM.表单操作.列表操作数据通信(HTTP协议) HTTP事务: 客户端向服务器端发送HTTP请求报文 ...
为什么DOM操作很慢
转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...
项目开发总结：前端开发部分总结[兼容性、DOM操作、跨域等]（持续更新）
项目背景:.Net 3.5+MySQL+jQuery+WebService 在公司做这个项目已经6个多月了,总结一些问题,也算是抛砖引玉吧,希望园子里更多的朋友一起分享一些技巧. 1. WebServ ...
第一百一十四节，JavaScript文档对象，DOM进阶
JavaScript文档对象,DOM进阶学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

HTML_06(Dom(03))

HTML_06(Dom(03))相关推荐

最新文章

热门文章