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的了解是不可或缺的,所以本文力图系 ...
随机推荐
- .Net身份验证概述
一直以来,所有的系统基本都会有用户的登陆验证过程,整个过程其实也不难理解,就是对于cookie的解析.微软的.Net平台围绕用户身份验证授权也有好几个版本了,从早期的Membership到Identi ...
- 使用TransactionScopeOption 管理事务流
可通过调用一个方法来嵌套事务范围,该方法在使用其自己范围的方法中使用 TransactionScope,下面示例中的 RootMethod 方法就是前者这样的方法. void RootMethod() ...
- 执行quartz报错java.lang.NoClassDefFoundError: javax/transaction/UserTransaction
使用maven ,可以在 http://mvnrepository.com 中去查找 pom 配置如何写 <!-- https://mvnrepository.com/artifact/org. ...
- Hibernate-清理一级缓存
Session执行一些sql语句把内存中的对象的状态同步到数据库,这个过程被称为session清理. 在默认情况下,Session会在下面的时间点清理缓存. 1 当应用程序调用net.sf.hiber ...
- dispatch_sync may result in dead-lock
以下代码会引起死锁 dispatch_block_t block = ^{ ; i < ; i++) { NSLog(@"dispatch_sync:%d", i); } } ...
- 【bzoj1562】 NOI2009—变换序列
http://www.lydsy.com/JudgeOnline/problem.php?id=1562 (题目链接) 题意 给出一个序列(0~n-1),这个序列经过某个变换会成为另外一个序列,但是其 ...
- ECSHOP Inject PHPCode Into \library\myship.php Via \admin\template.php && \includes\cls_template.php Vul Tag_PHP_Code Execute Getshell
目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 PHP语言作为开源社区的一员,提供了各种模板引擎,如FastTemplate,Sm ...
- Java中各种（类、方法、属性）访问修饰符与修饰符的说明
类: 访问修饰符 修饰符 class 类名称 extends 父类名称 implement 接口名称 (访问修饰符与修饰符的位置可以互换) 访问修饰符 名称 说明 备注 public 可以被本项目的所 ...
- Glut 回调函数小结
2014-04-08 16:25:50 void glutDisplayFunc(void (*func)(void)); 注册当前窗口的显示回调函数 参数: func:形为void func( ...
- Protocol Buffers(Protobuf)开发者指南---概览
Protocol Buffers(Protobuf)开发者指南---概览 欢迎来到protocol buffers的开发者指南文档,protocol buffers是一个与编程语言无关‘.系统平台无关 ...