郑州大学现代远程教育 《网页设计与网站建设》个人主页,网页制作及维护公司深圳,html播放视频,wordpress 搬站DOM简介当网页加载时#xff0c;浏览器会创建页面的文档对象模型(DOM)。通过DOM#xff0c;JS可以对HTML实现以下操作#xff1a;改变页面中的所有HTML元素。改变页面中的所有HTML属性。改变页面中的所有CSS样式。对页面中的所有事件作出反应。DOM HTML获得HTML属性的三种方…DOM简介当网页加载时浏览器会创建页面的文档对象模型(DOM)。通过DOMJS可以对HTML实现以下操作改变页面中的所有HTML元素。改变页面中的所有HTML属性。改变页面中的所有CSS样式。对页面中的所有事件作出反应。DOM HTML获得HTML属性的三种方式通过id查找HTML元素xdocument.getElementById(intro);document.write(文本来自 id 为 intro 段落: x.innerHTML );通过标签名找到元素//查找id为main的元素var xdocument.getElementById(main);//查找该元素中所有元素返回的为一个数组var yx.getElementsByTagName(p);document.write(idmain元素中的第一个段落为 y[0].innerHTML);通过类名查找元素xdocument.getElementsByClassName(intro);document.write(文本来自 class 为 intro 段落: x[0].innerHTML );改变HTML输出流js能够创建动态的HTML内容比如动态获取当前时间等使用document.write()可用于直接向HTML输出流写内容document.write(Date());改变HTML内容修改HTML内容最简单的方法是使用innerHTML属性document.getElementById(p1).innerHTML新文本!;改变HTML属性改变HTML属性可以套用以下模板document.getElementById(id).attribute新属性值使用实例如下//改变img的src属性document.getElementById(image).srclandscape.jpg;改变HTML样式改变HTML样式可以使用以下语法document.getElementById(id).style.property新样式使用实例document.getElementById(p2).style.colorblue;document.getElementById(p2).style.fontFamilyArial;document.getElementById(p2).style.fontSizelarger;HTML事件HTML事件类型HTML有诸如以下几种事件类型当用户点击鼠标时当网页已加载时当图像已加载时当鼠标移动到元素上时当输入字段被改变时当提交HTML表单时当用户触发按键时.....HTML事件属性如需监听HTML元素的事件可以使用事件属性进行分配//监听button元素的onClick事件点这里使用HTML DOM来分配事件HTML DOM允许使用js来向HTML元素分配事件//向button元素分配onClick事件//并将displayDate函数分配给id“myBtn”的HTML元素document.getElementById(myBtn).οnclickfunction(){displayDate()};onload和onunload事件onload和onunload会在用户进入或离开页面时被触发可用于检测访问者的浏览器类型和浏览器版本并基于这些信息来加载网页的正确版本。也可用于处理cookie//onchange事件onchange事件常结合对输入字段的验证来使用//当用户改变输入字段的内容时调用upperCase()函数onmouseover和onmouseout事件onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素上方或移出元素时出发函数Mouse Over Mefunction mOver(obj){obj.innerHTMLThank You}function mOut(obj){obj.innerHTMLMouse Over Me}onmouseDown、onmouseup、以及onclick事件这三个事件构成了鼠标点击事件的所有部分、当点击鼠标按钮时会出发onmousedown事件当释放鼠标时会触发onmouseup事件最后当完成鼠标点击时会触发onclick事件。DOM EventListeneraddEventListener()方法用处1. 用于向元素添加事件监听2. 一个元素可以添加多个监听事件3. 可以向同个元素添加多个同类型的监听事件比如两个onclick事件。4. 可以向任何DOM对象添加事件监听不仅仅是HTML元素比如window对象。5. 可以更简单的控制事件(冒泡与捕获)6. 使用addEventListener()方法时javascript从HTML标记中分离开来可读性更强在没有控制HTML标记时也可以添加事件监听。7. 可以使用removeEventListener()方法来移除事件的监听。语法//第一个参数是事件类型(如click或mousedown)//第二个参数是事件触发后调用的函数//第三个参数是布尔值用于描述事件是冒泡还是捕获。该参数是可选的默认为false冒泡传递element.addEventListener(event, function, useCapture);实例//当用户点击按钮时触发监听事件document.getElementById(myBtn).addEventListener(click, displayDate);向原元素添加事件句柄实例1: 当用户点击元素时弹出“hello world”element.addEventListener(click, function(){ alert(Hello World!); });实例2: 使用函数名来引用外部函数//当用户点击元素时弹出helloworldelement.addEventListener(click, myFunction);function myFunction() {alert (Hello World!);}向同一元素添加多个事件句柄向同个元素添加多个同种类型事件,注 不会覆盖已存在的事件element.addEventListener(click, myFunction);element.addEventListener(click, mySecondFunction);向同个元素添加多个不同类型事件element.addEventListener(mouseover, myFunction);element.addEventListener(click, mySecondFunction);element.addEventListener(mouseout, myThirdFunction);向window对象添加事件句柄addEventListener()方法允许向HTML DOM对象添加事件监听。HTML DOM对象如 HTML元素HTML文档window对象或者其他支出的事件对象如 xmlHttpRequest对象。//当用户重置窗口大小时添加事件监听window.addEventListener(resize, function(){document.getElementById(demo).innerHTML sometext;});传递参数当传递参数时使用“匿名函数”调用带参数的函数element.addEventListener(click, function(){ myFunction(p1, p2); });事件的冒泡传递和捕获传递事件传递有两种方式 冒泡或捕获这两种事件传递定义了元素事件触发的顺序。比如 p元素插入到 div 元素中用户点击 p 元素, 哪个元素的 click 事件先被触发呢在冒泡传递中内部事件会先被触发然后再触发外部元素。在捕获传递中外部元素事件会先被触发然后才会触发内部元素的事件removeEventListener()方法removeEventListener()方法移除由addEventListener()方法添加事件的句柄。element.removeEventListener(mousemove, myFunction);
