您的位置:首页 > Web前端 > JavaScript

Day03-JavaScript高级编程

2015-07-21 00:14 471 查看
标签: HTML基础

01复合类型对象

BOM编程 用来操作浏览器

Windows对象

 04 DOM文档对象模型 用来操作网页的文档

节点
DOM属性

01复合类型对象

内置对象

自定义对象

在js函数当中可以在定义函数

浏览器对象(重点)BOM,woindows,document

数组

数组是一群元素的集合,初始化大小不会影响数组的实际长度。

数组里面可以存储复合类型
函数 就是一片功能代码快。

02 BOM编程 (用来操作浏览器)

就是浏览器对象模型

作用1.就只操作主流浏览器的各个组成部分。

03 Windows对象

浏览器一遇到`<body>`或 `frameset`


属性
status
opener


方法
setTimeOut
setInterval


事件
event
浏览器加载时自动创建

鼠标事件
onmousemove
onmouseout


焦点事件,

键盘事件
onkeyup


表单: 阻塞是提交
onsubmit
, 用来验证表单的内容

动态事件,就是动态的给标签添加事件,不直接在标签上面的直接添加事件函数、

问题:

常用对象

location对象

Screen 用户的屏幕信息

doucment 文档对象

history 浏览器历史
go(0)
方法,刷新

 04 DOM文档对象模型 (用来操作网页的文档)

D 表示 HTML/JSP/XML,

O 表示对象,以对象的方式访问web页面中的元素

M 模型是一种规则,在DOM看来,所有的文档,加载到内存以后都是一个倒状树。

节点

由结构图中我们可以看到,整个文档就是一个文档节点 document

而每一个HMTL标签都是一个元素节点(divElement)

标签中的文字则是文本节点(divTextElement)

标签的属性是属性节点(idAttributeElement)

一切都是节点……

查找元素的节点
getElementById()
,此方法只是用于
document
对象

getElementsByNam()
寻找有着给点name属性的所有元素,返回的是一个节点集合

getElementByTagName()
寻找给定标签名字的所有元素。因此放回 一个节点集合 该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

元素属性

getAttribute()
返回一个给定元素指定属性的值
var nodValue = document.getElementsByTagName("input")[0].getAttribute("type");


setAttribute(attributeName,attributeValue)
如果这个属性已经存在,它的值将被替代

getAttributeNode()
通过属性获得属性节点

removeAttribute()
删除指定熟悉的节点

05 DOM属性 –

nodeName
其内容是是给点节点的名称,只读属性

nodeType
返回一个整数,代表节点的类型,1代表元素节点,2代表属性节点,3代表文本节点。只读属性

nodeValue
返回给定当前节点的当前值,如果是文本节点返回的是文本值,如果是属性节点,返回的是属性值,如果是元素节点返回的是NULL,该属性可读写,但是不能给属性设置值,但是可以给

replaceChild()
替换节点

总结: javascript就是用来操作网页的一种语法。

其中出现了bom来操作整个浏览器窗体,衍生出许多的对象。

因为网页是文本的形式出现,所以出现了操作DOM的文本模型来处理
<body>
标签里面的内容,我们把这些这些标签组成的网页想成一个文本树,数和数之间就有了节点, 因此JavaScript有了许多获得节点的方法,由于节点的不同会有标签节点,文本,属性节点。 大多数可以查询Api可以查询到。、

最后的作业 验证用户的输入是否正确

当用户提交表单后,对表单中的所有选项进行验证,全部通过后,方可提交

1用户名必填且英文或中文

2密码必填且8位数字

script type="text/javascript">
//1.定位到表單的位置,
//2.設置那個柱塞方法
var fromArray = document.forms;
fromArray[0].onsubmit = function() {
//验证
var userName = document.getElementById("user_ID").value;
if ((/[a-zA-Z]{8,}/.test(userName)) || (/[\u4e00-\u9fa5]{8,}/.test(userName))) {
//用户名输入正
var password = document.getElementById("pasw_ID").value;
if (/[0-9]{8,}/.test(password)) {
//密码验证正确
alert("注册成功")
return true;
} else {
alert("密码错误")
}
} else {
alert("用户名必须为英文")
}
return false;
}
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: