这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要给大家简单介绍了是什么是 DOM、动态操作 DOM 元素的方法、使用 jsjs 操作样式以及 Form 对象的简介,是个人对于 javascript 中的 DOM 的理解的总结,推荐给小伙伴们。
什么是 Dom?
1. 简介
文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model 的历史可以追溯至 1990 年代后期微软与 Netscape 的 "浏览器大战",双方为了在 JavaScript 与 JScript 一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有 VBScript、ActiveX、以及微软自家的 Dhtml 格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM 即是当时蕴酿出来的杰作。
DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。
所谓文档对象模型,其实就是对网页 HTML 中的各种元素的一种内部的表示,例如 HTML 中的头、段落、列表、风格、ID 等,所有的元素都能通过 DOM 来访问 。
JavaScript 最终是要操作 Html 页面,让 Html 变成 DHtml,而操作 Html 页面就要用到 DOM。DOM 就是把 Html 页面模拟成一个对象,如果 JavaScript 只是执行一些计算、循环等操作,而不能操作 Html 也就失去了它存在的意义。
DOM 就是 Html 页面的模型,将每个标签都做为一个对象,JavaScript 通过调用 DOM 中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的 DOM 对象,就可以读取文本框中的值、设置文本框中的值。
2. 图解
关于 window 整个页面或者说窗口就是一个 window 对象 ---------------window 是顶级对象
页面中定义的变量和方法都是 window 的
window.id
document.getElementById()
使用 window 对象的属性、方法的时候可以省略 window。
比如:
window.alert('hello');
可以省略成 alert('hello');
window.document 可以直接写 document
能不写 window 就不要写,这样可以减少 js 文件的字节数。
- window.alert('大家好!');//弹出警告对话框
- window.confirm('确定要删除吗?');//确定、取消对话框,返回true或false;
- window.navigate(url);//将网页重新导航到url,支持IE、Opera11.6。并不推荐,有些浏览器不行,
建议使用 window.location.href='url';// 支持大多数浏览器
动态操作 DOM 元素
1. 获取 DOM
getElementById(), (非常常用),根据元素的 Id 获得对象,网页中 id 不能重复。也可以直接通过元素的 id 来引用元素,但是有有效范围、
getElementsByName(),根据元素的 name 获得对象,由于页面中元素的 name 可以重复,比如多个 RadioButton 的 name 一样,因此 getElementsByName 返回值是对象数组。
getElementsByTagName(),获得指定标签名称的元素数组,比如 getElementsByTagName("input") 可以获得所有的 <input> 标签。* 表示所有标签
2. 添加、移除、替换
document.write 只能在页面加载过程中才能动态创建。
可以调用 document 的 createElement 方法来创建具有指定标签的 DOM 对象,然后通过调用某个元素的 appendChild(); 方法将新创建元素添加到相应的元素下。// 父元素对象. removeChild(子元素对象); 删除元素。
createElement('element'); 创建一个节点
appendChild(node); 追加一个节点
removeChild(node); 移除一个节点
replaceChild(new,old); 替换一个节点
insertBefore(new, 参照); 把节点加到前面(插到某个节点前面)
方法:
属性:
firstChild
lastChild
3. 用 innerHTML 还是 createElement()、appendChild() 与 removeChild()?
操作页面的元素的时候是用 innerHTML 的方式还是 createElement()、appendChild() 与 removeChild() 的方式?
1. 对于大量进行节点操作时,使用 innerHTML 的方式性能要好于频繁的 Dom 操作 (有专门用 C 或 C++ 写的 html 解析器。)。先将页面的 HTML 代码写好,然后调用一次 innerHTML, 而不要反复调用 innerHTML.
2. 对于使用 innerHTML=''的方式来删除节点,在某些情况下会存在内存问题。比如:div 下面有很多其他元素,每个元素都绑定有事件处理程序。此时,innerHTML 只是把当前元素从节点树上移除了,但是那些事件处理程序依然占用内存。
js 操作样式
修改元素的样式是 className 属性。
(class 是 JavaScript 的一个保留字,属性不能用关键字、保留字所以就变成 className 了) 网页开关灯的效果。
修改元素的样式不能 this.style="background-color:Red"。
单独修改样式的属性使用 "style. 属性名"。注意在 CSS 中属性名在 JavaScript 中操作的时候属性名可能不一样,主要集中在那些属性名中含有 - 的属性,因为 JavaScript 中 - 是不能做属性、类名的。
操作 float 样式的时候
IE:obj.style.styleFloat='right';
其他浏览器:obj.style.cssFloat='right';
Form 对象
常用:click(),focus(),blur();// 相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。
form 对象是表单的 Dom 对象。
方法:submit() 提交表单,但是不会触发 onsubmit 事件。
实现 autopost,也就是焦点离开控件以后页面立即提交,而不是只有提交 submit 按钮以后才提交,当光标离开的时候触发 onblur 事件,在 onblur 中调用 form 的 submit 方法。
在点击 submit 后 form 的 onsubmit 事件被触发,在 onsubmit 中可以进行数据校验,如果数据有问题,返回 false 即可取消提交
来源: http://www.phperz.com/article/17/0417/272570.html