一周一话题之四（JavaScript、Dom、jQuery全面复习总结<Dom篇>）

-->目录导航

一、 初探Dom

    1. Dom介绍

二、 Dom基础

    1. window顶级对象

    2. body、document对象事件

    3. 通用的HTML元素的事件

    4. 冒泡事件

    5. this与event.srcElement

三、 Dom操作

    1. 动态创建Dom

    2. innerText、innerHTML

    4. Form对象

    5. JS中的正则表达式

    6. 火狐浏览器（FF）不兼容性：

    7. 性能优化

四、 实力检测

一、 初探Dom

JavaScript—>Dom,C#—> .Net Framework；JavaScript和C#都是一些基本语法，没有Dom和.Net类库，JavaScript和C#也就发挥不出来它的威力来。本文就带你来回顾一下Dom操作。

1. Dom介绍

Dom（文档标签当作对象来处理）

(1)DOM就是html页面模型，将每个标签都作为一个对象，javascript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。

(2)DOM就是一些让JavaScript能操作Html页面控件的类、函数

(3)DHtml= CSS+JavaScript+Dom

动态设置事件

<script type="text/javascript">
        function F1() { alert(‘In F1‘); }
   </script>
   <input type="button" value="关联F1" onclick="document.onclick=F1;" />

<input type="button" value="关联F1" onclick="F1()"

带()表示调用函数，直接写函数名表示将其设置为事件的处理函数。

二、 Dom基础

1. window顶级对象

(1) window方法

①调用window的方法时，可以省略window

②方法

alert:弹出警告对话框

confirm:确定、取消对话框

setInterval(code,delay):启动计时器,每隔一段时间执行指定的代码

        code推荐使用匿名函数

clearInterval(intervalId):停止计时器

setTimeOut():定时执行，只执行一次

clearTimeOut():清除定时

(2) window的属性

① window.location

属性：

location.protocol：该属性保存了URL的协议部分。

location.hostname：该属性保存了URL的主机名部分。

location.port：该属性保存了URL中的端口号部分。

location.pathname：该属性保存了URL中的文件名部分。

location.search：保存了URL的查询部分（如果有的话）。

location.hash：保存了URL中的anchor名称（如果有的话）。

方法：

window.location.href：获取当前地址

window.location.reload()：刷新当前页

② window.event

     ->按下键,复合键

altKey、shiftKey、ctrlKey

if (window.event.altKey) {
                alert("按下了Alt键");
   }

        具体按下的什么按键（与ASCII值不同）keyCode

     ->鼠标坐标

clientX、clientY  获取鼠标坐标，相对于页面来说的坐标

offsetX、offsetY  相对于当前元素自己左上角的偏移坐标

screenX、screenY  相对于整个屏幕的偏移坐标

    ->停止事件继续执行

window.event.return = false;(标准)不兼容火狐

也可以使用return false;来设置当前事件处理程序返回值为false

③ window.screen

window.screen.width   获取用户屏幕分辨率宽

window.screen.height  获取用户屏幕分辨率高

④ clipboardData

setData()  设置剪切板的值

getData()  读取粘贴板的值

clearData()  清空粘贴板的值

function Setclipboard() {
            window.clipboardData.setData(‘Text‘, window.clipboardData.getData(‘Text‘) + ‘霹雳烈火版权所有‘);
        }

⑤ history（操作历史记录）

    window.history.back() 后退

    window.history.go(-1) 后退

    window.history.forward() 前进

    window.history.go(1)  前进

⑥ document

-->write与writeln

    document.write就是动态创建内容、元素的

    document.writeln 也是动态创建内容，源代码中会换行

补充：以上两个只有在与页面加载的时候同时使用才会保证页面上的内容

应用：广告链接，服务器端js代码一改，其它引用它的地方全改

-->获得dom对象

getElementById() 根据元素Id获得对象

getElementsByName() 根据元素name获得对象

getElementsByTagName 根据指定标签获得对象

function GetDomObject() {
            alert(‘getElementById:‘ + document.getElementById(‘txtElementById‘).value);
            var arrobjs = document.getElementsByName(‘abc‘);
            for (var i = 0; i < arrobjs.length; i++) {
                alert(‘getElementsByName元素值：‘ + arrobjs[i].value);
            }
            var tagNameObjs = document.getElementsByTagName(‘p‘);
            for (var j = 0; j < tagNameObjs.length; j++) {
                alert(‘getElementsByTagName元素值：‘ + tagNameObjs[j].innerHTML);
            }
        }

注： 不能用for in（键值对）循环

⑦ 其它属性

close  返回true或者false，表示window对象对对应的窗口是否关闭。

opener  表示打开当前窗口的那个window对象。

Defaultstatus  设置和返回窗口状态栏中默认显示的文本内容。

Status  设置和返回窗口状态栏中当前正显示的内容。

screenTop  返回窗口左上角顶点在屏幕上的垂直距离。

srceenLeft  返回窗口左上角顶点在屏幕上的水平距离。

回到导航

2. body、document对象事件

onload 页面加载后触发：页面加载后就可以document.getElementById(“控件Id”)来获取dom元素ID了

onunload 页面卸载后触发

onbeforeunload 页面卸载前触发

注：要为整个页面注册事件就用document,不要用body

回到导航

3. 通用的HTML元素的事件

onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）、oncontextmenu（在浏览器中单击鼠标右键显示”右键菜单”时触发）

回到导航

4. 冒泡事件

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

<table onclick="alert(‘table onclick‘);">
        <tr onclick="alert(‘tr onclick‘);">
            <td onclick="alert(‘td onclick‘);"><p onclick="alert(‘p onclick‘);">aaaa</p></td>
            <td>bbb</td>
        </tr>
   </table>

取消事件冒泡： window.event.cancelBubble = true; //IE下

回到导航

5. this与event.srcElement

this：表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用

window.event.srcElement：指最初引发事件的事件源对象

fuction method(){
      alert(this.value);
   }
   <input type="text" onblur="method()"/>

这样是不正确的，可以采用

fuction method(btn){
      alert(btn.value);
   }
   <input type="text" onblur="method(this)"/>

补充：this表示当前触发事件的对象，表示当前谁在执行事件，发生事件的控件；

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

如果要直接使用this.属性，此时的函数不能是被调用的而必须是响应函数，而window.event.srcElement则无此限制。

三、 Dom操作

1. 动态创建Dom

createElement(‘element’)  创建指定标签dom对象

appendChild(node)  将创建元素添加到相应的元素下

removeChild(node)  删除元素

replaceChild(new,old)  替换元素

insertBefore(new,参照)  插入元素

回到导航

2. innerText、innerHTML

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

(2) FF不支持innerText，使用textContent

(3) innerHTML可以代替createElement，属于简单、粗放型、后果自负的创建

① 大量进行节点操作时，使用innerHTML的性能要好于频繁的Dom操作

② 使用innerTHML=‘’来删除节点可能会造成内存问题

innerText  ：只能设置纯文本，即便写了html代码，也会对html代码进行编码，

innerHTML：可以设置html代码和纯文本。

3.  操作样式

(1)通过操作style属性来修改元素的样式

css中属性名在JavaScript中操作的时候属性名可能不一样，比如：font-size→style.fontSize；margin-top→style.marginTop //驼峰命名法

改边框：dvoObj.style.width

改背景：dvoObj.style.backgroundColor

改宽高：dvoObj.style.width|height--需要加px

注：不要写成div1.style.width=80px，而是div1.style.width=‘80px’

(2)设置元素样式

修改元素的样式不是设置class属性，而是className属性

<style type="text/css">
        .emptyfield
        {
            background-color:Red;
        }
        .normal
        {
            background-color:inherit;
        }
    </style>
    <script type="text/javascript">
        function check(txt) {
            var s = txt.value;
            if (s.length <= 0) {
                txt.className = "emptyfield";
                alert(‘这个字段必填！‘);                
            }
            else {
                txt.className = "normal";
            }
        }
    </script>
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />
<input type="text" onblur="check(this)" />

visibility设置隐藏后，隐藏部分仍然占位

回到导航

4. Form对象

click(),focus(),blur();//相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。

回到导航

5. JS中的正则表达式

(1) 创建正则表达式类的方法

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

var regex = /\d{5}/; -->推荐写法

/表达式/是JavaScript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了。

(2) RegExp对象的方法

① 匹配

test(str)判断字符串str是否匹配正则表达式，相当于C#中的IsMatch

② 提取

exec(str)进行搜索匹配，返回值为匹配结果(*)，是一个对象，该对象包含所提取到的第一个字符串的“完成匹配结果”，以及所有的“提取组”;相当于c#中match()和matches()

③ 替换

replace()

回到导航

6. 火狐浏览器（FF）不兼容性：

能力检测：

if (typeof td1.innerText == ‘string‘) {
     td1.innerText = txt;
   }
   else {
     td1.textContent = txt;
   }

(1)取消事件：window.event.returnValue不兼容FF

解决：用火狐特有 e. preventDefault()或者return false

(2)window.event.altKey：if(event.altKey)不兼容FF

解决：

function BodyClickHandlerOnFF(e) {
            if (e.altKey) {
                alert(‘按下alt键‘);
            } else {
                alert(‘普通点击！‘);
            }
        }
<body onclick="BodyClickHandlerOnFF(event);">

(3) 获取位置：window.event.ClientX、ScreenX、OffsetX不兼容FF

解决：arguments[0].clientX…

(4) 获得事件源对象：window.event.srcElement 不兼容FF

function MyClickHandlerOnFF(e) {
            var obj = e.target;
            alert(obj.value);
        }
    <input type="button" value="FF下事件源对象" onclick="MyClickHandlerOnFF(event);"/>

(5) innerText：不兼容FF

解决：textContent

(6) 扩展《FF与IE对JavaScript和CSS的区别》

回到导航

7. 性能优化

(1) 声明变量赋初值

(2) 尽量避免直接声明全局变量，比如要声明全局变量name,但是它有可能与window.name冲突，所以全局变量一般都会声明在一个全局对象中：var itcast={name:’zxh’,num:10};使用这些全局变量的时候通过itcast.name或者itcast.num，就可以减少与系统的重名了。

(3) 当编写大量Js代码的时候难免会遇到命名冲突的问题，这时可以通过模拟命名空间的方式来避免命名冲突。例如：

var itcast={};
   var itcast.net={};
   var itcast.net.net0405={name:’zxh’,sayHi=function(){}};

(4) 尽量避免使用全局变量。（搜索全局变量时，会一层一层的搜索每个作用域范围，耗时，低效，命名冲突）

(5) 使用减值循环或者优化循环条件，不要在循环条件中写i<xxx.length而要用一个变量来代替，i<len。因为循环条件每次都会执行，这样的话每次都会计算xxx.length。

(6) 避免使用eval(“alert(10);”);或setInterval(“myFunc();”,1000);这种双重解析的代码。低效！

(7) 使用原生的方法，比如内置的join()、reverse()，使用这些本来浏览器就有的方法不要自己写myJoin()之类的，性能低。原生方法都是用c或者c++写的，性能高。

(8) 尽可能使用switch来代替多个if-else

(9) 尽量减少语句数量

var arr=[1,2,’a’,true];
   var p1={name:’zxh’,age:18};//创建对象

(10) 当大量操作dom元素时使用文档碎片，避免多次更新页面。

var fragment=document.createDocumentFragment();

四、 实力检测

以下是一些练习题（试题来源--传智播客），看你能做出来几个呢

(1) 标题栏走马灯效果-->浏览器标题文字向左右滚动

(2) 点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”

(3) 十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。

(4) 加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中

(5) 点击按钮动态增加网站列表，分两列，第一列为网站的名字，第二列为带网站超链接的网站名。增加三行常见网站。

(6) 实现无刷新评论

(7) 创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色

(8) 评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色

(9) 超链接的单选效果-->页面上若干个超链接，点击一个超链接s的时候被点击的超链接变为红色背景，其他超链接背景没有变

(10) 点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色

(11) 放若干文本框，获得焦点的文本框黄色背景，其他控件背景颜色是白色

(12) 点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景

(13) 跟着鼠标飞的图片效果

(14) 点击【登录】按钮，弹出一个显示用户名、密码等的层

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

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

(17) 显示数字时钟，时间显示到一个div

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

(19) 密码的安全级别,密码强度显示

(20) 歌曲列表 （CheckBox+Label）全选、全不选、反选

(21) 实现省市选择界面。请选择省的处理，从后向前删

(22) 权限选择页面，选择、撤回、全部选择、全部撤回

(23) 百度搜索时的自动完成功能

试题答案择日公布