课件资料_张晓飞_JavaScript之HTML DOM

“玩转”Java系列Lesson4: JavaScript之HTML DOM讲师: 张晓飞本次课程的主要内容:l 理解HTMLl DOM的CRUDl DOM的事件监听l 应用: 员工信息管理1. 理解HTML DOM1.1. HTML的文档结构文档标题我的标题我的链接1.2. DOM模型l DOM= Document Object Model，文档对象模型， DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：独立于平台和语言的接口. W3C DOM 标准被分为 3 个不同的部分：n 核心 DOM - 针对任何结构化文档的标准模型n XML DOM - 针对 XML 文档的标准模型n HTML DOM - 针对 HTML 文档的标准模型1.3. HTML节点l HTML文档中的每个成分都是一个节点。n 整个文档是一个文档节点(Document)n 每个 HTML 标签是一个元素节点(Element)n 每一个 HTML 属性是一个属性节点(Attribute)n 包含在 HTML 元素中的文本是文本节点(Text)2. DOM的CRUD2.1. HTML节点的查询对象类型属性/方法说明文档getElementById(id)根据标签的id得到对应的标签对象文档getElementsByTagName(tag)根据标签名得到对应的所有子标签对象的集合(数组)节点nodeName 标签节点得到节点名节点nodeValue Text/Attr得到节点的值节点nodeType节点类型值元素节点childNodes得到所有子节点的集合(数组)元素/文本节点parentNode得到父节点对象(标签)元素节点firstChild得到第一个子节点(标签/文本)元素节点lastChild得到最后一个子节点(标签/文本)元素节点getAttribute(attrName)根据属性名得到属性值2.2. HTML节点的增删改对象类型属性/方法说明文档节点createElement(tagName)创建一个新的元素节点对象文档节点createTextNode(text)创建一个文本节点对象document元素节点appendChild(node)将指定的节点添加为子节点元素节点insertBefore(new,target)在指定子节点的前面插入新节点element元素节点replaceChild(new, old)用新节点替换原有的旧子节点元素节点removeChild(childNode)删除指定的子节点元素节点setAttribute(name, value)为标签添加一个属性元素节点removeAttribute(name)删除指定的属性元素节点innerHTML向标签中添加一个标签ul list-style-type: none;li border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;.out width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;你喜欢哪个城市?北京上海东京首尔/*1. 得到id为bj标签的文本*/*2. 得到可选城市的数量*/*3. 向id为inner的标签中插入文本*/3. DOM的事件监听3.1. 添加事件监听l 页面的很多交互操作都是通过在一些页面视图上添加事件监听的方式来实现的l 给标签添加事件属性Click Mel 得到标签对象并给其添加事件属性, 属性值为一个函数var btnEle = document.getElementById(btn);btnEle.onclick = function()alert(Thank you, baby!);3.2. 常用事件属性值描述onclick回调函数当鼠标被单击时执行脚本ondblclick回调函数当鼠标被双击时执行脚本onmousedown回调函数当鼠标按钮被按下时执行脚本onmousemove回调函数当鼠标指针移动时执行脚本onmouseout回调函数当鼠标指针移出某元素时执行脚本onmouseover回调函数当鼠标指针悬停于某元素之上时执行脚本onmouseup回调函数当鼠标按钮被松开时执行脚本onload回调函数当文档被载入时执行脚本onchange回调函数当元素改变时执行脚本onsubmit回调函数当表单被提交时执行脚本onreset回调函数当表单被重置时执行脚本onselect回调函数当元素被选取时执行脚本onblur回调函数当元素失去焦点时执行脚本onfocus回调函数当元素获得焦点时执行脚本4. 应用: 实现员工信息的CRUD功能l 利用JavaScript DOM实现员工信息的CRUD功能效果图HTML页面添加新员工name:    email:    salary: Submit NameEmailSalary T500