1. DOM对象认识

1.1 什么是DOM对象

javascript自定义对象习题（JavaScript之DOM对象升学就业帮Java知识分享）(1)

DOM模型的全称是：Document Object Model, 即：文档对象模型，它定义了操作文档对象的接口。

WEB页面的HTML文档，document就是根节点，其它的子对象就是子结点.

DOM模型在AJAX开发中的作用

在ajax中，DOM模型其实是最核心的结构，是所有ajax开发的基础架构．如果没有DOM模型，就没有办法在客户端改变页面的内容，所有的局部刷新，异步请求也就无从实现。熟练掌握DOM模型的相关技术，才算真正掌握了ajax开发精髓。

1.2 浏览器装载和显示页面的过程

1. 下载源代码

2. 通过页面源代码加载相关内容到内存，也就是根据HTML源码在内存中构建相关DOM对象。

3. 根据DOM对象的相关属性，来进行显示。

javascript自定义对象习题（JavaScript之DOM对象升学就业帮Java知识分享）(2)

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> 元素并不是兄弟关系

叶子节点: 没有任何子节点的节点

空节点: 没有任何内容的节点

2. DOM对象的获取

2.1 获取元素节点对象

1.使用document.getElementById()引用指定id的结点

//需求:点击按钮实现通过id获取p节点以及节点的信息 functiongetNodeById(){ varpNode=document.getElementById("p"); console.log(pNode); console.log("nodeName:" pNode.nodeName ",nodeValue:" pNode.nodeValue ",nodeType:" pNode.nodeType); }

2. 使用document.getElementsByClassName(“hello”)将所有class属性为”hello”的元素结点放到一个数组中返回

functiongetNodeByClassName(){ varpNodes=document.getElementsByClassName("hello"); for(vari=0;i<pNodes.length;i ){ varpNode=pNodes[i]; console.log(pNode); console.log("nodeName:" pNode.nodeName ",nodeValue:" pNode.nodeValue ",nodeType:" pNode.nodeType); } }

3. 使用document.getElementsByTagName(“a”)，将所有<a>元素结点放到一个数组中返回。

functiongetNodeByTagName(){ varaNodes=document.getElementsByTagName("a"); for(vari=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”的元素结点放到一个数组中返回。

functiongetNodeByName(){ varradios=document.getElementsByName("gender"); for(leti=0;i<radios.length;i ){ varradio=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节点相关操作：

<divid="parent"> <pid="p1">白日依山尽</p> <pid="p2">黄河入海流</p> <pid="p3">欲穷千里目</p> <pid="p4">更上一层楼</p> </div> <buttononclick="getNodeByParent();">通过父节点获取子节点</button> <buttononclick="">通过子节点获取父节点</button> <buttononclick="">通过节点获取兄弟节点</button>

1. 通过父节点获取子节点

functiongetNodeByParent(){ //1.获取父节点 varparentNode=document.getElementById("parent"); //2.通过父节点获取所有子节点 varchildNodes=parentNode.childNodes; console.log("chiledNodes:" childNodes.length); console.log("childElementCount:" parentNode.childElementCount); //3.遍历输出所有的子节点 for(vari=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); } //4.获取第一个节点和最后一个节点 console.log(parentNode.firstChild); console.log(parentNode.lastChild); console.log(parentNode.firstElementChild); console.log(parentNode.lastElementChild); console.log("======================="); varchildNodes=parentNode.children; for(vari=0;i<childNodes.length;i ){ varchildNode=childNodes[i]; console.log(childNode); } }

2. 通过子节点获取父节点

functiongetNodeBySon(){ varp2Node=document.getElementById("p2"); //获取父节点 varparentNode=p2Node.parentNode; console.log(parentNode); console.log(p2Node.parentElement); }

3. 通过某个节点获取兄弟节点

functiongetNodeByBrother(){ varp2Node=document.getElementById("p2"); //获取紧邻的下一个节点console.log(p2Node.nextSibling); //获取紧邻的下一个元素节点 console.log(p2Node.nextElementSibling); //获取紧邻的上一个节点 console.log(p2Node.previousSibling); //获取紧邻的上一个元素节点 console.log(p2Node.previousElementSibling); }

3. DOM操作元素的属性

元素结点.属性名称（可以读写属性值）

使用setAttritbute(), getAttribute()添加和设置属性

代码示例如下：

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="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> <imgsrc="img/a.jpg"id="img"> <divid="div"class="box1">hello</div> <buttononclick="getMyAttribute();">获取节点的属性</button> <buttononclick="setMyAttribute();">设置节点的属性</button> <script> functiongetMyAttribute(){ varimgNode=document.getElementById("img"); //获取节点属性值 varimgVal=imgNode.getAttribute("src"); varidVal=imgNode.getAttribute("id"); //输出节点的值 console.log(imgVal); console.log(idVal); vardivNode=document.getElementById("div"); varclassVal=divNode.getAttribute("class"); varidVal=divNode.getAttribute("id"); console.log(classVal); console.log(idVal); } functionsetMyAttribute(){ varimgNode=document.getElementById("img"); imgNode.setAttribute("src","img/b.jpg"); vardivNode=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属性

innerHTML属性不局限于操作一个结点，而是可以使用HTML片段直接填充页面或直接获取HTML片段，大大提高了开发的灵活性。

InnerText节点的属性:

获取: 获取的是文本,不会获取标签

设置: 都是文本，浏览器不会解析里面包含的html标签

相关代码如下所示:

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> </head> <body> <divid="div1"> <h1>标签</h1> </div> <buttononclick="getMyText()">获取元素文本</button> <buttononclick="setMyText()">设置元素文本</button> <br> 简介:<inputtype="text"id="desc"> 家乡:<selectname="city"id="city"> <optionvalue="武汉">武汉</option> <optionvalue="兰州">兰州</option> <optionvalue="银川">银川</option> </select> <buttononclick="getDataFromInputText()">获取表单数据</button> <script> functiongetMyText(){ vardivNode=document.getElementById("div1"); console.log(divNode.innerHTML); console.log(divNode.innerText); } functionsetMyText(){ vardivNode=document.getElementById("div1"); //divNode.innerHTML="<spanstyle='color:red'>HelloWorld</span>"; divNode.innerText="<spanstyle='color:red'>HelloWorld</span>"; } functiongetDataFromInputText(){ vardescText=document.getElementById("desc"); console.log(descText.value); varcitySelect=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中的类选择器。

相关代码如下所示：

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="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> <divid="div1">HelloXyr</div> <buttononclick="onChangeStyle()">节点样式的修改</button> <script>functiononChangeStyle(){ vardivNode=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的区别 1style的修改是在元素的行间添加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);

相关操作代码如下所示:

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> </head> <body> <ulid="ul"> <li>AAA</li> <li>BBB</li> <li>CCC</li> <li>DDD</li> </ul> <divid="div1"> </div> <buttononclick="addNode()">添加节点</button> <buttononclick="addBeforeNode()">在指定元素之前添加节点</button> <buttononclick="replaceNode()">替换节点</button> <buttononclick="removeNode()">删除节点</button> <buttononclick="cloneEleNode()">复制节点</button> <script> functionaddNode(){ //1.创建文本节点XXXvartextNode=document.createTextNode("XXX"); //2.创建li元素节点<li>varliEle=document.createElement("li"); //3.将文本节点添加到li节点当中liEle.appendChild(textNode); //4.获取ul元素节点varulEle=document.getElementById("ul"); //5.将li元素节点添加到ul节点当中ulEle.appendChild(liEle); } functionaddBeforeNode(){ //创建文本节点 vartextNdoe=document.createTextNode("ZZZ"); //创建li元素节点<li> varliEle=document.createElement("li"); //将文本节点添加到li节点中 liEle.appendChild(textNdoe); //获取ul元素节点 varulEle=document.getElementById("ul"); //获取CCC元素节点 varli3Ele=document.getElementsByTagName("li")[2]; //将li节点插入到CCC节点之前 ulEle.insertBefore(liEle,li3Ele); } //将DDD节点替换成百度链接 functionreplaceNode(){ //创建百度文本节点 varbdText=document.createTextNode("百度一下,你就知道!!!"); //创建超链接元素节点 varaEle=document.createElement("a"); //将百度文本节点添加到超链接元素节点中 aEle.appendChild(bdText); //给超链接节点添加href属性 aEle.setAttribute("href","http://www.baidu.com"); //获取ul元素节点 varulEle=document.getElementById("ul"); //获取DDD元素节点 varli4Ele=document.getElementsByTagName("li")[3]; //通过ul元素节点将DDD节点替换成超链接元素节点 ulEle.replaceChild(aEle,li4Ele); } //移除AAA节点 functionremoveNode(){ //获取AAA节点 varli1Ele=document.getElementsByTagName("li")[0]; //通过AAA节点获取父节点 varulEle=li1Ele.parentNode; //通过父节点移除子节点AAA ulEle.removeChild(li1Ele); } //将ul列表复制到div中 functioncloneEleNode(){ //获取ul节点 varulEle=document.getElementById("ul"); //获取div节点 vardivEle=document.getElementById("div1"); //将ul节点进行克隆 varcloneNode=ulEle.cloneNode(false); divEle.appendChild(cloneNode); } </script> </body> </html>

7. JavaScript操作表单

7.1 获取表单对象的方法

利用表单在文档中的索引或表单的name属性来引用表单

  1. docuemnt.getElementById 通过id获取表单对象
  2. document.formName 通过document对象的表单name属性获取表单对象
  3. document.forms[i] 通过文档的foms属性得到所有的表单对象，返回表单的数组，通过索引获取对应的表单对象
  4. document.forms[formName] 通过文档的foms属性得到所有的表单对象，返回表单的数组，通过表单name属性获取对应的表单对象

代码如下所示:

<formid="login"action="server/server.html"method="GET"name="loginName"> 账号:<inputtype="text"name="account"><br> 密码:<inputtype="password"name="password"><br> <inputtype="submit"> </form> <buttononclick="getFormNode()">获取表单对象</button> <buttononclick="getFormAttr()">获取表单属性</button> <script> //获取表单对象 functiongetFormNode(){ //方式一:通过id获取表单 varloginForm=document.getElementById("login"); console.log(loginForm); //方式二:通过formName来获取 varloginForm2=document.loginName; console.log(loginForm2); //方式三:forms属性来获取，拿到文档中所有的form表单，通过下标获取指定的formvarloginForm3=document.forms[0]; console.log(loginForm3); //方式四:forms属性来获取，拿到文档中所有的form表单，通过名称获取指定的formvarloginForm4=document.forms['loginName']; console.log(loginForm4); } </script>

7.2 获取表单常用属性

表单常用属性如下表所示:

属性

描述

action

返回或者设置action属性

elements

获取一个数组，包括该表单中所有的表单域

length

返回表单的表单域的数量

method

返回或设置表单的method属性

name

返回或设置表单的name属性

代码示例如下所示:

//获取表单属性 functiongetFormAttr(){ varloginForm=document.getElementById("login"); //获取表单的action属性 console.log(loginForm.action); //获取表单的长度 console.log(loginForm.length); //获取表单的method属性 console.log(loginForm.method); //获取所有表单域对象，返回的是一个数组 varforms=loginForm.elements; for(vari=0;i<forms.length;i ){ varform=forms[i];console.log(form); } }

运行结果如下图所示:

javascript自定义对象习题（JavaScript之DOM对象升学就业帮Java知识分享）(3)

7.3 表单对象的常用方法

表单常用方法如下表所示:

方法

描述

submit()

相当于单击submit按钮，表示表单提交到指定页面

reset()

相当于单击reset按钮，表示所有表单域到初始值

代码示例如下所示:

//提交表单functionsubmitForm(){ varloginForm=document.getElementById("login"); loginForm.submit(); } //重置表单functionresetForm(){ varloginForm=document.getElementById("login"); loginForm.reset(); }

7.4 form表单的常用事件属性

表单常用事件属性如下表所示:

事件

描述

onsubmit

在表单提交之前触发

onreset

在表单被重置之前触发

注意:

1.表单点击提交会触发onsubmit事件，执行的函数需要给出返回值，返回true表示可以提交数据，返回false，表示不能提交数据

2.其中onsubmit属性的属性值return关键字不能省略，如果省略的 返回结果为false，还会提交数据和页面跳转。

3.reset表示重置到初始的状态，而不是清空。

7.5 form中表单域对象的获取

可以通过如下三种方式获取:

  1. 通过id获取表单域
  2. 通过表单的name来获取
  3. form.elements[i]; 表单的元素下标来获取

代码示例如下所示:

functiongetFormField(){ //通过id获取表单域 varaccountNode=document.getElementById("accountId"); console.log(accountNode); //通过表单的name来获取 varloginForm=document.getElementById("login"); varaccountNode2=loginForm.account; console.log(accountNode2); //form.elements[i];表单的元素下标来获取 varaccountNode3=loginForm.elements[0]'' console.log(accountNode3); }

7.5 form表单域组件常用属性和方法.

disabled ：使表单域不能接受用户的操作，变为只读

readonly: 内容不可以更改，变为只读

name ：获取或设置表单域的名称

form：获取该表单域所属的表单

value：获取或设置表单域的值

type ：判断表单域的类型

focus():使表单域获得焦点

blur()：使表单域失去焦点

注意:

1. 设置readonly属性的时候only首字母需要大写才能生效

2. 一个页面只能够有一个组件设置为获得焦点

3. blur方法常用于在失去焦点时进行表单校验，部分代码如下所示：

<formid="login"action="server/server.html"method="GET"name="loginName">

账号:<inputid="accountId"type="text"name="account" onblur="checkAccount()"><spanid="msg"> </span><br> 密码:<inputid="pwdId"type="password"name="pwd"><br> <inputtype="submit"> </form> <script> functioncheckAccount(){ varaccountNode=document.getElementById("accountId"); varmsgNode=document.getElementById("msg"); varmsg=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><formid="login"action="server/server.html"method="GET"name="loginName"><spanid="msg"></span><br> 账号:<inputid="accountId"type="text"name="account"><br> 密码:<inputid="pwdId"type="password"name="pwd"><br> <inputtype="submit"> </form> <buttononclick="getInputFields()">表单域的常用属性设置</button> <script> functiongetInputValue(){ varaccountNode=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属性获得选中和未选中的状态。

获得单选按钮组的值：只能通过遍历单选按钮来获取被选中的值

复选框的处理类似单选按钮

获取所有单选按钮或者复选按钮对象使用getElementByName("name")

使用复选按钮实现全选和反选效果图如下所示:

javascript自定义对象习题（JavaScript之DOM对象升学就业帮Java知识分享）(4)

代码示例如下所示:

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>DOM操作单选和复选按钮</title> </head> <body> 性别:<inputtype="radio"name="gender"value="male"checked="checked">男 <inputtype="radio"name="gender"value="female">女<br> <buttononclick="getRadioValues()">获取单选框的值</button> <hr> <br>爱好:<inputid="swimming"type="checkbox"name="hobby"value="swimming"><labelfor="swimming">游泳</label> <inputid="football"type="checkbox"name="hobby"value="football"><labelfor="football">足球</label> <inputid="basketball"type="checkbox"name="hobby"value="basketball"><labelfor="basketball">篮球</label> <inputid="coding"type="checkbox"name="hobby"value="coding"><labelfor="coding">写代码</label><br> <inputtype="checkbox"id="boxid"onclick="selAllNo();"/>全选/全不选<br> <buttononclick="getCheckBoxValues()">获取多选框的值</button> <buttononclick="getCheckBoxValues()">多选框全选操作</button> <buttononclick="selectAll()">全选</button> <buttononclick="selectNone()">全不选</button> <buttononclick="selectOther()">反选</button> <hr> <script>functiongetRadioValues(){ varradios=document.getElementsByName("gender"); for(vari=0;i<radios.length;i ){ varradioNode=radios[i]; if(radioNode.checked==true){ console.log(radioNode.value); } } } functiongetCheckBoxValues(){ varhobbys=document.getElementsByName("hobby"); for(vari=0;i<hobbys.length;i ){ varcheckboxNode=hobbys[i]; if(checkboxNode.checked==true){ console.log(checkboxNode.value); } } } //实现全选和全不选 functionselAllNo(){ /* 得到上面那个复选框 -通过id获取到 判断这个复选框是否是选中 -if条件，checked==true 如果是选中，下面是全选 4、如果不是选中，下面是全不选 */ //得到上面复选框 varbox1=document.getElementById("boxid"); //判断这个复选框是否是选择 if(box1.checked==true){//是选择状态 //调用全选方法 selectAll(); }else{//不是选中状态 //调用全不选方法 selectNone(); } } //实现反选的操作 functionselectOther(){ /* 获取到要操作的复选框 返回数组，遍历数组 3、得到每一个复选框 4、判断当前的复选框是选中还是不选中 -if(love1.checked==true){} 5、如果选中，属性checked设置成false，否则，设置成true */ //获取要操作的复选框 varhobbys=document.getElementsByName("hobby"); //遍历数组 for(vari=0;i<hobbys.length;i ){ //得到每一个复选框 varcheckboxNode=hobbys[i]; //判断当前这个复选框是什么状态 if(checkboxNode.checked==true){//是选中的状态 //设置checked=false checkboxNode.checked=false; }else{//是不选中的状态 //把checked=true checkboxNode.checked=true; } } } //实现全不选的操作 functionselectNone(){ /* 1、获取到要操作的复选框 2、返回的是数组，遍历数组 3、得到每一个复选框 4、设置复选框的属性checked=false */ //得到要操作的复选框 varhobbys=document.getElementsByName("hobby"); //遍历数组 for(vari=0;i<hobbys.length;i ){ //得到每一个复选框 varcheckboxNode=hobbys[i]; //设置属性的值checked=false; checkboxNode.checked=false; } } //实现全选的操作 functionselectAll(){ /* 获取要操作的复选框 -使用getElementsByName() 2、返回是数组， -属性checked判断复选框是否选中 ***checked=true;//表示选中 ***checked=false;//表示不选中 -遍历数组，得到的是每一个checkbox *把每一个checkbox属性checked=true */ //获取要操作的复选框 varhobbys=document.getElementsByName("hobby"); //遍历数组，得到每一个复选框 for(vari=0;i<hobbys.length;i ){ varcheckboxNode=hobbys[i]; //得到每一个复选框 //设置属性是true checkboxNode.checked=true; } } </script> </body> </html>

7.7 下拉列表的使用

常用属性的使用

使用value属性获取和设置下拉列表选中选项的值

使用selectedIndex属性获取当前被选中选项的索引

使用options属性获取所有选项集合

使用option对象的value属性和text属性, 可以读写这两个属性。

使用option对象的selected属性选中该option

示例代码如下所示:

家乡:<selectname="city"id="city"onchange="changeText(this.value)"> <optionvalue="nc">南昌</option> <optionvalue="bj">北京</option> <optionvalue="sz">深圳</option> <optionvalue="sh">上海</option> </select> <buttononclick="getSelectNode();">获取下拉框的值</button> <buttononclick="addMyOption();">添加选项</button> <script> functionchangeText(val){ alert(val); } functionaddMyOption(){ //1.获取到select节点 varselectNode=document.getElementById("city"); //2.创建一个option varopt=document.createElement("option"); //3.设置option节点属性 opt.value="cq"; opt.text="重庆"; //4.将opt添加到select节点中 selectNode.add(opt); } </script>

我们也可以通过下拉选项框对象的appendChild方法或者add方法添加option节点，代码如下所示:

functionaddMyOption(){ //1.获取到select节点 varselectNode=document.getElementById("city"); //2.创建一个option varopt=document.createElement("option"); //3.设置option节点属性 opt.value="cq"; opt.text="重庆"; //4.将opt添加到select节点中 selectNode.add(opt); }

案例: 使用下拉选项框实现左选和右选添加的案例，效果图如下所示：

javascript自定义对象习题（JavaScript之DOM对象升学就业帮Java知识分享）(5)

示例代码如下所示:

<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #div1{ width:1000px; margin:0auto; margin-top:200px; } #div11{ width:300px; height:400px; border:1pxsolidred; float:left; } #div12{ width:200px; height:400px; border:1pxsolidblue; /*position:absolute;*/ /*left:400px;*/ float:left; } #div13{ width:300px; height:400px; border:1pxsolidgreen; float:left; } input{ margin-left:50px; } .add{ margin-top:100px; } #select1{ width:300px; height:400px; } #select2{ width:300px; height:400px; } </style> </head> <body> <divid="div1"> <divid="div11"> <selectid="select1"multiple="multiple"> <optionid="op1">AAAAAAAAAAAAAAA</option> <optionid="op1">BBBBBBBBBBBBBBB</option> <optionid="op1">CCCCCCCCCCCCCCC</option> <optionid="op1">DDDDDDDDDDDDDDD</option> <optionid="op1">EEEEEEEEEEEEEEE</option> </select> </div> <divid="div12"> <inputtype="button"class="add"onclick="selectToRight()"value="Add>"/><br/><br/> <inputtype="button"onclick="selectToLeft()"value="<Remove"/><br/><br/><br/><br/> <inputtype="button"onclick="selecAllToRight()"value="AddAll>>"/><br/><br/><inputtype="button"onclick="selecAllToLeft()"value="<<RemoveAll"/> </div> <divid="div13"> <selectid="select2"multiple="multiple"> <optionid="op1">HHHHHHHHHHHHHHH</option> <optionid="op1">IIIIIIIIIIIIIII</option> <optionid="op1">JJJJJJJJJJJJJJJ</option> <optionid="op1">OOOOOOOOOOOOOOO</option> <optionid="op1">PPPPPPPPPPPPPPP</option> </select> </div> </div> </body> <scripttype="text/javascript"> functionselectToRight(){ //1.获取到select1标签 //2.得到select标签的子标签 //3.遍历子标签数组,获取到每一个option //4.判断是否被选中 /* *选中 *获取到select2标签 *添加到select2中 *未选中 */ //1.获取到select1标签 varselect1=document.getElementById("select1"); varselect2=document.getElementById("select2"); //2.得到select标签的子标签 varoptions=select1.options; //3.遍历子标签数组,获取到每一个option /* *i=0length=5 *i=1lenght=5 */ for(vari=0;i<options.length;i ){ varop=options[i]; //4.判断是否被选中 if(op.selected==true){ //添加到select2中 select2.add(op); -; } } } functionselecAllToRight(){ //获取到select1中标签 varselect1=document.getElementById("select1"); varselect2=document.getElementById("select2"); //得到标签中所有的子标签 varoptions=select1.options; //遍历子标签数组,得到每一个子标签 for(vari=0;i<options.length;i ){ varop=options[i]; //添//将每一个子标签添加到select2中 select2.add(op); -; } } functionselectToLeft(){ //1.获取到select1标签 varselect1=document.getElementById("select1"); varselect2=document.getElementById("select2"); //2.得到select标签的子标签 varoptions=select2.options; //3.遍历子标签数组,获取到每一个option /* *i=0length=5 *i=1lenght=5 * */ for(vari=0;i<options.length;i ){ varop=options[i]; //4.判断是否被选中 if(op.selected==true){ //添加到select2中 select1.add(op); -; } } } functionselecAllToLeft(){ //获取到select1中标签 varselect1=document.getElementById("select1"); varselect2=document.getElementById("select2"); //得到标签中所有的子标签 varoptions=select2.options; //遍历子标签数组,得到每一个子标签 for(vari=0;i<options.length;i ){ varop=options[i]; select1.add(op); i--; } } </script> </html> 二级联动案例如下所示: <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>三级联动</title> </head> <body> <selectid="country"onchange="addToSelect(this.value);"> <optionvalue="0">--请选择--</option> <optionvalue="中国">中国</option> <optionvalue="美国">美国</option> <optionvalue="英国">英国</option> <optionvalue="日本">日本</option> </select> <selectid="city"></select> </body> <scripttype="text/javascript"> //定义数据源 varchinaArr=["北京","上海","南京","南昌"]; varamericaArr=["华盛顿","纽约","底特律","费城"]; varenglandArr=["伦敦"]; varjapanArr=["广岛","长崎","东京","大阪"]; varcountry=newArray(4); country[0]=["中国",chinaArr]; country[1]=["美国",americaArr]; country[2]=["英国",englandArr]; country[3]=["日本",japanArr]; functionaddToSelect(selectValue){ //alert(selectValue); //获取到country和city两个下拉选项框 varcountrySelect=document.getElementById("country"); varcitySelect=document.getElementById("city"); //获取到citySelct中所有的option varops=citySelect.getElementsByTagName("option"); for(vari=0;i<ops.length;i ){ //获取到每一个城市的option varop=ops[i]; //移除option citySelect.removeChild(op); -; } //获取到所有的对应选中国家的城市 for(vari=0;i<country.length;i ){ vararr1=country[i]; //获取到第一个元素 varfirstValue=arr1[0]; //判断是否和传入的值相同 if(firstValue==selectValue){ varotherValueArr=arr1[1]; for(varj=0;j<otherValueArr.length;j ){ //获取到二维数组中每一个一维数组的元素 varvalue=otherValueArr[j]; //创建option节点 varoptionEle=document.createElement("option"); //创建文本节点 vartextNode=document.createTextNode(value); //将文本添加到option当中 optionEle.appendChild(textNode); //将option添加到city选项中 citySelect.appendChild(optionEle); } } } } </script> </html>

,