关于JS的DOM操作——重要实例的操作
1.复选框与按钮的配合使用的DOM操作
<body>
<input type="checkbox" id="ckb1" /><br><br>
<input type="button" value="下一步" id="btn1" disabled="disabled" />
</body>
<script>
document.getElementById('ckb1').onclick = function(){
var ckb1 = document.getElementById('ckb1');
var btn1 = document.getElementById('btn1');
if(ckb1.checked){
btn1.removeAttribute('disabled');
}
else{
btn1.setAttribute('disabled','');
}
}
</script>
2.下拉列表、文本框与按钮配合使用的DOM操作（两种方法）
<body>
<select id="skd" size="7" style="width: 100px;"></select><br>
<select id="slt" size="7" style="width: 100px;"></select><br>
<input type="text" id="ipt2" /><br>
<input type="text" id="txt" /><br>
<input type="button" id="btn2" value="添加"/>
</body>
<script>
//第一种方法(拼字符串)
// document.getElementById('btn2').onclick = function(){
// var ipt2= document.getElementById('txt').value;
// var skd = document.getElementById('skd');
// skd.innerHTML += "<option>"+ ipt2 +"</option>";
// document.getElementById('ipt2').value="";
// }
//第二种方法(造元素)
var txt = document.getElementById('txt');
var slt = document.getElementById('slt');
document.getElementById('btn2').onclick = function(){
// 新建一个option对象
var opt = document.createElement('option');
// 设置option对象的值（指向赋值）
opt.value = txt.value;
// 设置option对象的内容
opt.innerHTML = txt.value;
// 添加到slt（名）的对象
slt.appendChild(opt);
}
</script>
3.下拉列表与按钮的双向交换效果
<body>
<select id="oldSelect" size="10" multiple="multiple" style="width: 100px;float: left;position: relative">
<option >北京</option>
<option >上海</option>
<option >上海</option>
<option >深圳</option>
<option >香港</option>
</select>
<select id="newSelect" size="10" multiple="multiple" style="width: 100px;float: left;margin-left: 20px;position: relative;">
<option >篮球</option>
<option >游泳</option>
<option >击剑</option>
<option >排球</option>
<option >举重</option>
</select>
<br><br><br><br><br><br><br><br><br><br>
<input type="button" id="btn1" value="添加到右" style="float: left;"/>
<input type="button" id="btn2" value="添加到左" style="float: left;margin-left: 50px;"/>
<script>
document.getElementById('btn1').onclick=function(){
var oldSelect = document.getElementById('oldSelect');
for(var i=0;i<oldSelect.options.length;i++){
if(oldSelect.options[i].selected){
var newSelect = document.getElementById('newSelect');
newSelect.appendChild(oldSelect.options[i]);
}
}
alert(oldSelect.options[oldSelect.options.length].value);
}
document.getElementById('btn2').onclick=function(){
var newSelect = document.getElementById('newSelect');
for(var i=0;i<newSelect.options.length;i++){
if(newSelect.options[i].selected){
var oldSelect = document.getElementById('oldSelect');
oldSelect.appendChild(newSelect.options[i]);
}
}
alert(newSelect.options[newSelect.options.length].value);
}
</script>
关于JS的DOM操作——重要实例的操作的更多相关文章
- js的dom测试及实例代码
js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...
- js的dom对象（带实例超详细全解）
js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...
- js的dom操作（整理）（转）
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- Selenium2学习-014-WebUI自动化实战实例-012-Selenium 操作下拉列表实例-div+{js|jquery}
之前已经讲过了 Selenium 操作 Select 实现的下拉列表:Selenium2学习-010-WebUI自动化实战实例-008-Selenium 操作下拉列表实例-Select,但是在实际的日 ...
- Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法
此文用来记录学习笔记 •嗯!首先,什么是DOM(Document Object Model) –W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并 ...
- JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
- JS的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- JS的DOM操作语法
整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
随机推荐
- accp8.0转换教材第8章JavaScript对象及初识面向对象理解与练习
JavaScript数据类型,对象,构造函数,原型对象,初识原型链,对象继承 一.单词部分 ①object父类②constructor构造函数③instance实例④call调用 ⑤apply应用⑥c ...
- （转载）IQ 16.0 SP02起支持从压缩文件直接装载数据到表中
参考文档: http://m.blog.chinaunix.net/uid-16765068-id-4405877.htmlhttp://www.cnblogs.com/lichmama/p/4103 ...
- Hibernate的一个简单应用例子
Hibernate是一个开源的ORM框架,顾名思义,它的核心思想即ORM(Object Relational Mapping,对象关系映射),可以通过对象来操作数据库中的信息,据说开发者一开始是不太熟 ...
- Java List Remove时要注意的细节
1.如果你是在遍历的时候去remove一个对象 for(int i = 0, length = list.size(); i<length; i++){} 这种遍历需要每次remove时,对i- ...
- String to Integer (atoi) - 字符串转为整形，atoi 函数（Java ）
String to Integer (atoi) Implement atoi to convert a string to an integer. [函数说明]atoi() 函数会扫描 str 字符 ...
- 如何制作一个完美的全屏视频H5
写在前面的话: 最近一波H5广告火爆整个互联网圈,身为圈内人,我们怎能 不! 知!道! :( 嘘!真不知道的也继续看下去,有收获 ↓ ) So,搞懂这个并不难. 这篇文章将带你从头到尾了解H5 ...
- href设置action绝对路径和相对路径
绝对路径: 示例: <a href="<%=basePath %>account/list.action"></a> 注意:这里${basePa ...
- koa2 use里面的next到底是什么
koa2短小精悍,女人不爱男人爱. 之前一只有用koa写一点小程序,自认为还吼吼哈,知道有一天某人问我,你说一下 koa或者express中间件的实现原理.然后我就支支吾吾,好久吃饭都不香. 那么了解 ...
- 聊一聊FE面试那些事
聊一聊FE面试那些事 最近公司由于业务的扩展.技术的延伸需要招一批有能力的小伙伴加入,而我有幸担任"技术面试官"的角色前前后后面试了不下50多位候选人,如同见证了50多位前端开发者 ...
- 【HTML】html5新属性-datalist
摘要: 为实现输入域自动填充的效果 方法一: jquery-ui的autocomplete方法, 不是jquery 自带的方法. 方法二: 采用html5新特性,datalist,例子如下:坏处很明显 ...