Dom编程(三)

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

var ul = document.getElementById("parent");
            var lis = ul.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {
                var uls = lis[i].getElementsByTagName("ul");
                if (uls.length > 0) {
                    uls[0].style.display = "none";
                }
                lis[i].onmouseover = function() {
                    var uls = this.getElementsByTagName("ul");
                    if (uls.length > 0) {
                        uls[0].style.display = "";
                    }
                };
                lis[i].onmouseout = function() {
                    var uls = this.getElementsByTagName("ul");
                    if (uls.length > 0) {
                        uls[0].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 = /[email protected]+/;
  alert(regex.test("[email protected]"));
  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

时间: 2024-10-05 19:29:14

Dom编程(三)的相关文章

高性能javascript读书笔记(三.DOM 编程1)

第三章DOM Script DOM编程 读书笔记 访问和修改DOM元素 浏览器通常要求DOM实现和JavaScript保持相互独立. <!-- 例如IE中,被称为JScript的JavaScript实现位于库文件jscript.dll中,而DOM实现位于另一个库mshtml.dll(内 部代号Trident).这种分离技术允许其他技术和语言,如VBScript,受益于Trident所提供的DOM功能和渲染功能.Safari使用Webkit的WebCore处理DOM和渲染,具有一个分离的JavaS

性能优化之数据存储&DOM编程

数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方法有: ①避免使用wi

轻松学习JavaScript二十二:DOM编程学习之节点操作

DOM编程不仅仅可以查找三种节点,也可以操作节点,那就是创建,插入,删除,替换和复制节点.先来看节点 操作方法: 还是借用一贯的HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.

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

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap

基于JS的DOM 编程基础和Json语法及JS下的AJAX基础

1.在dom编程中:     注意:使用dom操作一般在页面完全载入之后,一般在window_onload事件里操作dom nodeName  表示节点的名称如:<input   type= "button"  value="确定" />    此时nodeName=“input” ; nodeValue  表示节点的值如<p>aaa</p> 此时的nodeValue="aaa",而nodeName="

高性能Javascript(2) DOM编程

第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM APIs主要用于访问这些文档中的数据.尽管DOM是与语言无关的API,在浏览器中的接口却是以JavaScript实现的.客户端大多数脚本程序与文档打交道,DOM就成为JavaScript代码日常行为中重要的组成部分. 2.1 DOM Access and Modification  DOM访问和修改

DOM编程

一.DOM操作慢的本质原因 文档对象模型(DOM)是一个与语言无关的,用于操作XML和HTML文档的应用程序接口.DOM在浏览器中的接口是用JavaScript实现的.浏览器通常会把DOM和JavaScript独立实现. (1)在IE中,JavaScript的实现名为JScript,位于jscript.dll文件中:DOM的实现则存在另一个库中,名为mshtml.dll(内部叫Trident),UA头: User-Agent: Mozilla/4.0 (compatible; MSIE 8.0;

【JavaScript】JavaScript DOM 编程

在开发的时候,最主要是对DOM进行操作.DOM:Document Object Model 文本对象模型.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构. DOM是针对xml(HTML)的基于树的API. DOM树:表示的是节点的层次,如下图: DOM节点及其类型:HTML文档中的所有的内容都是节点. 元素节点:每一个HTML元素是一个元素节点. 属性节点:元素的属性,属性节点,可以直接通过属性的方式来操作. 文本节点:是元素节点的子节点,其内容为文本. 例:<li id

JavaScript DOM编程艺术 读书笔记

3 DOM DOM分别指document,object和model. DOM中包含的节点主要分为三种:元素节点.文本节点和属性节点.DOM的原子是元素节点,标签的名字就是元素的名字,元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素,它是树节点的根元素:在XHTML文档里,文本节点总是被包含在元素节点的内部.但并非所有的元素节点都包含有文本节点:属性节点用来对元素做出更具体地描述. 有3种DOM方法可获取元素节点,分别是通过元素ID.通过标签名字和通过类名字来获取. 1

JavaScript性能优化 DOM编程

最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档的程序接口(API). 浏览器通常会把DOM和JavaScript独立实现.例如Chrome中使用Webkit的WebCore库渲染页面,用V8作为JavaScript引擎. 访问DOM天生就慢,将DOM和JavaScript比喻为两个岛屿,两处同行要收过桥费,ECMAScript访问DOM的次