1. DOM第一类重新认识
1.1 甚么是DOM第一类
DOM数学模型的全名是：Document Object Model, 即：文件格式第一类数学模型，它表述了操作方式文件格式第一类的USB。
WEB网页的HTML文件格式，document就是根节点，其他的子第一类是子节点.
DOM数学模型在AJAX合作开发中的促进作用
在ajax中，DOM数学模型只不过是最核心理念的内部结构，是大部份ajax合作开发的虚拟化．假如没DOM数学模型，就没配套措施在应用程序发生改变网页的文本，大部份的局部性创下，触发器允诺也就难于同时实现。熟练DOM数学模型的有关控制技术，才算或者说掌控了ajax合作开发一脉相承。
1.2 应用程序运载和表明网页的操作过程
1. 浏览源代码
2. 透过网页源代码读取有关文本到缓存，也是依照HTML源代码在缓存中构筑有关DOM第一类。
3. 依照DOM第一类的有关特性，来展开表明。
1.3 DOM节点展开分类node
1.3.1 节点的基本概念
在DOM数学模型中，整个文件格式是由层次不同的多个节点组成，可以说节点代表了全部文本。
1.3.2 节点的类型
元素节点、文本节点和特性节点
<font id=“font1” color=“red”>hello DOM!</font>文本节点和特性节点都看作元素节点的子节点
我们一般所说的节点指的是元素节点。
1.3.3 节点的基本特性
nodeName:元素节点返回节点类型(即，标记名称)；特性节点返回特性名称，文本节点返回”#text”.
nodeType:元素节点返回1，特性节点返回2，文本节点返回3
nodeValue:元素节点返回null, 特性节点返回特性值, 文本节点返回文本值。
1.4 DOM节点关系
应用程序在解析文件格式之前会将文件格式读取到缓存形成DOM树，树形节点存在有关层级关系，常用关系如下所示：
根节点(root): 大部份节点的顶层节点
父子节点（parent-child）：<html> 元素作为父级，<head> 和 <body> 元素作为子级
兄弟节点（Sibling）:<a> 和 <h1> 元素是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系
叶子节点: 没任何子节点的节点
空节点: 没任何文本的节点
1.使用document.getElementById()引用指定id的节点
function getNodeById() { var pNode = document.getElementById(“p”); console.log(pNode); console.log(“nodeName: “ + pNode.nodeName + “,nodeValue: “ + pNode.nodeValue + “,nodeType: “ + pNode.nodeType); }2. 使用
document.getElementsByClassName(“hello”)将大部份class特性为”hello”的元素节点放到一个数组中返回function getNodeByClassName() { var pNodes = document.getElementsByClassName(“hello”); for (var i = 0; i < pNodes.length; i++) { var pNode = pNodes[i]; console.log(pNode); console.log(“nodeName: “ + pNode.nodeName + “,nodeValue: “ + pNode.nodeValue + “,nodeType: “+ pNode.nodeType); } }3. 使用
document.getElementsByTagName(“a”)，将大部份<a>元素节点放到一个数组中返回。 function getNodeByTagName(){ var aNodes = document.getElementsByTagName(“a”); for (var i = 0; i < aNodes.length; i++) { varaNode = aNodes[i];console.log(aNode); console.log(“nodeName: “ + aNode.nodeName + “,nodeValue: “+ aNode.nodeValue +“,nodeType: “ + aNode.nodeType); } }4. 使用
document.getElementsByName(“gender”)，将大部份name特性为”gender”的元素节点放到一个数组中返回。function getNodeByName() { var radios = document.getElementsByName(“gender”); for (let i = 0; i < radios.length; i++) { var radio = radios[i]; console.log(radio); console.log(“nodeName: “+ radio.nodeName +“,nodeValue: “ + radio.nodeValue + “,nodeType: “+ radio.nodeType); } }2.2 间接获得元素第一类
间接引用节点
1.引用子节点
每个节点都有一个childNodes集合特性，类型是数组第一类，表示该节点的大部份子节点的集合。这些子节点按照它在文件格式中出现的顺序排列，因此可以透过索引来依次访问各个子节点。
firstChild
lastChild
2.引用父节点
DOM数学模型中，除了根节点，每个节点都仅有一个父节点，可以用parentNode属性来引用。
3. 引用兄弟节点
element.nextSibling; //引用下一个兄弟节点
element.previousSibling; //引用上一个兄弟节点
假如该节点没相应的兄弟节点，则特性返回null.
案例: 依照以下HTML内部结构，同时实现DOM节点有关操作方式：
<div id=“parent”> <p id=“p1”>白日依山尽</p> <p id=“p2”>黄河入海流</p> <p id=“p3”>欲穷千里目</p> <p id=“p4”>更上一层楼</p> </div> <button onclick=“getNodeByParent();”></button> <button onclick=“”></button> <button onclick=“”></button> function getNodeByParent() { / var parentNode = document.getElementById(“parent”); varchildNodes = parentNode.childNodes;console.log(“chiledNodes: “ + childNodes.length); console.log(“childElementCount: “+ parentNode.childElementCount);// 3. 遍历输出大部份的子节点 for (var i = 0; i < childNodes.length; i++) { varchildNode = childNodes[i];console.log(“==> 第” + (i + 1) + “个节点: “) console.log(childNode); console.log(“nodeName: “+ childNode.nodeName +“,nodeValue: “ + childNode.nodeValue + “,nodeType: “+ childNode.nodeType); } console.log(parentNode.firstChild); console.log(parentNode.lastChild); console.log(parentNode.firstElementChild);console.log(parentNode.lastElementChild); console.log(“=======================”); var childNodes = parentNode.children; for (var i = 0; i < childNodes.length; i++) { varchildNode = childNodes[i];console.log(childNode); } }function getNodeBySon() { varp2Node =document.getElementById(“p2”); var parentNode = p2Node.parentNode; console.log(parentNode);console.log(p2Node.parentElement); }function getNodeByBrother() { var p2Node = document.getElementById(“p2”); console.log(p2Node.nextElementSibling); console.log(p2Node.previousSibling); console.log(p2Node.previousElementSibling); }3. DOM操作方式元素的特性
元素节点.特性名称（可以读写特性值）
使用setAttritbute(), getAttribute()添加和设置特性
代码示例如下：
<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>DOM操作方式特性</title> <style> .box2 { background-color: red;color: green; font-size: 24px; } </style> </head> <body> <img src=“img/a.jpg” id=“img”> <div id=“div” class=“box1”>hello</div> <button onclick=“getMyAttribute();”></button> <button onclick=“setMyAttribute();”>设置节点的特性</button> <script> function getMyAttribute() { var imgNode = document.getElementById(“img”); var imgVal = imgNode.getAttribute(“src”); var idVal = imgNode.getAttribute(“id”); // 输出节点的值 console.log(imgVal); console.log(idVal); var divNode = document.getElementById(“div”); varclassVal = divNode.getAttribute(“class”); var idVal = divNode.getAttribute(“id”); console.log(classVal); console.log(idVal); } function setMyAttribute() { var imgNode = document.getElementById(“img”); imgNode.setAttribute(“src”, “img/b.jpg”); var divNode = document.getElementById(“div”); divNode.setAttribute(“src”, “”) div.setAttribute(“class”, “box2”); } </script> </body> </html>4. DOM操作方式元素文本
当标签获得值的时候使用value特性
双标签获得值的时候使用的是innerHTML或者innerText
双标签的特殊情况(value)
Select/textarea
取值的时候使用value特性
赋值的时候使用innerHTML或者innerText即可
innerHTML特性
InnerText节点的特性:
设置: 都是文本，应用程序不会解析里面包含的html标签
有关代码如下所示:
<!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> <div id=“div1”> <h1>标签</h1> </div> <button onclick=“getMyText()”></button> <button onclick=“setMyText()”>设置元素文本</button> <br> 简介: <input type=“text” id=“desc”> 家乡: <select name=“city” id=“city”> <option value=“武汉”>武汉</option> <option value=“兰州”>兰州</option> <option value=“银川”>银川</option> </select> <button onclick=“getDataFromInputText()”></button> <script> function getMyText() { var divNode = document.getElementById(“div1”); console.log(divNode.innerHTML); console.log(divNode.innerText); } function setMyText() { var divNode = document.getElementById(“div1”); // divNode.innerHTML = “<span style=color:red>HelloWorld</span>”; divNode.innerText = “<span style=color:red>HelloWorld</span>”; } function getDataFromInputText() { var descText = document.getElementById(“desc”); console.log(descText.value);var citySelect = document.getElementById(“city”); console.log(citySelect.value); } </script> </body> </html>5. DOM操作方式样式
1.透过style第一类发生改变节点的CSS
利用style第一类来控制元素的css, 每个style第一类对应为该元素指定的css, 而每个css特性都对应于style第一类的特性。
对于单个单词的css特性，在style第一类中的特性名称不变，但对于双单词或多单词的特性改写为骆驼写法。例如：css中的font-size对应style特性为fontSize.
2.使用className特性指定节点样式
节点的className特性对应于css中的类选择器。
有关代码如下所示：
<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>21.DOM第一类操作方式样式</title> <style> .box1 { background-color: blue; font-size: 30px; color: red; } .box2 { background-color: red; font-size: 24px; font-style: italic; color: green; } </style> </head> <body> <div id=“div1”>Hello Xyr</div> <button onclick=“onChangeStyle()”>节点样式的修改</button> <script> function onChangeStyle() { var divNode = document.getElementById(“div1”); // 3种方式 // 方式一: 透过className特性、divNode.className =“box1”; // 方式二: 透过节点的setAttribute方法 divNode.setAttribute(“class”, “box2”); // 方式三· 透过节点的style特性 divNode.style.backgroundColor =“black”; divNode.style.color = “white”; divNode.style.fontWeight =“700”; divNode.style.fontSize = “24px”; /* style 特性的修改 和 className 的区别 1 style 的修改是 在元素的行间添加style特性 2.style的修改 需要写很多css的样式 (稍微复杂) className 修改class 的特性 4. className修改 比 style的简单 */ } </script> </body> </html>6. DOM操作方式节点
使用document.createElement方法创建元素节点
var divElement = document.createElement(“div”)
使用appendChild方法添加节点
parentNode.appendChild(childElement);
使用insertBefore方法插入子节点
parentNode.insertBefore(newNode, beforeNode)
使用removeChild方法删除子节点
parentNode.removeChild(childNode);
使用replaceChild方法替换子节点
parentNode.replaceChild(newNode, childNode);
使用cloneNode方法克隆节点,传入true表示深拷贝
node.cloneNode(true);
有关操作方式代码如下所示:
<!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 id=“ul”> <li>AAA</li> <li>BBB</li> <li>CCC</li> <li>DDD</li> </ul> <div id=“div1”> </div> <button onclick=“addNode()”>添加节点</button> <button onclick=“addBeforeNode()”>在指定元素之前添加节点</button> <button onclick=“replaceNode()”>替换节点</button> <button onclick=“removeNode()”>删除节点</button> <button onclick=“cloneEleNode()”>复制节点</button> <script> function addNode() { // 1. 创建文本节点XXX var textNode = document.createTextNode(“XXX”); // 2. 创建li元素节点<li> var liEle = document.createElement(“li”); // 3. 将文本节点添加到li节点当中 liEle.appendChild(textNode); // 5. 将li元素节点添加到ul节点当中 ulEle.appendChild(liEle); } function addBeforeNode() { // 创建文本节点 var textNdoe = document.createTextNode(“ZZZ”); // 创建li元素节点<li> var liEle = document.createElement(“li”); // 将文本节点添加到li节点中 liEle.appendChild(textNdoe); var ulEle = document.getElementById(“ul”); var li3Ele = document.getElementsByTagName(“li”)[2]; // 将li节点插入到CCC节点之前 ulEle.insertBefore(liEle, li3Ele); } // 将DDD节点替换成百度链接 function replaceNode() { // 创建百度文本节点 var bdText = document.createTextNode(“百度一下,你就知道!!!”); // 创建超链接元素节点 var aEle = document.createElement(“a”); // 将百度文本节点添加到超链接元素节点中 aEle.appendChild(bdText); // 给超链接节点添加 href 特性 aEle.setAttribute(“href”, “http://www.baidu.com”); var ulEle = document.getElementById(“ul”); var li4Ele = document.getElementsByTagName(“li”)[3]; // 透过ul元素节点将DDD节点替换成超链接元素节点 ulEle.replaceChild(aEle, li4Ele); } // 移除AAA节点 function removeNode() { varli1Ele =document.getElementsByTagName(“li”)[0]; var ulEle = li1Ele.parentNode; // 透过父节点移除子节点AAA ulEle.removeChild(li1Ele); } // 将ul列表复制到div中 function cloneEleNode() { varulEle =document.getElementById(“ul”); var divEle = document.getElementById(“div1”); // 将ul节点展开克隆 var cloneNode = ulEle.cloneNode(false); divEle.appendChild(cloneNode); }</script> </body> </html>7. JavaScript操作方式表单
利用表单在文件格式中的索引或表单的name特性来引用表单
docuemnt.getEl代码如下所示:
<form id=“login” action=“server/server.html” method=“GET” name=“loginName”> 账号: <input type=“text” name=“account”><br> 密码: <input type=“password” name=“password”><br> <input type=“submit”> </form> <button onclick=“getFormNode()”></button> <button onclick=“getFormAttr()”></button> <script> function getFormNode() { var loginForm = document.getElementById(“login”); console.log(loginForm); var loginForm2 = document.loginName; console.log(loginForm2); console.log(loginForm3); // 方 console.log(loginForm4); } </script>表单常用特性如下表所示:
特性
描述
action
返回或者设置action特性
elements
个数组，包括该表单中大部份的表单域
length
返回表单的表单域的数量
method
返回或设置表单的method特性
name
返回或设置表单的name特性
代码示例如下所示:
function getFormAttr() { var loginForm = document.getElementById(“login”); console.log(loginForm.action); console.log(loginForm.length); console.log(loginForm.method); 单域第一类，返回的是一个数组 var forms = loginForm.elements; for(var i = 0; i < forms.length; i++) { var form = forms[i]; console.log(form); } }运行结果如下图所示:
7.3 表单第一类的常用方法
表单常用方法如下表所示:
方法
描述
submit()
相当于单击submit按钮，表示表单提交到指定网页
reset()
相当于单击reset按钮，表示大部份表单域到初始值
代码示例如下所示:
// 提交表单function submitForm() { var loginForm = document.getElementById(“login”); loginForm.submit(); } // 重置表单function resetForm() { var loginForm = document.getElementById(“login”); loginForm.reset(); }7.4 form表单的常用事件特性
表单常用事件特性如下表所示:
事件
描述
onsubmit
在表单提交之前触发
onreset
在表单被重置之前触发
注意:
1.表单点击提交会触发onsubmit事件，执行的函数需要给出返回值，返回true表示可以提交数据，返回false，表示不能提交数据
2.其中onsubmit特性的特性值return关键字不能省略，假如省略的 返回结果为false，还会提交数据和网页跳转。
3.reset表示重置到初始的状态，而不是清空。
7.5 form中表单域
代码示例如下所示:
function getFormField(){ var accountNode = document.getElementById(“accountId”); console.log(accountNode); // 透过表单的n var loginForm = document.getElementById(“login”); var accountNode2 = loginForm.account; console.log(accountNode2); var accountNode3 = loginForm.elements[0] console.log(accountNode3); }7.5 form表单域组件常用特性和方法.
disabled ：使表单域不能接受用户的操作方式，变为只读
readonly: 文本不可以更改，变为只读
单域的名称
type ：判断表单域的类型
focus():使表单域获得焦点
blur()：使表单域失去焦点
注意:
1. 设置readonly特性的时候only首字母需要大写才能生效
2. 一个网页只能够有一个组件设置为获得焦点
3. blur方法常用于在失去焦点时展开表单校验，部分代码如下所示：
<form id=“login” action=“server/server.html” method=“GET” name=“loginName”> 账号: <input id=“accountId” type=“text” name=“account” onblur=“checkAccount()”><span id=“msg”> </span><br> 密码: <input id=“pwdId” type=“password” name=“pwd”><br> <input type=“submit”> </form> <script> function checkAccount() { var accountNode = document.getElementById(“accountId”); var msgNode = document.getElementById(“msg”); var msg = accountNode.value; if (msg != null&& msg.length >0) { msgNode.innerText = “√ 账号合法”; msgNode.style.color = “green”; } else { msgNode.innerText = “× 账号不能为空”; msgNode.style.color =“red”; } } </script>readonly和disabled的区别?
共同点：都是导致文本不可以更改
区别：
readonly：中的文本是可以提交的
disabled：数据是不可以提交的,不可以在被操作方式
代码示例如下所示:
<body> <form id=“login” action=“server/server.html” method=“GET” name=“loginName”><span id=“msg”></span><br> 账号: <input id=“accountId” type=“text” name=“account”><br> 密码: <input id=“pwdId” type=“password” name=“pwd”><br> <input type=“submit”> </form> <button onclick=“getInputFields()”>表单域的常用特性设置</button> <script> function getInputValue() { var accountNode = document.getElementById(“accountId”); console.log(accountNode.value); // accountNode.disabled = true; // accountNode.readOnly = true; console.log(accountNode.name); console.log(accountNode.form); console.log(accountNode.type); accountNode.focus(); }</script> </body>7.6 单选按钮组和复选框常用操作方式
通过checked特性获得选中和未选中的状态。
复选框的处理类似单选按钮
me”)
使用复选按钮同时实现全选和反选效果图如下所示:
代码示例如下所示:
<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>DOM操作方式单选和复选按钮</title> </head> <body>性别:<input type=“radio” name=“gender” value=“male” checked=“checked”>男 <input type=“radio” name=“gender” value=“female”>女<br> <button onclick=“getRadioValues()”></button> <hr> <br> 爱好: <input id=“swimming” type=“checkbox” name=“hobby” value=“swimming”><label for=“swimming”>游泳</label> <input id=“football” type=“checkbox” name=“hobby” value=“football”><label for=“football”>足球</label> <input id=“basketball” type=“checkbox” name=“hobby” value=“basketball”><label for=“basketball”>篮球</label> <input id=“coding” type=“checkbox” name=“hobby” value=“coding”><label for=“coding”>写代码</label> <br> <input type=“checkbox” id=“boxid” onclick=“selAllNo();”/>全选/全不选<br> <button onclick=“getCheckBoxValues()”></button> <button onclick=“getCheckBoxValues()”>多选框全选操作方式</button> <button onclick=“selectAll()”>全选</button> <button onclick=“selectNone()”>全不选</button> <button onclick=“selectOther()”>反选</button> <hr> <script> function getRadioValues() { var radios = document.getElementsByName(“gender”); for(var i = 0; i < radios.length; i++) { var radioNode = radios[i]; if (radioNode.checked == true) { console.log(radioNode.value); } } }function getCheckBoxValues() { var hobbys = document.getElementsByName(“hobby”); for(var i = 0; i < hobbys.length; i++) { var checkboxNode = hobbys[i]; if(checkboxNode.checked == true) { console.log(checkboxNode.value); } } } //同时实现全选和全不选 function selAllNo() { /* 得到上面那个复选框 – 透过id获取到 判断这个复选框是否是选中 – if条件，checked==true 假如是选中，下面是全选 4、假如不是选中，下面是全不选 */ //得到上面复选框 var box1 = document.getElementById(“boxid”); //判断这个复选框是否是选择 if(box1.checked == true) { //是选择状态 //调用全选方法 selectAll(); } else { //不是选中状态 //调用全不选方法 selectNone(); } }//同时实现反选的操作方式 function selectOther() { 返回数组，遍历数组 3、得到每一个复选框 4、判断当前的复选框是选中还是不选中 – if(love1.checked == true) {} 5、假如选中，特性checked设置成false，否则，设置成true */ 操作方式的复选框 var hobbys = document.getElementsByName(“hobby”); //遍历数组 for (var i = 0; i < hobbys.length; i++) { //得到每一个复选框 var checkboxNode = hobbys[i]; //判断当前这个复选框是甚么状态 if (checkboxNode.checked == true) { //是选中的状态 //设置checked=false checkboxNode.checked = false; } else { //是不选中的状态 //把checked=true checkboxNode.checked =true; } } }//同时实现全不选的操作方式 function selectNone() { 2、返回的是数组，遍历数组 3、得到每一个复选框 4、设置复选框的特性 checked=false */ //得到要操作方式的复选框 var hobbys = document.getElementsByName(“hobby”); //遍历数组 for (var i = 0; i < hobbys.length; i++) { //得到每一个复选框 var checkboxNode = hobbys[i]; //设置特性的值checked = false; checkboxNode.checked = false; } } //同时实现全选的操作方式 function selectAll() { ElementsByName() 2、返回是数组， – 特性 checked判断复选框是否选中 *** checked = true; //表示选中 *** checked = false;//表示不选中 – 遍历数组，得到的是每一个checkbox * 把每一个checkbox特性checked=true */ var hobbys = document.getElementsByName(“hobby”); //遍历数组，得到每一个复选框 for (var i = 0; i < hobbys.length; i++) {var checkboxNode = hobbys[i]; //得到每一个复选框 //设置特性是true checkboxNode.checked = true; } }</script> </body> </html>7.7 下拉列表的使用
常用特性的使用
使用selec
使用option第一类的value特性和text特性, 可以读写这两个特性。
使用option第一类的selected特性选中该option
示例代码如下所示:
家乡: <select name=“city” id=“city” onchange=“changeText(this.value)”> <option value=“nc”>南昌</option> <option value=“bj”>北京</option> <option value=“sz”>深圳</option> <option value=“sh”>上海</option> </select> <button onclick=“getSelectNode();”></button> <button onclick=“addMyOption();”>添加选项</button> <script> function changeText(val) { alert(val); } function addMyOption() { var selectNode = document.getElementById(“city”); // 2. 创建一个option var opt = document.createElement(“option”); // 3. 设置option节点特性 opt.value = “cq”; opt.text = “重庆”; // 4. 将opt添加到select节点中 selectNode.add(opt); } </script>我们也可以透过下拉选项框第一类的appendChild方法或者add方法添加option节点，代码如下所示:
function addMyOption() { var selectNode = document.getElementById(“city”); // 2. 创建一个option var opt = document.createElement(“option”); // 3. 设置option节点特性 opt.value = “cq”; opt.text =“重庆”; // 4. 将opt添加到select节点中 selectNode.add(opt); }案例: 使用下拉选项框同时实现左选和右选添加的案例，效果图如下所示：
示例代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset=“UTF-8”> <title></title> <style type=“text/css”> #div1 { width: 1000px; margin: 0 auto; margin-top: 200px; } #div11 { width: 300px; height: 400px; border: 1px solid red; float: left; } #div12 { width: 200px; height: 400px; border: 1px solid blue; /*position: absolute;*/ /*left: 400px;*/ float: left; } #div13 { width: 300px; height: 400px; border: 1px solid green; float: left; } input { margin-left: 50px; } .add { margin-top:100px; } #select1 { width: 300px; height: 400px; } #select2 { width: 300px; height: 400px; } </style> </head> <body> <div id=“div1”> <div id=“div11”> <select id=“select1” multiple=“multiple”> <option id=“op1”>AAAAAAAAAAAAAAA</option> <option id=“op1”>BBBBBBBBBBBBBBB</option> <option id=“op1”>CCCCCCCCCCCCCCC</option> <option id=“op1”>DDDDDDDDDDDDDDD</option> <option id=“op1”>EEEEEEEEEEEEEEE</option> </select> </div> <div id=“div12”> <input type=“button” class=“add” onclick=“selectToRight()” value=“Add >” /> <br /><br /> <input type=“button” onclick=“selectToLeft()” value=“< Remove” /> <br /><br /><br /><br /> <input type=“button” onclick=“selecAllToRight()” value=“Add All >>” /><br /><br /> <input type=“button” onclick=“selecAllToLeft()” value=“<< RemoveAll” /> </div> <div id=“div13”> <select id=“select2” multiple=“multiple”> <option id=“op1”>HHHHHHHHHHHHHHH</option> <option id=“op1”>IIIIIIIIIIIIIII</option> <option id=“op1”>JJJJJJJJJJJJJJJ</option> <option id=“op1”>OOOOOOOOOOOOOOO</option> <option id=“op1”>PPPPPPPPPPPPPPP</option> </select> </div> </div> </body> <script type=“text/javascript”> function selectToRight() { 到select1标签 // 2.得到select标签的子标签 // 4.判断是否被选中 /* * 选中 未选中 */ var select1 = document.getElementById(“select1”); varselect2 =document.getElementById(“select2”); // 2.得到select标签的子标签 var options = select1.options; // 3.遍历子标签数组, /* * i=0 length = 5 * i=1 lenght = 5 */ for (var i = 0; i < options.length; i++) { var op = options[i]; // 4.判断是否被选中 if(op.selected ==true) { // 添加到select2中 select2.add(op); -; } } }function selecAllToRight() { var select1 = document.getElementById(“select1”); var select2 = document.getElementById(“select2”); // 得到标签中大部份的子标签 var options = select1.options; // 遍历子标签数组,得到每一个子标签 for (var i = 0; i < options.length; i++) { var op = options[i]; // 添// 将每一个子标签添加到select2中 select2.add(op); -; } } function selectToLeft() { select1标签 var select1 = document.getElementById(“select1”); var select2 = document.getElementById(“select2”); // 2.得到select标签的子标签 var options = select2.options; /* * i=0 length = 5 * i=1 lenght = 5 * */ for (var i = 0; i < options.length; i++) { var op = options[i]; // 4.判断是否被选中 if (op.selected == true) { // 添加到select2中select1.add(op); -; } } }function selecAllToLeft() { var select1 = document.getElementById(“select1”); varselect2 =document.getElementById(“select2”); // 得到标签中大部份的子标签 var options = select2.options; // 遍历子标签数组,得到每一个子标签 for (var i = 0; i < options.length; i++) { varop = options[i]; select1.add(op); i–; } }</script> </html> 二级联动案例如下所示: <!DOCTYPE html> <html> <head> <meta charset=“UTF-8”> <title>三级联动</title> </head> <body> <select id=“country” onchange=“addToSelect(this.value);”> <option value=“0”>–请选择–</option> <option value=“中国”>中国</option> <option value=“美国”>美国</option> <option value=“英国”>英国</option> <option value=“日本”>日本</option> </select> <select id=“city”></select> </body> <script type=“text/javascript”> // 表述数据源 var chinaArr = [“北京”, “上海”, “南京”, “南昌”]; var americaArr = [“华盛顿”,“纽约”, “底特律”, “费城”]; var englandArr = [“伦敦”]; var japanArr = [“广岛”, “长崎”, “东京”, “大阪”]; var country = new Array(4); country[0] = [“中国”, chinaArr]; country[1] = [“美国”, americaArr]; country[2] = [“英国”, englandArr]; country[3] = [“日本”, japanArr]; function addToSelect(selectValue) { // alert(selectValue); var countrySelect = document.getElementById(“country”); var citySelect = document.getElementById(“city”); varops = citySelect.getElementsByTagName(“option”); for (var i = 0; i < ops.length; i++) { varop = ops[i];// 移除option citySelect.removeChild(op); -; } for (var i = 0; i < country.length; i++) { var arr1 = country[i]; var firstValue = arr1[0]; // 判断是否和传入的值相同 if (firstValue == selectValue) { var otherValueArr = arr1[1]; for (var j = 0; j < otherValueArr.length; j++) { var value = otherValueArr[j]; // 创建option节点 var optionEle = document.createElement(“option”); // 创建文本节点 var textNode = document.createTextNode(value); // 将文本添加到option当中 optionEle.appendChild(textNode);// 将option添加到city选项中 citySelect.appendChild(optionEle); } } } }</script> </html>
