1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8. <!-- 这个是demo -->
  9. <a href="www.baidu.com">百度</a>
  10. </body>
  11. </html>

dom中有5个基本的对象：

Document  文档对象

Element  元素对象

Text  文本对象

Attribute  属性对象

Common  注释对象

dom中的所有对象在页面加载时候，都会由浏览器自动创建好，并放到内存中，所以我们操作dom，先要获得这些对象

demo:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6.  
  7. </head>
  8. <body>
  9.     姓名:
  10.     <input type="text" id="userName" />
  11.     <br /> 性别:
  12.     <input type="text" id="userSex" />
  13.     <br />
  14.     <input type="button" value="提交" id="button" />
  15.     <table border="1" id="userTable">
  16.         <tr>
  17.             <td>姓名</td>
  18.             <td>性别</td>
  19.         </tr>
  20.     </table>
  21. </body>
  22. <script type="text/javascript">
  23. document.getElementById("button").onclick=function(){
  24.     var aa=document.getElementById("userName").value;
  25.     var sex=document.getElementById("userSex").value;
  26.     var td1=document.createElement("td");
  27.     var td2=document.createElement("td");
  28.     td1.innerHTML=aa;
  29.     td2.innerHTML=sex;
  30.     var tr=document.createElement("tr");
  31.     tr.appendChild(td1);
  32.     tr.appendChild(td2);
  33.     document.getElementById("userTable").appendChild(tr);
  34. };
  35. </script>
  36. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8. 请选择您的爱好!<br/>
  9. <input type="checkbox" id="checkall">全选/全不选<br/>
  10. <input type="checkbox" name="ch">游泳
  11. <input type="checkbox" name="ch">唱个歌
  12. <input type="checkbox" name="ch">玄虚<br/>
  13. <input type="button" value="全选"/>
  14. <input type="button" value="全不选"/>
  15. <input type="button" value="反选"/>
  16. </body>
  17. <script type="text/javascript">
  18. document.getElementById("checkall").onclick=function(){
  19.     var chs=document.getElementsByName("ch");
  20.     for(var i=0;i<chs.length;i++){
  21.         chs[i].checked=this.checked;
  22.     }
  23. }
  24. </script>
  25. </html>
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.  
  5. <title>无标题文档</title>
  6.  
  7. <style type="text/css">
  8.  
  9. </style></head>
  10.  
  11. <body>
  12.  
  13. <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
  14. <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  15.   <tr>
  16.     <td width="126">
  17.         <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
  18.         <select name="first" size="10" multiple="multiple" class="td3" id="first">
  19.           <option value="选项1">选项1</option>
  20.           <option value="选项2">选项2</option>
  21.           <option value="选项3">选项3</option>
  22.           <option value="选项4">选项4</option>
  23.           <option value="选项5">选项5</option>
  24.           <option value="选项6">选项6</option>
  25.           <option value="选项7">选项7</option>
  26.           <option value="选项8">选项8</option>
  27.         </select>
  28.     </td>
  29.     <td width="69" valign="middle">
  30.        <input name="add"  id="add" type="button" class="button" value="-->" />
  31.        <input name="add_all" id="add_all" type="button" class="button" value="==>" />
  32.        <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
  33.        <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />
  34.         </td>
  35.     <td width="127" align="left">
  36.       <select name="second" size="10" multiple="multiple" class="td3" id="second">
  37.          <option value="选项9">选项9</option>
  38.       </select>
  39.     </td>
  40.   </tr>
  41. </table>
  42. </div>
  43. </body>
  44. <script type="text/javascript">
  45. document.getElementById("add").onclick=function(){
  46.     //1获得左侧的下拉选select
  47.     var first = document.getElementById("first");
  48.     var second =  document.getElementById("second");
  49.     //2获得select中的所有option
  50.     var options = first.options;
  51.     //3遍历这些option 判断选中的状态
  52.     for(var i = 0 ; i < options.length ; i++){
  53.         var opt = options[i];
  54.         if(opt.selected){
  55.             //选中  ==> 将选中的option对象 添加到右侧select
  56.             second.appendChild(opt);
  57.             i--;
  58.         }
  59.             //没选中 ==> 什么都不做
  60.     }
  61. }
  62. </script>
  63. </html>

Dom lesson1的更多相关文章

  1. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  2. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  3. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

  4. DOM对象，控制HTML元素

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 节点属性: 遍历 ...

  5. JavaScript进阶 - 第9章 DOM对象，控制HTML元素

    第9章 DOM对象,控制HTML元素 9-1 认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属 ...

  6. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  7. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  8. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  9. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

随机推荐

  1. C/C++语言算法题——替换

    [问题] Description 给定一个有限长度的非负整数序列.一次操作是指从第一个元素开始,依次把数列中的每个数替换为它右边比它小的数的个数.对该数列不断进行这个操作.总有一个时刻该数列将不再发生 ...

  2. dell r710 服务器配置RAID5(3块硬盘做RAID5，另外再弄一块做数据冗余盘)

    本文完全转载于:http://www.jb51.net/article/53814.htm,只为做笔记使用 ①4块硬盘做成RAID5 ②3块硬盘做RAID5,一块硬盘做热备盘 这两种配置之间的区别.大 ...

  3. Java设计模式-桥接模式（Bridge）

    桥接模式就是把事物和其具体实现分开,使他们可以各自独立的变化.桥接的用意是:将抽象化与实现化解耦,使得二者可以独立变化,像我们常用的JDBC桥DriverManager一样,JDBC进行连接数据库的时 ...

  4. [原]Golang FileServer

    转载请注明出处 今天我们用go来搭建一个文件服务器FileServer,并且我们简单分析一下,它究竟是如何工作的.知其然,并知其所以然! 首先搭建一个最简单的,资源就挂载在服务器的根目录下,并且路由路 ...

  5. servlet 中 web.xml

    <servlet> <servlet-mapping> 他们之间的关系可以使一对一,也可是一对多的关系. <servlet> <servlet-name> ...

  6. FOJProblem 2214 Knapsack problem（01背包+变性思维）

    http://acm.fzu.edu.cn/problem.php?pid=2214 Accept: 4    Submit: 6Time Limit: 3000 mSec    Memory Lim ...

  7. CustomerConfigHelper

    public static class CustomerConfigHelper { public static object _lockObject = new object(); private ...

  8. c#中的23种设计模式

    C# 23种设计模式汇总 创建型模式 工厂方法(Factory Method) 在工厂方法模式中,工厂方法用来创建客户所需要的产品,同时还向客户隐藏了哪种具体产品类将被实例化这一细节.工厂方法模式的核 ...

  9. yum被锁Another app is currently holding the yum lock; waiting for it to exit...

    可能是系统自动升级正在运行,yum在锁定状态中. 可以通过强制关掉yum进程: #rm -f /var/run/yum.pid 然后就可以使用yum了.

  10. ECSHOP验证码背景图修改教程

    ECSHOP验证码背景图修改教程 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-11-18   ECSHOP验证码背景图修改教程: ECSHOP前后台的某些地 ...