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的了解是不可或缺的,所以本文力图系 ...
随机推荐
- nginx 的源码安装
安装nginx之前要做的准备工作有:安装如下库 (1)gzip模块需要 zlib 库 (2)rewrite模块需要 pcre 库 (3)ssl 功能需要openssl库 还有一种简单的方法就是 yum ...
- BACKBONE源代码解析
//2014.11// Backbone.js 1.0.0 // (c) 2010-2013 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may b ...
- UVA5874 Social Holidaying 二分匹配
二分匹配简单题,看懂题意,建图比较重要. #include<stdio.h> #include<string.h> #define maxn 1100 int map[maxn ...
- poj2528 线段树+离散化
由于坐标可能很大,此时需要离散化,将值转化为对应的坐标. #include<stdio.h> #include<algorithm> using namespace std; ...
- Spring 常用注解
用注解来向Spring容器注册Bean.需要在applicationContext.xml中注册 <context:component-scan base-package=”pagkage1[, ...
- 加载数据库驱动程序的方法和JDBC的流程
加载驱动方法 1.Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver"); 2. DriverManager.r ...
- iOS关于rar解压第三方库Unrar4iOS使用总结
作者最近的公司项目要做实现rar解压的功能,在网上找了很久貌似关于rar解压的资料很少,不过有很多人推荐一个名叫“Unrar4iOS”的第三方开源框架,于是下载并尝试使用发现该开源框架并在使用过程中发 ...
- 3.Android之单选按钮RadioGroup和复选框Checkbox学习
单选按钮和复选框在实际中经常看到,今天就简单梳理下. 首先,我们在工具中拖进单选按钮RadioGroup和复选框Checkbox,如图: xml对应的源码: <?xml version=&quo ...
- 自动打包iOS项目
基于Lexrus的博文iOS-makefile,本文对自动打包涉及到的操作步骤以及理论基础进行了适当的补充. 请在阅读本文前先阅读<iOS makefile>.文章地址:http: ...
- ExtJS入门教程04，这是一个超级好用的grid
今天进行extjs入门教程的第四篇:grid. 来一份grid尝尝 小伙伴们都知道extjs的grid功能强大,更清楚功能强大的东西用起来必然会复杂.今天我们就从最简单的grid开始讲解. 先来一个最 ...