如鹏网 静态Web开发 第四章：JSDom

Posted 2020-06-18

本章主干知识点：

1、<a onclick="f1()"/> document.getElementById("btn1").onclick=function(){}

2、setInterval、setTimeout

3、事件冒泡以及如何阻止事件冒泡；

4、如何动态创建元素和动态添加元素；

5、innerText和innerhtml区别

6、案例：动态加载数据到table中；

-------------------------------------------------------------------------------

 操作DOM的意义

DOM（文档对象模型）Document-Object-Model。

所谓文档对象模型，就是操作页面的元素。

JavaScript最终是要操作Html页面，而操作Html页面就要用到DOM。DOM就是把Html页面模拟成一个对象，如果JavaScript只是执行一些计算、循环等操作，而不能操作Html也就失去了它存在的意义。

 -------------------------------------------------------------------------------

获取页面元素

整个页面或者说窗口就是一个window对象---------------window是顶级对象

页面中定义的变量和方法都是window的

使用window对象的属性、方法的时候可以省略window。

比如：

 window.alert(‘hello‘);

 window.f1();

 window.document...

能不写window就不要写，这样可以减少js文件的字节数。

------------------------------------------------------------------------------- 

注册事件的方式

直接在html中写js代码

<input type=“button”onclick=“alert(‘aaa’);” />

定义一个函数赋值给html中元素的on_xxx__属性

<input type=“button”onclick="f1();"/>

Document.getElementById(‘btn’).onclick=f1;注册

Document.getElementById(‘btn’).onclick=f1();直接调用。

function(){alert(‘bb‘);

return function(){alert(‘a‘);}}

 ------------------------------------------------------------------------------- 

注意this的问题

使用element.on__xxx_的方式(匿名函数)

docement.getElementById(‘btn’).onclick=function(){};

//this就是 触发事件的对象,这个方法 是事件调用的

通过onclick=f1;与onclick=“f1();”

只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用（这里的this表示window对象），

f1.apply(document.getElementById(‘btn2‘))

  ------------------------------------------------------------------------------- 

精彩的案例

案例:坑爹游戏(心算)

点击就送(屠龙宝刀)

------------------------------------------------------------------------------- 

window对象的方法

window.confirm(‘无缘无故的恨’);

确定、取消对话框,返回true或false;

案例：开盖有惊喜

window.setInterval(code,delay)//每隔一段时间执行指定的代码

第一个参数：指定的代码字符串第二个参数：时间间隔（毫秒数）

window.clearInterval(intervalId);//停止计时器

clearInterval()取消setInterval的定时执行。

案例：实现标题栏走马灯的效果

案例:摇起来(一起嗨)

setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行只执行一次，clearTimeout也是清除定时。

 

document.getElementById("btnShake").onclick = function () {
var divBody = document.getElementById("divBody");
divBody.style.position = "absolute";
setInterval(function () {
divBody.style.left = (Math.random() * 100) + "px";
divBody.style.top = (Math.random() * 200) + "px";}, 20);};

 

------------------------------------------------------------------------------- 

 window对象的属性

建议使用window.location.href=‘url’;//支持大多数浏览器

重新导航到新页面,可以取值，也可以赋值。

window.location.reload();//刷新当前页

window.event是非常重要的属性，用来获得发生事件时的信息，

事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息兼容不兼容FF。

clientX、clientY 发生事件时鼠标在客户区的坐标；邪恶案例:点我啊

 

var btnClickMe = document.getElementById("btnClickMe");btnClickMe.onclick = function () {alert("老公，你好厉害！");};btnClickMe.onmouseenter = function () {
var left = window.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
var top = window.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
this.style.left = (left + 30)+"px";this.style.top = (top - 30) + "px";};
screen对象，获取屏幕的信息：
alert("分辨率：" + screen.width + "*" + screen.height);
        if (screen.width < 1024 || screen.height < 768) {
            alert("分辨率太低！");
        }

-------------------------------------------------------------------------------

window对象的属性---document

自己写一个Js文件里面写write代码(超链接)

write();//向文档中写入内容。writeln()，和write差不多，只不过后添加一个回车。在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起。writeln()是在源代码里面换行。与<br/>不一样。

http://news.baidu.com/newscode.html

 -------------------------------------------------------------------------------

常用获取元素的三种方式

getElementById(), （非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、

getElementsByName()，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。

getElementsByTagName()，获得指定标签名称的元素数组，比如getElementsByTagName(“input”)可以获得所有的<input>标签。*表示所有标签

 ------------------------------------------------------------------------------- 

案例练习

案例：你是我的小苹果.(被点的按钮显示小苹果,其他显示大苹果)

案例：网站中的注册按钮倒计时后才能使用

练习：养眼的时钟

超链接显示时间：

结论:取消事件的默认动作：直接写return false;浏览器都支持

  ------------------------------------------------------------------------------- 

事件冒泡

事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 。

取消事件冒泡：

 window.event.cancelBubble = true谷歌,IE

e.stopPropagation();火狐

再次强调this表示的是当前监听的事件

event.srcElement是引发事件的对象(冒泡)。

 ------------------------------------------------------------------------------- 

动态创建DOM

调用document的createElement方法来创建具有指定标签的DOM对象

然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。

createElement(‘element’);创建一个节点

appendChild(node); 追加一个节点

removeChild(node);移除一个节点

replaceChild(new,old);替换一个节点

insertBefore(new,参照);把节点加到前面（插到某个节点前面）

firstChild

lastChild

document.createElement("<input type="button"value="hello"/>")

快速创建元素，并且赋值，但是注意设置的inner部分不会被设置

document.createElement(<a href="www.baidu.com">百度</a>)（"百度"二字写不进去）

  ------------------------------------------------------------------------------- 

innerText和innerHTML

几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码。

//FF不支持innerText,在FF下用textContent属性。也可以用innerHTML设置普通文本。

用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建。

使用innerText与textContent的代码。

innertHTML所有浏览器都支持

  -------------------------------------------------------------------------------

 

练习

练习：点击按钮动态增加网站列表。

var dic = { "百度": "http://www.baidu.com", "如鹏": "http://www.rupeng.cn", "谷歌": "http://www.google.com" };

动态产生的元素，查看源代码是看不到的。通过浏览器F12的功能可以看到。

<table border="1" id="tb">
        <tr><td>  乐乐：</td><td>我又胖了！</td></tr>
    </table>
    昵称：<input type="text" id="txt" /><br />
    <textarea id="textContent" rows="10" cols="15"></textarea><br />
    <input type="button" value="评论" id="btn1" />
</table>

  ------------------------------------------------------------------------------

Js操作样式

案例：老公开灯,老婆关灯;网页开关灯.

修改元素的样式是className属性。

(class是javascript的一个保留字，属性不能用关键字、保留字所以就变成className了)

修改元素的样式:this.style.backgroundColor="Red"。

注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。

案例:把层飘起来

obj.style.cssFloat=‘right’;

紧急通告:

不要写成div1.style.width=80px

而是div1.style.width=‘80px‘

案例:鼠标移动到表格行，被点击的行高亮显示（背景红色）

案例：网站新闻消息中显示图片

 

  ------------------------------------------------------------------------------

设置特殊属性

setAttribute("score",10); //设定一些Dom元素属性名特殊的属性,

getAttribute("score");获取设置属性的值

1.鼠标移动到表格的单元格上显示对应单元格的分数.

练习:

 

  ------------------------------------------------------------------------------

案例练习

点击【登录】按钮，弹出一个显示用户名、密码等的层。将用户名、密码等写到一个层中，层默认是隐藏的，点击【登录】超链接以后将层显示出来。

一幅图片。点击小图，弹出一个层在点击的位置显示小图对应的大图，并且显示姓名、身高等信息，点击层中的关闭按钮关闭层。

点击“高级”CheckBox，则显示高级选项，否则隐藏

界面上有几个球队名字的列表，将鼠标放到球队名字上就变为红色背景，其他球队背景颜色为白色，点击一个球队的时候就将点击的球队变为fontSize=30字体

有一个搜索文本框，焦点不在文本框中的时候，如果文本框没有值，则文本框中显示灰色文本（Gray）的“输入搜索关键词”，否则显示用户输入的值；焦点在文本框中时如果之前显示“输入搜索关键词”则清空文本框的值，并且将文本修改为黑色。

 

  ------------------------------------------------------------------------------

form对象

document.getElementById(‘btn1’).click()。搜索引擎的，智能提示，点击后相当于点击了“搜索”按钮。

form对象是表单的Dom对象。

方法：submit()提交表单，但是不会触发onsubmit事件。

在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，如果数据有问题，返回false即可取消提交

  ------------------------------------------------------------------------------

JS中正则表达式案例

 

var regex = new RegExp(“\\d{5}”)

var regex = / \d{5} /（推荐）

 

/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法

RegExp对象的方法：

test(str)判断字符串str是否匹配正则表达式

exec(str)进行搜索匹配，返回值为匹配结果(*)

如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。

要提取多个需要反复调用exec()

//注意全局模式/…../g

var msg = ‘中国移动:10086,中国联通:10010,中国电信:10000‘;

 

   ------------------------------------------------------------------------------

string的正则表达式方法

案例：光标离开Email地址框的时候用正则表达式校验是否是合法的Email地址，如果不是的话Email地址框变红，并且注册按钮禁用，否则Email地址框颜色为白色，启用注册按钮。

Js中的Trim方法

^[0-9a-zA-Z_.\-][email protected][a-zA-Z\-0-9]+(\.[a-zA-Z]+){1,2}$

   ------------------------------------------------------------------------------ 

案例：评估密码强度

密码的安全级别：

 弱密码：只由数字、字母或其他符号中的一种组成。

 中度密码：由数字、字母或其他字符中的两种组成。

 强密码：由数字、字母或其他字符3种以上组成。

 密码少于6位安全级别降1级

案例--------------百度搜索时的自动完成功能。

 

   ------------------------------------------------------------------------------  

代码一定在onload中吗

如果js代码需要操作页面上的元素，则将该代码放到onload里面。

因为当页面加载完毕之后页面上才会有相关的元素

如果js代码中没有操作页面元素的语句，则可以将该代码直接写在<script>标签中，

例如：声明变量，相加求和等操作。

<body>

<!-- html标签-->

<script type="text/javascript">

写在这里的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕，所以可以不放到onload里面也可以操作页面上的元素。

建议将操作页面元素的代码都放到onload里面。

</script>

</body>

   ------------------------------------------------------------------------------  

不同浏览器的差异

企业问：说说开发项目的时候不同浏览器的不同点，你是怎么解决的？

不同浏览器中对DOM支持的方法不一样

 获取网页中那个元素触发了事件：在IE里使用srcElement ；在FireFox里使用target

 使用Dom获取和更改网页标签元素内文本：在IE里使用innerText ；在FireFox里使用textContent

　　　　window.event  在火狐中不支持  用参数 e 

　　　　innerText  在火狐中不支持 用 textContent

    ------------------------------------------------------------------------------ 

 

课后练习

图片高亮显示

文本框边框高亮显示

点击按钮 表格隔行变色

点击表格中的行高亮显示

被点击的按钮背景颜色改变

文本框失去焦点后没有内容背景色为红色.不为空则恢复默认颜色

点击登录按钮显示 登录界面

制作一个新闻列表

 

如鹏网：http://www.rupeng.com