<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> </head> <body> <form> 请选择你的业余爱好:<br> . 音乐<input type="checkbox"> . 阅读<input type="checkbox"> . 游泳<input type="checkbox"> . 篮球<input type="checkbox"> . 足球<input type="checkbox"> . 散步<input type="checkbox"> . 泡吧<input type="checkbox"> . 逛街<input type="checkbox"><br> <input type="button" value = "全选"> <input type="button" value = "反选"> <p>输入-序号选择，每次只可以选择一项：</p> <input type="text"> <input type="button" value="确定"> </form> <script> function optAll(){ //通过获取标签名设置全选 var oList = document.getElementById('list'); var aCheck = oList.getElementsByTagName('input'); for(var i=;i<aCheck.length;i++){ if(aCheck[i].type =='checkbox'){ aCheck[i].checked=true; } } } function noAll(){ //通过获取设置的name属性值设置反选 var aLove = document.getElementsByName('love'); for(var i=;i<aLove.length;i++){ if(aLove[i].type =='checkbox'){ aLove[i].checked=false; } } } var oBtn = document.getElementById('btn'); //给获取的按钮添加点击事件 oBtn.onclick = function (){ //获取文本框输入的值 var oTxt = document.getElementById("txt").value; //定义的复选框id值为like-。括号中进行的是字符串连接，id+输入到文本框的值=该元素的id值 var oLike = document.getElementById('like' + oTxt); oLike.checked = true; } </script> </body> </html>
3、DOM节点。
HTML文档可以说是由节点构成的集合，常见的DOM节点有三种，即元素节点、属性节点和文本节点。元素节点就是HTML标签，标签的属性就是属性节点，文本节点就是页面可以浏览的内容。
在文档对象模型中，每一个节点都是一个对象，DOM节点有三个重要的属性：节点的名称，节点的值和节点的类型。
(1)、nodeName：节点的名称
nodeName属性返回节点的名称。元素节点的名称与标签名相同(大写)，属性节点的名称是属性的名称，文本节点的名称永远都是#text，文档节点的名称永远都是#document。
(2)、nodeValue：节点的值
nodeValue属性返回节点的值。元素节点的值是undegined或null，属性节点的值是属性的值，文本节点的值是文本自身。
(3)、nodeType：节点的类型
nodeType属性返回节点的类型。以下是常见的节点类型：
<body> <ul> <li>JS</li> <li>DOM</li> </ul> <script> var nodes=document.getElementsByTagName('li'); for(var i=;i<nodes.length;i++){ document.write('第'+(i+)+'个节点的名称是'+nodes[i].nodeName+'<br>'); document.write('第'+(i+)+'个节点的值是'+nodes[i].nodeValue+'<br>'); document.write('第'+(i+)+'个节点的类型是'+nodes[i].nodeType+'<br>'); document.write('<br>'); } /* 返回： 第个节点的名称是LI 第个节点的值是null 第个节点的类型是 第个节点的名称是LI 第个节点的值是null 第个节点的类型是 */ </script> </body>
JS中函数可以嵌套使用，有父函数有子函数，HTML标签也可以嵌套使用，那么就说明存在着各种不同的节点关系，比如父节点、子节点和兄弟节点。为了方便操作，DOM定义了一些节点的公共属性。
(1)、子节点
childNodes属性返回节点的子节点集合，可使用length属性返回子节点的数量，然后就可以和数组一样获取需要的信息。
<body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script> var oUl=document.getElementById('u'); alert(oUl.childNodes.length); //返回： </script> </body>
通过上面的代码，可以看到返回的是11。ul下明明只有5个li元素，怎么会返回11呢？其实是这么回事：