同一种功能两种方法：

 　　　　<script type='text/javascript'>

             <!--

             var tag = document.creatElement("a");

             tag.href = 'http://www.baidu.com';

             tag.innerText = '点我啊';

             var id1 = document.getElementById('t1');

             id1.appendChild(tag);

             -->

             var tag = '<a href="http://baidu.com">zouni</a>'

             var id1=document.getElementById('t1')

             id1.appendChild(tag)

         </script>     

上述方法可以使用html的很多操作，例如css的属性可以通过此方式修改，标签可以插入，标签的属性修改，标签的内容可以插入。
 <body>

         <form id='f1' action='https://www.sogou.com/web?' method='GET'>

             <input id='query' type='text' name='query'/>  //在服务器端一般都是通过name来获取我要发送的值，name就类似于key

             <!--<input type='submit' value='提交'>-->   //这个是默认就会提交

             <input type='button' value=‘伪提交' onclick='foo()；'/>     //这个是利用button来提交，这个一般没有什么效果，所以在foo()函数中使用提交，在foo()函数中可以定义我需要识别内容，可以让这个函数内部检查我是否输入正确，是否输入合适的字符。

         </form>

         <script type='text/javascript'>

             function foo(){

                 document.getElementById('f1').submit();

             }

         </script>     

         <script type='text/javascript'>alert('bill');</script>

 </body>

搜索框实例：

 <html>

     <head>

                 <meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

                 <style>

                     .black{

                         color:black;

                     }

                     .gray{

                         color:gray;

                     }

                 </style>

     </head>

     <body>

         <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='enter();' onblur='leave();'/> //但鼠标落在框里与框外的区别

         <script type='text/javascript'>

             function enter(){

                 var id = document.getElementById('tip');;

                 id.className = 'black';

                 if(id.value=='请输入关键字'|| id.value.trim()==''){  //trim()用于消除字符串两端的空白字符

                     id.value='';

                 }

             }

             function leave(){

                 var id = document.getElementById('tip')

                 var val =  id.value;

                 if (val.length==0 || id.value.trim()==''){

                     id.value='请输入关键字';

                     id.className='gray';

                 }else{

                     id.className='black';

                 }

             }

         </script>

     </body>

 </html>

滚动条：

<div style='width:500px;background-color:red;'>

      <div id='nima' style='width:10%;background-color:green;height:10px;'></div>

</div>   

<script type='text/javascript'>

         tmp=10;

             function foo(){

                 var id = document.getElementById('nima');

                 tmp=tmp+10;

                 if(tmp>100){

                      clearInterval(interval);

                 }else{

                      id.style.width=tmp+'%';

                 }

             }

             interval=setInterval('foo()',500);  //每半秒钟执行一次，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

</script>     

如果此时我将setInterval改成setTimeout,此时就变成0.5秒后再执行一次就不执行了。

DOM实例的更多相关文章

  1. HTML DOM 实例-Document 对象

    使用 document.write() 向输出流写文本 <html><body><script type="text/javascript">d ...

  2. JS DOM 实例（5大常用实例）

    第1个实例:循环单击变色 <html lang="en"> <head> <meta charset="UTF-8"> &l ...

  3. Dom实例：数据自增、搜索框及跑马灯

    数据自增 功能:当点击add按扭后,div标签中的数据自动+1,实现网页的动态化 <!DOCTYPE html> <html lang="en"> < ...

  4. HTML DOM 实例

    DOMAnchor 对象 更改一个链接的文本.URL 以及 target 使用 focus() 和 blur() 向超链接添加快捷键 Document 对象 使用 document.write() 向 ...

  5. dom实例，模态框，全选，反选，取消

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 02: DOM 实例

    1.1 Event 对象 <body> <a id="myAnchor" href="http://www.microsoft.com"> ...

  7. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  8. 关于DOM的一些总结（未完待续......）

    DOM 实例1:购物车实例(数量,小计和总计的变化) 这里主要是如何获取页面元素的节点: document.getElementById("...") cocument.query ...

  9. HTML DOM（学习笔记二）

    嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...

随机推荐

  1. SecureCRT中 secureCRT使用VIM时对语法高亮

    1.在SecureCRT中 secureCRT使用VIM时对语法高亮 其实不是secureCRT的功能,而是VIM的 设置:Options ->Session Options -> Ter ...

  2. java部署ubuntu后中文显示问号问题

    1.首先先回忆自身项目的编码格式,即在本地进行编码时使用的编码格式.UTF-82.检测tomcat的设置问题,在web.xml和server中的设置:server.xml中: <Connecto ...

  3. GAN网络

    http://www.sohu.com/a/130252639_473283 高分辨率图像重建 https://zhuanlan.zhihu.com/p/25201511 生成式对抗网络GAN有哪些最 ...

  4. hibernate中的java对象有几种状态，其相互关系如何（区别和相互转换）。

    hibernate中的java对象有几种状态,其相互关系如何(区别和相互转换). 解答:在Hibernate中,对象有三种状态:临时状态.持久状态和游离状态. 临时状态:当new一个实体对象后,这个对 ...

  5. 模式识别之贝叶斯---朴素贝叶斯（naive bayes）算法及实现

    处女文献给我最喜欢的算法了 ⊙▽⊙ ---------------------------------------------------我是机智的分割线----------------------- ...

  6. oracle11g卸载,10g之类版本通用

    鉴于oracle一些比较稀奇的问题,本人没碰到的不能帮忙解决的.而且比较着急赶时间的亲们,我就只能推荐先卸载在安装的办法了,这个方法一般用时也就1个小时到1个半小时之间,切记按步骤删除,别漏删了,不然 ...

  7. 蓝桥杯 C/C++参考题目 取球概率（数学题，概率）

    口袋中有5只红球,4只白球.随机从口袋中取出3个球,则取出1个红球2个白球的概率是多大?类似这样的数学问题,在计算的时候往往十分复杂.但如果通过计算机模拟这个过程,比如进行100000次取球模拟,统计 ...

  8. Tweened Animations 渐变动作

    Tweened Animations 渐变动作 Animations分两类: 第一类:渐变的(Tweened): 淡入淡出(Alpha),旋转(Rotate),移动(Translate),缩放(Sca ...

  9. MathType与Origin是怎么兼容的

    MathType作为一款常用的公式编辑器,可以与很多的软件兼容使用.Origin虽然是一款专业绘图与数据分析软件,但是在使用过程中也是可以用到MathType.它可以帮助Origin给图表加上标签,或 ...

  10. cmake实战第二篇：让我们的代码更像个工程

    为工程添加以下文件夹:    bin 用来放编译好的可执行二进制文件. src 用来放源代码. lib 用来放编译好的库文件. include 用来放头文件. sudo mkdir -p /code_ ...