简单菜单制作,参考代码:

var ul = document.getElementById("parent");
            var lis = ul.getElementsByTagName("li");
            ; i < lis.length; i++) {
                var uls = lis[i].getElementsByTagName("ul");
                ) {
                    uls[].style.display = "none";
                }
                lis[i].onmouseover = function() {
                    var uls = this.getElementsByTagName("ul");
                    ) {
                        uls[].style.display = "";
                    }
                };
                lis[i].onmouseout = function() {
                    var uls = this.getElementsByTagName("ul");
                    ) {
                        uls[].style.display = "none";
                    }
                };
            }

IE中如果在body上添加onclick、onmousemove等事件响应,那么如果页面没有满,则 “body 中最后一个元素以下(横向不限制)” 的部分是无法响应事件的,必须使用代码在document上监听那些事件
  通过dom读取元素的top、left、width、height等取到的值不是数字,而是“10px”这样的字符串;为这些属性设值的时候IE可以是80、90这样的数字,FF必须是“80px”、“90%”等这样的字符串形式,为了兼容统一用字符串形式。易错:不要写成div1.style.width=80px,而是div1.style.width='80px'。如果要修改元素的大小(宽度加10),则首先要取出元素的宽度,然后用parseInt将宽度转换为数字(parseInt可以将"20px"这样数字开头的包含其他内容的字符串解析为20,);然后加上一个值,再加上px赋值回去。
  元素的position 样式值:static(无定位,显示在默认位置)、absolute(绝对定位)、fixed(相对于窗口的固定定位,位置不会随着浏览器的滚动而变化,IE6不支持)、relative(相对元素默认位置的定位)。如果要通过代码修改元素的坐标则一般使用absolute,然后修改元素的top(上边缘距离)、left(左边缘距离)两个样式值。left、top都是指的层的左上角的坐标。word-break:break-all; overflow:scroll

img.style.top = event.clientY+"px";
  img.style.left = event.clientX+"px";

createElement的两种用法,注意innerText的问题
  var input = document.createElement("<input type='button' value='hello'/>")快速创建元素,并且赋值,但是注意设置的inner部分不会被设置var link = document.createElement("<a href='http://www.baidu.com'>百度</a>")
  label.setAttribute("for", "username"); //设定一些Dom元素属性名特殊的属性,label.for = "username"会有问题。  label.setAttribute("xuehao","33333") 

document.getElementById('btn1').click()
  form对象是表单的Dom对象。方法:submit()提交表单,但是不会触发onsubmit事件。实现autopost,也就是焦点离开控件以后页面立即提交,而不是只有提交submit按钮以后才提交,当光标离开的时候触发onblur事件,在onblur中调用form的submit方法。在点击submit后form的onsubmit事件被触发,在onsubmit中可以进行数据校验,数据数据有问题,返回false即可取消提交
  <form name="form1" action="a.aspx" method="get" onsubmit="if(document.getElementById('txtname').value.length<=0){alert('姓名必填');return false;}">

 给对话框传递参数,使用showModalDialog的第二个参数传递参数,在对话框中用window.dialogArguments获得传递的参数值;对话框中给window.parent.returnValue设定返回值,这样在父窗口中就可以通过showModalDialog返回值读取设置的返回值了。传递多个参数,将参数包装到数组中,然后仍然是通过第二个参数传递,返回多个返回值也可以返回数组

JavaScript中创建正则表达式类的方法:var regex = new RegExp("\\d{5}") 或者 var regex = /\d{5}/
  /表达式/是JavaScript中专门为简化正则表达式编写而提供的语法,写在//中的正则表达式就不用管转义符了。
  RegExp对象的方法:
 (1)test(str)判断字符串str是否匹配正则表达式,相当于IsMatch
  var regex = /.+@.+/;
  alert(regex.test("a@b.com"));
  alert(regex.test("ab.com"));
 (2)exec(str)进行搜索匹配,返回值为匹配结果,没找到返回null(*)
  String对象中提供了一些与正则表达式相关的方法,相当于对于RegExp类的包装,简化调用:match(regexp),相当于调用exec
  keyCode: ascii码说明:8:退格键。46:delete。37-40: 方向键。96-105:小键盘区的数字。48-57:主键盘区的数字。110、190:小键盘区和主键盘区的小数点。189、109:小键盘区和主键盘区的负号。13:回车。9: Tab

Dom编程(三)的更多相关文章

  1. JavaScript(DOM编程三)

    节点的移动,insertBefore <body> <p>你喜欢哪个城市?</p> <ul id="city"><li id= ...

  2. JavaScript(三)-- DOM编程

    JavaScript编程中最基本的就是DOM编程,DOM是 Document Object Model文本对象模型,就是对DOM对象进行编程的过程. Java语言和Js都有针对于DOM的编程,两者类似 ...

  3. javascript dom编程艺术笔记第三章:DOM操作的5个基本方法

    JavaScript的 DOM操作,主要是对DOM这三个字母中D.O.M的操作.D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对 ...

  4. 读书笔记:JavaScript DOM 编程艺术(第二版)

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

  5. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  6. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  7. 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  8. JS之DOM编程

    为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程.  dom编程简介 DOM=Document Object Mo ...

  9. JavaScript DOM编程艺术第一章:JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  10. Bom和Dom编程以及js中prototype的详解

    一.Bom编程: 1.事件练习: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. rebar

    www.cnblogs.com/panfeng412/archive/2011/08/14/2137990.html

  2. 【kmp】 字符串最大周期

    大侠住店 TimeLimit: 1 Second MemoryLimit: 32 Megabyte Totalsubmit: 116 Accepted: 64 Description 有一天晚上,一位 ...

  3. BigDecimal加减乘除运算

    java.math.BigDecimal.BigDecimal一共有4个够造方法,让我先来看看其中的两种用法: 第一种:BigDecimal(double val)Translates a doubl ...

  4. HDU 5455 Fang Fang 水题,但题意描述有问题

    题目大意:f[1]=f,f[2]=ff,f[3]=ffc,以后f[n]每增加1,字符串增加一个c.给出一个字符串,求最少有多少个f[]组成.(字符串首尾相连,比如:ffcf可看做cfff) 题目思路: ...

  5. php 高并发下数据同步的问题

    1.加锁缺点:降低性能优点:减少代码逻辑复杂度(题主现在这样超过1w条就删数据的逻辑,感觉看起来就点糟糕啊,如果整个系统一复杂,这样的来回写数据,你确定你的逻辑还维护得下去?建议题主梳理一下代码的逻辑 ...

  6. PullToRefreshListView上拉加载、下拉刷新 eclipse项目

    说明:此项目实在fragment中的,需要依赖library完成,还用到了Xuitls.jar包.使用了Pull解析XML eclipse中的项目: //注意:此刷新功能是使用的第三方的PullToR ...

  7. angularJS Directive学习

    Directive 指令 直接上实例 index.html <!doctype html> <html ng-app="drag"> <head> ...

  8. Linux学习 -- Shell编程 -- 正则表达式

    正则表达式与通配符 正则 -- 匹配字符串 -- 包含匹配     grep.awk.sed等 通配符 -- 匹配文件名 -- 完全匹配  ls.find.cp等 基础正则表达式

  9. android 代码优化:封锁输出日志

    可以使用 ProGuard 完全地删除任何在发布版中无用的语句,关于 ProGuard 参见: http://developer.android.com/guide/developing/tools/ ...

  10. sphinx set several dates as filter

    http://sphinxsearch.com/forum/view.html?id=3187 > I think I may have found a bug. Yep, it looks w ...