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

【Web前端学习笔记】Javascript_04_BOM,DOM思想,正则表达式

2017-09-19 14:43 1071 查看
Javascript_04

A.BOM

1.概念

Browser Object Model：浏览器对象模型

将浏览器的各个组成部分封装为对象

2.特点：

BOM对象不能自己创建，当文档加载进内存，浏览器自动创建

3.组成：

a.Window(*****)：窗口对象(常用)

<script type="text/javascript">
var v = window.confirm("你确定要执行此操作吗？");
if (v) {
window.alert("你点击了确定按钮");
} else{
window.alert("你点击了取消按钮");
}
</script>



b.Location(**)：地址栏对象

c.History(*)：历史记录(当前窗口)对象

d.Navigator：浏览器对象

e.Screen：显示器屏幕

4.关闭页面

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function shut () {
if (window.confirm("你确定关闭吗？")) {
window.close();
}
}
</script>
</head>
<body>
<a href="javascript:void(shut())">关闭页面</a>
</body>





B.DOM

1.概述

Document Object Model：文档对象模型

2.组成

a.Document：文档对象

b.Element：元素对象

c.Attribute：属性对象

d.Text：文本对象

e.Comment：注释对象

f.Node：节点对象

3.方法

a.获取Element对象

getElementById():通过id属性值获取唯一的元素

getElementsByTagName():通过标签名称获取元素对象数组

getElementsByName():通过name属性值获取元素对象数组

getElementsByClassName():通过class属性值获取元素对象数组

b.创建其他对象

createElement:创建元素对象

createAttribute：创建属性对象

createComment：创建注释对象

createTextNode：创建文本对象

c.给属性对象设置值

font1.setAttribute('color','yellow');

d.创建属性对象

var atr = document.createAttribute('color');

atr.value = "red";

ft.setAttributeNode(atr);

e.Element:元素对象

innerHTML属性：获取或设置元素的子内容

innerText属性:获取或者设置标签之间的文本内容

4.事件

a.焦点事件：

onfocus 元素获得焦点

onblur  元素失去焦点

b.点击事件：

onclick 当用户点击某个对象时调用的事件句柄

ondblclick 当用户双击某个对象时调用的事件句柄

c.键盘事件：

onkeydown 某个键盘按键被按下

onkeyup 某个键盘按键被松开

onkeypress 某个键盘按键被按下并松开

d.鼠标事件：

onmousedown 鼠标按钮被按下

onmouseup 鼠标按键被松开

onmouseover 鼠标移到某元素之上

onmouseout 鼠标从某元素移开

onmousemove 鼠标被移动

e.表单事件：

onsubmit 确认按钮被点击

onreset 重置按钮被点击

f.加载与卸载事件

onload 一张页面或一幅图像完成加载

onunload 用户退出页面，其他浏览器不支持 IE支持

g.其他事件：针对表单

onchange 域的内容被改变， 比如下拉框

onselect 文本被选中

C.正则表达式

1.格式

var 变量名 = /^正则表达式$/

2.常用语法

a.[a-zA-Z0-9]:匹配的字母(大小写),也可是数字

b.

1)?:出现0次或1次

2)+:出现1次或多次

3)*:出现0次或多次

c.)x{n}:x这个字符恰好n次

d.x{n,}:x至少出现n次

e.x{n,m}:至少出现n次不超过m次
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  DOM BOM JS javascript 正则表达式
相关文章推荐
新的分享
章节导航