教育基础与高级javascript dom.pptx

北京传智播客教育JavaScriptDOM讲师：蒋坤

课前说明目标能使用JavaScript操作DOM进行DHTML的开发课程内容基本的DOM方法与属性常见的网页设计技巧与原则参考书：张孝祥《JavaScript网页开发——体验式学习教程》犀牛书：JavaScript权威指南(比较枯燥)

为什么要写DOM-HTML页面动态化-提升用户的交互性-提升用户体验-DOM将整个HTML页模拟成一个树

节点的基本属性与方法-获得节点的方法-document.getElementById()-document.getElementsByTagName()-document.getElementsByName()-onload事件-节点的类型、名字与内容-nodeType-nodeName-nodeValue

元素节点的属性-设置与获得元素节点的属性node.setAttribute(“属性名”,“值”)node.getAttribute(“属性名”)-HTML-DOM中的方法使用node.属性即可访问

节点与节点的关系-父节点node.parentNode-子节点node.childNodes

node.firstNodenode.lastNode-兄弟node.nextSiblingnode.previousSibling

创建页面元素-write系方法document.write()document.writeln()-inner方法node.innerHTMLnode.innerText-DOM方法document.createElement()document.createTextNode()父节点.appendChild(子节点)父节点.insertBefore(新节点,旧节点)

删除节点node.removeChild()

案例与练习-使用js创建一个div-使用js创建一个图片-使用js实现计算器-使用js创建一个列表练习-使用js创建一个table-使用js创建一个登陆界面

使用js操作样式-复习样式的分类-处理类样式node.className-处理行内样式node.style.样式属性=“值”-鼠标事件onclickonmouseoveronmouseout

案例与练习-开关灯案例-高亮显示的表格行-评分控件-输入框警告(onblur,onfocus)练习-鼠标悬浮列表高亮-树状菜单

创建table的另一种方法-trNodetableNode.insertRow(-1)-tdNodetrNode.insertCell(-1)

设计DHTML的一个原则-JavaScript效果是很好，但也有不适的时候-对于页面，是要反应的内容-主要的内容不应尝试有js来加入-页面上应该保留主要内容，由js来优化