<!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. nginx 负载均衡服务器的双机搞可用

    摘自书籍:<实战Nginx取代Apache高性能Web服务器>一书 P94 两种方式实现 一种方式是公司里的一台web服务器作为主服务器,另一台服务器作为热备服务器 主服务器绑定一个虚拟I ...

  2. OC基础--self关键字&super关键字

    PS:OC中的self关键字可以与C#中的this关键字区分记忆,虽然区别还是很大的. OC中的super关键字指的是父类指针 一.self关键字必须了解的知识: 1.使用场合:只能用在方法中(对象方 ...

  3. 【CodeForces 616D】Longest k-Good Segment

    题意 n个数里,找到最长的一个连续序列使里面最多k个不同的数. 分析 尺取法,每次R++,如果第R个数未出现过,那么不同的数+1,然后这个数的出现次数+1,如果不同的数大于k了,那就要去掉第L个数,直 ...

  4. 一个cheat命令 == Linux命令小抄大全

    本文介绍一个Linux超级命令,有了这个命令,你就可以开开心心的使用linux上的各种命令了.当你要执行一个linux命令,在这个命令参数选项众多时,你一般怎么做?对,我们大多数人都会去求助man命令 ...

  5. Git Pull 避免用户名和密码方法

    在开发中使用的版本控制器时git , 每次使用命令"git pull"从服务器获得最新代码时,都需要输入用户名和密码,这样浪费了大量的时间和热情,在此背景下,本文在网上找到解决版本 ...

  6. 大理石在哪？（Where is the Marble？，UVa 10474）

    参考:ACM紫书 第五章 P108 [排序与检索] 下面的代码中有些 提示性输出,想Ac 需删除提示性输出语句,读者自行修改. #include <cstdio> #include < ...

  7. C# ManualResetEvent 的方法介绍

        名称 说明 1. Close 在派生类中被重写时,释放由当前 WaitHandle 持有的所有资源. (继承自 WaitHandle.)在XNA Framework中,此成员由 Close() ...

  8. linux 查找php.ini 文件

    sudo find /* -name 'php.ini' /etc/php5/fpm/php.ini

  9. ThinkPHP自动获取关键词(调用第三方插件)

    ThinkPHP自动获取关键词调用在线discuz词库 先按照下图路径放好插件 方法如下 /** * 自动获取关键词(调用第三方插件) * @return [type] [description] * ...

  10. 百度站长工具进击site结果页面[SITE特型]

    最近在度娘上site站点是不是发现多了一个应用展示框?没错!这就是度娘新推出的site特型,仔细看一下是百度站长平台的相关功能,作为目前国内市场占有率比较高的搜索引擎,百度站长工具进击site结果页面 ...