<!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="&lt;--" />

       <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" />

        </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的更多相关文章

  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. hdu1828 线段树+离散化+扫描线

    添加lb[],rb[]数组,来标记竖边.添加num,来计算竖边的个数,因为计算周长的时候,未覆盖的竖边都要加. #include<stdio.h> #include<stdlib.h ...

  2. [Asp.net mvc] Asp.net mvc Kendo UI Grid的使用(四)

    有段时间没写博客了,工作状态比较忙,抽空继续总结下Grid的使用,这次主要介绍模板以及其他官网介绍不详尽的使用方法.先Show出数据,然后讲解下.后台代码: public ActionResult O ...

  3. Shell重定向＆>file、2>&1、1>&2的区别

    shell上: 0表示标准输入 1表示标准输出 2表示标准错误输出 > 默认为标准输出重定向,与 1> 相同 2>&1 意思是把 标准错误输出 重定向到 标准输出. & ...

  4. @RestController注解下返回到jsp视图页面(转)(转)

    这个问题我也遇到过,下面的方法可以试试 蓝萝卜blu @RestController注解下返回到jsp视图页面 spring4.1中添加了@RestController注解很方便,集成了@Respon ...

  5. 【bzoj1050】 旅行comf

    http://www.lydsy.com/JudgeOnline/problem.php?id=1050 (题目链接) 题意 给出一个无向图,求图中两点间某条路径使得最大权值除以最小权值的值最小 So ...

  6. The prefix "mvc" for element "mvc:annotation-driven" is not bound 的解决方法

    添加 xmlns:mvc="http://www.springframework.org/schema/mvc" http://www.springframework.org/sc ...

  7. java初学的分析

    java初学的分析第一阶段:入门阶段学习目标:简单项目开发学习内容:1.Java入门书籍,Java基础知识.关于Java入门级的书,给大家推荐过<Java编程思想>.<Java核心技 ...

  8. OAuth2.0认证和授权原理

    什么是OAuth授权?   一.什么是OAuth协议 OAuth(开放授权)是一个开放标准. 允许第三方网站在用户授权的前提下访问在用户在服务商那里存储的各种信息. 而这种授权无需将用户提供用户名和密 ...

  9. 在Vs2012 中使用SQL Server 2012 Express LocalDB打开Sqlserver2012数据库

    http://www.cnblogs.com/huangtailang/p/4221164.html 背景:个人电脑中使用的是VS2012,数据库为2008R2,最近需要打开一个SqlServer20 ...

  10. eclipse错误：Unable to read workbench state. Workbench UI layout will be reset.XML document structures

    Unable to read workbench state. Workbench UI layout will be reset.XML document structures must start ...