Web前端开发（JavaScript+jQuery）【教学PPT】项目3 DOM文档对象模型.ppt

********Web前端技术文档对象模型与浏览器对象模型目录3.1DOM文档对象模型?点击查看本小节知识架构Window对象3.2?点击查看本小节知识架构3.1DOM文档对象模型3.1.1什么是DOM？DOM全称DocumentObjectModel文档对象模型JavaScript中通过DOM来对HTML文档进行操作，只要理解了DOM就可以操作WEB页面。文档：文档表示整个的HTML网页文档 对象：对象表示将网页中的每一个部分都转换为了一个对象模型：使用模型来表示对象之间的关系，这样方便我们获取对象3.1.2什么是DOMHTMLDOMHTML指的是DOM中为操作HTML文档提供的属性和方法。3.1.3HTML元素操作元素的获取方法说明document.getElementById()返回对拥有指定id的第一个对象的引用document.getElementByName()返回带有指定名称的对象集合document.getElementByTagName()返回带有指定标签名的对象集合document.getElementByClassName()返回带有指定类名的对象集合document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name、和class属性以及标签名称的方式获取操作的元素。3.1.3HTML元素操作2.元素的内容JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。分类名称说明属性innerHTML设置或返回元素开始和结束标签之间的HTMLinnerText设置或返回元素中去除文本内容textContent设置或返回指定节点的文本内容方法document.write()向文档写入指定的内容document.writeIn()向文档写入指定的内容后并换行3.1.3HTML元素操作3.元素属性在DOM中，为了方便JavaScript获取、修改和遍历指定的HTML元素的相关属性，提供了操作的属性和方法。分类名称描述属性attribute返回一个元素的属性集合方法setAttribute(name,value)设置或者改变指定属性的值getAttribute(name)返回指定元素的属性值removeAttribute(name)从元素中删除指定的属性3.1.4DOM节点操作文档对象模型（DOM）通过引入nodeType来表示HTML文档中不同节点的类型。由于HTML文档的复杂性，每个节点都被赋予一个特定的nodeType。appendChild()把新的子节点添加到指定节点removeChild()删除子节点replaceChild()替换子节点insertBefore()在指定的直接点前面插入新的子节点createAttribute()创建属性节点createElemnet()创建元素节点createTextNode()创建文本节点getAttribute()返回指定的属性值setAttribute()把指定属性设置或修改为指定的值3.1.5事件处理事件处理指的就是与事件关联的JavaScript对象，当与页面特定部分关联的事件发生时，事件处理器就会被调用。具体步骤：发生事件启动事件处理程序事件处理程序作出反应3.1.5事件处理鼠标事件通过鼠标动作触发的事件。1.鼠标事件类别事件说明鼠标事件onclick鼠标单击时触发的事件ondbclick鼠标双击时触发的事件onmousedown鼠标按下时触发的事件onmouseup鼠标弹起时触发的事件onmouseover鼠标移动到某个设置了此事件的元素上时触发的事件onmousemove鼠标移动时触发的事件onmouseout鼠标从某个设置了此事件的元素上离开时触发的事件3.1.5事件处理键盘事件是指通过键盘动作触发的事件。2.键盘事件类别事件说明键盘事件onkeydown键盘上的某个按键被按下时触发的事件onkeyup键盘上的某个按键被按下后弹起时触发的事件onketpress当输入有效的字符按键时触发的事件3.1.5事件处理鼠标事件通过鼠标动作触发的事件。3.表单事件类别事件说明表单事件onfocus当某个元素获得焦点时触发的事件onblur当前元素失去焦点时触发的事件onchange当前元素失去焦点并且元素内容发生