<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

           <div id="div1"></div>

           <div class="div2"></div>

    </body>

dom基础

</html>

<script>

    //<!--文档对象模型

    //第一步：取对象            -->

    var div1 = document.getElementById('div1') //    id取对象

    var div2 = document.getElementsByClassName('div2')[] //    class名取对象

    //第二步操作对象

    //1 改内容

    div1.innerHTML = "<b>加粗</b>"

    div2.innerText = "<b>加粗</b>"

    //2 改样式

    div1.style.color = "blue";

    div1.style.fontFamily = "华文彩云";

    //3 加事件

    div1.onclick=(){

        alert("点击事件出发")

    }

    //造新元素

    var new_div=document.createElement("div")

    //改样式/改内容

    new_div.innerHTML="新元素"

    document.body.appendChild(new_div);//增加

    document.body.removeChild(new_div);//删除

</script>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            #s1{

                width: 100px;                //下拉按钮宽度100像素

            }

        </style>

    </head>

    <body>

        <form action="" method="get">       //表单，提交方式为get

            <input type="text" name="t1" id="t1" />    //文本框，名字为t1，地址为t1

            <input type="button" id="but1" value="添加"/>  //名称为添加，地址为but1的按钮

            <select size="" id="s1" >                  // 地址为s1，下拉项为7的下拉菜单

            <input type="button" id="but2" value="删除">      //名称为删除，地址为but2的按钮

            </select>

        </form>

    </body>

</html>

     <script>

         var s1=document.getElementById("s1")         //创造新元素s1为从地址s1取得数

         var t1=document.getElementById("t1")

         var but1=document.getElementById("but1")

         var but2=document.getElementById("but2")

         but1.onclick=function(){                    //当点击添加按钮时，

                                                     //     下拉菜单添加从文本框中提取的值

             s1.innerHTML+="<option>"+t1.value+"</option>"

             t1.value="";

         }

         but2.onclick=function(){

             s1.removeChild(s1.selectedOptions[]);   //当点击删除按钮时，选中的选项的元素被移除

         }

     </script>

get 获取方式练习题及dom基础的更多相关文章

  1. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  2. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  3. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  4. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  5. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  6. DOM基础（四）

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

  7. DOM基础（二）

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

  8. BOM基础 计时器 定时器 DOM 基础

    -------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...

  9. 第五讲 DOM基础

    DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...

随机推荐

  1. 面试刷题17:线程两次start()会发生什么？

    线程是并发编程的基础元素,是系统调度的最小单元,现代的jvm直接对应了内核线程.为了降低并发编程的门槛,go语言引入了协程. 你好,我是李福春,我在准备面试,今天的题目是? 一个线程两次调用start ...

  2. 编译原理-第三章 词法分析-3.7 从正则表达式到自动机-DFA最简化

    DFA最简化 一.构造最简DFA 1.输入输出 2.步骤 3.注意点 4.代码 二.示例 例1: 例2: 参考--慕课-苏州大学

  3. eclipse-JEE配置Tomcat并发布第一个项目

    一.配置过程 Window--preferences--Server--Runtime Environment, 然后点击add 我下载的是Tomcat7.0,选择你的版本就行了 选择Tomcat的安 ...

  4. 从零开始实现穿衣图像分割完整教程（附python代码演练）

    时装业是人工智能领域很有前景的领域.研究人员可以开发具有一定实用价值的应用.我已经在这里展示了我对这个领域的兴趣,在那里我开发了一个来自Zalando在线商店的推荐和标记服装的解决方案. 在这篇文章中 ...

  5. Go语言micro之快速搭建微服务

    背景 go-micro给我们提供了一个非常便捷的方式来快速搭建微服务,而且并不需要提前系统了解micro,下面用一个简单的示例来快速实现一个服务. 创建Proto文件 因为我们要做微服务,那么就一定有 ...

  6. 模块 os 系统

    os系统 os模块是与操作系统交互的一个接口 os.makedirs('dirname1/dirname2') 可生成多层递归目录 os.removedirs('dirname1') 若目录为空,则删 ...

  7. ConcurrentHashMap红黑树的实现

    红黑树 红黑树是一种特殊的二叉树,主要用它存储有序的数据,提供高效的数据检索,时间复杂度为O(lgn),每个节点都有一个标识位表示颜色,红色或黑色,有如下5种特性:1.每个节点要么红色,要么是黑色:2 ...

  8. SQL实战（二）

    一. 获取所有员工当前的manager,如果当前的manager是自己的话结果不显示,当前表示to_date='9999-01-01'.结果第一列给出当前员工的emp_no,第二列给出其manager ...

  9. WebView中Java与JavaScript的交互

    原文首发于微信公众号:jzman-blog,欢迎关注交流! Android 开发过程中 WebView 的使用比较广泛,常用来加载网页,比如使用 WebView 加载新闻页面.使用 WebView 打 ...

  10. Promise入门详解

    异步调用 异步 JavaScript的执行环境是单线程. 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它 ...