黑马程序员-------初识DOM

---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、

<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------

一、DOM定义

DOM是HTML页面的模型，DOM也提供很多属性，方法，可以通过javascript来操作DOM进行页面元素的动态操作。

二、DOM中的对象

（1）Window对象：当前浏览器的窗口

Window提供的基本方法：

1、Alert():弹出消息对话框

括号中用单引号引起要弹出的消息内容。

Alert(‘消息内容’)

2、Confirm():弹出“确定”、“取消”对话框

调用方式：Windows.alert(‘....’) 其中，对于常用方法，Windows可以省略。

返回值为bool类型的值，如果点击“确定”就返回true,如果点击“取消”，就返回false.

示例：

<html>

<head>

function con(){ //定义一个函数

if(window.confirm('确认删除吗')){ //弹出”确认/取消对话框”

alert('删除了'); //如果点击”确认”就返回true,执行这段代码

}

else //如果点击”取消”,就返回false执行这段代码

{

alert('没删除');

}

function dian(){ //定义了一个函数

window.alert('点我了'); //弹出消息对话框，内容是”点我了”

}

</script>

</head>

<body>

<br/>

</body>

</html>

3、navigate()重新导向到另一个页面

Navigate(“页面地址”)

示例：

<html>

<head>

function comeon(){

navigate('1.html'); //重新导向到1.html页面。

}

</script>

</head>

<body>

我是第二个页面

<br/>

<input type="button" value="进入到页面1" onclick="comeon()"> //当点击按钮时，执行js中的 comeon()函数，转到1.html页面。

</body>

</html>

4、SetInterval()每个一段时间，执行一段代码

方式：setInterval (“要执行的代码” ，”间隔时间（毫秒）”)

5、停止SetInterval（）

方法:clearInterval(setIntervalid);//就是setInterval的返回值；

示例：

<html>

<head>

var setintervalid;

function test(){

setintervalid=setInterval("alert('我又出现了')",2000); //每间隔2秒钟执行一次

}

function stop(){

clearInterval(setintervalid); //停止定时器

}

</script>

</head>

<body>

</body>

</html>

6、setTimeout()定时执行，但只执行一次。

7、clearTimeout()清除定时的setTimeout()

8、Location.reload()重新加载页面。

Window对象的基本属性

1、Loaction.href

这个属性既可以获取本页面的地址，也可以为它赋值，让它转到指定的页面

Alert(location.href);//获取本页面的地址，并且弹出

Onlick=”Location.href=’....html’” //单击时，转达指定页面。与navigate()的效果一样。

示例：获取页面地址

<html>

<head>

function test(){

var info=window.location.href; //获取页面url赋给变量info

alert(info);

}

</script>

<head>

<body>

<input type="button" value="test" onclick="test()"> //单击按钮时执行test()函数代码

</body>

</html>

如果把上面的test()函数改成下面的代码，就是给href赋值，转到指定页面。

function test(){

window.location.href="http://www.baidu.com";

}

2、window.event是window对象的重要属性

其中有window.event.altKey表示是否鼠标单击时是否同时按下了alt键,是bool类型的值。搭配if()判断....

还有window.event.shiftKey、window.event.ctrlKey等等。

window.event.srcElement;//获取选中项

window.event.returnValue=”...”;//显示要提示的信息对话框。

window.event.returnValue=bool类型的值，表示后续操作是否继续进行下去。

示例：

<html>

<head>

function test(){

if(window.event.altKey){

alert('按下了alt');

}

else

{

alert('没按下alt');

}

</script>

<head>

<body>

</body>

</html>

3、history属性

History操作历史记录

Window.history.back()后退到上一次访问的页面

Window.history.forword()前进到上次访问的页面

Window.history.go( -1)//后退到上一次访问的页面

Window.history.go(1)//前进

4、Screen对象

Screen.height;//屏幕高度属性

Screen.width;//屏幕宽度属性

5、clipboardData粘贴板对象

getData();//获得粘贴板中的值

setData(“text”,value);//设置粘贴板中的值

clearData(“text”);//清除粘贴板中的值

控制复制、粘贴的事件

Oncopy://复制时引发的事件return false时禁止复制操作

Onpaste;//粘贴时引发的事件return false时禁止粘贴操作

6、document属性的方法

不要忘记写document.

Write（）；//在网页内部写入内容。

getElementById();//通过id获取元素。

示例：

Javascript代码：

function v1() {

alert(document.getElementById('text1').value); //通过id属性获取控件

} //结果是文本框内输入的内容

</script>

Html代码：

<body>

</form>

getElementsByName();//通过name获取元素

示例：

Javascript代码：

function g() {

var vs = document.getElementsByName('gender');

alert(vs.value); //结果是male

}

Html代码：

<input type="radio" name="gender" value="male" />男

getElementsByTagName();//通过标签获取元素。

getElementsByTagName();

7、动态创建元素createElement(‘标签’);

document.createElement(‘特定标签’); 有返回值，利用返回值添加属性

appendChild(‘’);//添加到某个容器中

示例：

<html>

<head>

function create(){

var d=document.getElementById('div1'); //得到div控件

var input=document.createElement('input'); //创建input标签

input.type="text"; //利用返回值添加属性

input.value="zch";

d.appendChild(input); //添加到div控件

}

function test(){

var d=document.getElementById('div1');

var btn=document.createElement('input');

btn.type="button";

btn.value="按钮";

d.appendChild(btn);

}

</script>

</head>

<body>

</body>

</html>

8、超链接内的文本和html代码

innerText；

innerHTML；可以通过innerHTML属性动态添加元素

这两个属性既可以取值也可以赋值

示例：

<html>

<head>

function show(){

var link=document.getElementById('link1'); //获取超链接ID

alert(link.innerText); //获取超链接内部文本

alert(link.innerHTML); //获取超链接内部HTML代码

}

function changeText(){

var link=document.getElementById('link1');

link.innerText="我喜欢的百度"; //改变超链接的文本

}

function changeHtml(){

var link=document.getElementById('link1');

link.innerHTML="<font color='green'>我喜欢的</font><font color='red'>百度</font>"; //改变超链接的HTML代码

}

function add(){

var div=document.getElementById('div1'); //通过ID获取div控件

div.innerHTML="<input type='button' value='我是新按钮' />";

} //利用innerHTML属性赋值，动态创建按钮

function clutch(){

var l=document.getElementById('label1'); //任何标签元素都具有

alert(l.innerText); //innerText属性，因此

alert(l.innerHTML); //获取label标签内的文本和代码

}

</script>

</head>

<body>

<p>动态创建的案例</p>

</p>

</p>

</p>

</body>

</html>

9、动态添加表格元素：

insertRow()//在表格中插入一行

insertCell()//在一行中插入一个单元格

可以在（）中加入-1，表示在最后追加元素。

示例：

var table=document.getElementById('table1'); //通过Id得到表格控件，赋值给变量table

var tr=table.insertRow(); //在表格中添加一行

var td1=tr.insertCell(); //在行中添加单元格

td1.innerText=name+"发表了评论："; //加入单元格文字信

var td2=tr.insertCell(); //在同一行再次添加一个单元格

td2.innerHTML="<font color='red'>"+content+"</font>"; //在单元格中加入HTNL代码

10、Document对象的常用事件

1、onload()网页元素加载完毕后触发

Onload()事件如果放在某个元素之后，则加载这个元素完毕之后触发该事件

如果onload()事件放入body标签中，则代表html页面内的所有元素加载完毕之后触发该事件。

2、Onunload()在离开页面之后触发

3、Onbeforeunload()在页面即将关闭或者离开时触发

确认消息框window.event.returnValue=’要提示的消息’ 一般用于要离开页面的提示信息;

4、Onclick ()鼠标单击时触发的事件

5、Ondblclick ()鼠标双击时触发的事件

6、Onkeydown()按键按下时触发的事件

7、Onkeypress()点击按键时触发的事件

8、Onkeyup()释放按键时触发的事件

9、Onmousedown ()鼠标按下时触发的事件

10、Onmousemove()鼠标移动时触发的事件

11、Onmouseout()鼠标离开元素范围时触发的事件

12、Onmouseover()鼠标移动到元素范围时触发的事件

13、Onmouseup()鼠标按键释放时触发的事件

14、Onfocus();获得焦点时产生

15、Onblur();失去焦点时产生

16、Onchange()焦点离开时产生

17、Onsubmit；form表单点击submit时触发的事件

18、Submit()提交事件

在表单中如果点击“submit”提交数据，则form中的onsubmit事件会被触发

表单中提供的方法如果return false ;为禁止表单提交。

可以做表单的校验。如果数据不合格，表单就不会提交。

19、引用事件

Submit()

Onsubmit();

//表示文本框如果失去焦点，则执行form中的onsubmit事件。

//表示点击按钮就提交。

</form>

20、window.showModalDialog();

显示模态对话框，

window.parent.returnValue设定返回值

21、window.event.keyCode

keyCode :键盘码（ASC码）

Ime.mode:disable://禁止输入法的切换。

this.style.textAlign=’right’ //改变文本框中的文本为右对齐。

22、键盘码

8：退格键

46：delete

37-40:方向键

48-57：小键盘区的数字

96-105：主键盘区的数字

110 、190：小键盘区和主键盘区的小数点

189、109小键盘区和主键盘区的负号

13：回车

9：Tab键

23、

三、js中正则表达式的用法：

1、定义表达式：

方法一：

Var v =RegExp(‘...’); //()中输入正则表达式

V.test(‘..’); //()中输入被检验的字符串

示例：

function ff(){

var r=new RegExp("\\d+");

alert(r.test("5f5s4s"));

}

方法二：

Var v =/ .........../ //在两条斜线之间输入正则表达式

V.test(‘.....’)

示例：

function ff(){

var r=/d+/;

alert(r.test("5d5s4s"));

}

2、测试表达式

方法：

Test(); //返回bool类型的值(表达式调用test（）方法)

示例：

Var r=/ [0-9|a-z|A-Z]+@\w+\.\w+/ ;

Var s=”948520167@qq.com”;

R.test(s);

3、Match()匹配表达式并分组（字符串调用match()方法）

返回值是匹配到的表达式和分组的表达式

示例：

var r=/([0-9|a-z|A-Z]+)@(\w+\.\w+)/;

v="wjoe@45e.com";

alert(v.match(r));

alert(“第一组”+RegExp.$1+"第二组"+RegExp.$2);

}

RegExp.$ //来获取分得的组。

---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、

<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------

秒客网

黑马程序员-------初识DOM

相关文章