Dom lesson1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 这个是demo -->
<a href="www.baidu.com">百度</a>
</body>
</html>
dom中有5个基本的对象：
Document 文档对象
Element 元素对象
Text 文本对象
Attribute 属性对象
Common 注释对象
dom中的所有对象在页面加载时候，都会由浏览器自动创建好，并放到内存中，所以我们操作dom，先要获得这些对象
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> </head>
<body>
姓名:
<input type="text" id="userName" />
<br /> 性别:
<input type="text" id="userSex" />
<br />
<input type="button" value="提交" id="button" />
<table border="1" id="userTable">
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
</table>
</body>
<script type="text/javascript">
document.getElementById("button").onclick=function(){
var aa=document.getElementById("userName").value;
var sex=document.getElementById("userSex").value;
var td1=document.createElement("td");
var td2=document.createElement("td");
td1.innerHTML=aa;
td2.innerHTML=sex;
var tr=document.createElement("tr");
tr.appendChild(td1);
tr.appendChild(td2);
document.getElementById("userTable").appendChild(tr);
};
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
请选择您的爱好!<br/>
<input type="checkbox" id="checkall">全选/全不选<br/>
<input type="checkbox" name="ch">游泳
<input type="checkbox" name="ch">唱个歌
<input type="checkbox" name="ch">玄虚<br/>
<input type="button" value="全选"/>
<input type="button" value="全不选"/>
<input type="button" value="反选"/>
</body>
<script type="text/javascript">
document.getElementById("checkall").onclick=function(){
var chs=document.getElementsByName("ch");
for(var i=0;i<chs.length;i++){
chs[i].checked=this.checked;
}
}
</script>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style></head> <body> <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
document.getElementById("add").onclick=function(){
//1获得左侧的下拉选select
var first = document.getElementById("first");
var second = document.getElementById("second");
//2获得select中的所有option
var options = first.options;
//3遍历这些option 判断选中的状态
for(var i = 0 ; i < options.length ; i++){
var opt = options[i];
if(opt.selected){
//选中 ==> 将选中的option对象 添加到右侧select
second.appendChild(opt);
i--;
}
//没选中 ==> 什么都不做
}
}
</script>
</html>
Dom lesson1的更多相关文章
- DOM节点属性
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
- DOM对象，控制HTML元素
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 节点属性: 遍历 ...
- JavaScript进阶 - 第9章 DOM对象，控制HTML元素
第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- 通俗易懂的来讲讲DOM
DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...
随机推荐
- 基本的mediaQuery写法,不复习又忘记了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 整数划分 （区间DP）
整数划分(四) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 暑假来了,hrdv 又要留学校在参加ACM集训了,集训的生活非常Happy(ps:你懂得),可是他最近 ...
- Ibatis -- 一次执行多条SQL
<statement id="DeleteAccount" parameterClass="Account"> BEGIN DELETE FROM ...
- 【bzoj1042】 HAOI2008—硬币购物
http://www.lydsy.com/JudgeOnline/problem.php?id=1042 (题目链接) 题意 共有4种硬币,面值分别为c1,c2,c3,c4.某人去商店买东西,去了to ...
- Codeforces 650A Watchmen
传送门 time limit per test 3 seconds memory limit per test 256 megabytes input standard input output st ...
- codeforce 626E(二分）
E. Simple Skewness time limit per test 3 seconds memory limit per test 256 megabytes input standard ...
- 巧用jquery实现提交(submit)表单时候验证文本框是否为空
http://www.cnblogs.com/wifi/articles/2387131.html 先引用jquery Html部分--------------------------------- ...
- manifest package
http://www.android-doc.com/guide/topics/manifest/manifest-intro.html It names the Java package for t ...
- Android应用目录结构分析
一.手动创建android项目 手动创建一个Android项目,命名为HelloWorld,命令如下: android create project -n HelloWorld -t 1 -p E:/ ...
- MongoDB的增删改查 转
MongoDB的增删改查 (黎明你好原创作品,转载请注明) MongoDB中数据的基本单元叫做文档,采用json的键-值的方式.多个键及其关联的值有序的存放在一起变是文档.类似于编程语言中的键值关系. ...