人机交互界面设计第十章_DOM教材教学课件.ppt

人机交互界面设计 第十章 DOM 目录 01 DOM基础 02 DOM增加节点 03 DOM删除节点 04 DOM操作标签属性 05 DOM操作标签内容 DOM DOM DOM（Document Object Model，文档对象模型），它定义了访问 HTML 和 XML 文档标签的标准。通过DOM，开发人员可以很任意的添加、删除和修改页面的某一部分。 假定，页面中有这样的一个结构： div id=mydiv p这个是段落1/p div id=content a href=#链接/a p这个是段落2/p /div /div DOM节点与DOM图 DOM DOM基础 div id=mydiv p这个是段落1/p div id=content a href=#链接/a p这个是段落2/p /div /div script var mydiv = document.getElementById(mydiv); //通过ID mydiv，获取标签 alert(mydiv.childNodes.length); //IE8得到2，其他浏览器得到5。 /script 节点的childNodes属性 DOM DOM基础 但是因为一些浏览器把HTML中格式的换行也看成了一个子节点，所以得到的是5。这些非元素标签会对我们的程序产生干扰。因此，在对节点进行操作的时候，必须首先判断节点的类型nodeType。常用的nodeType数值如下： 节点的childNodes属性 DOM DOM基础 nodeType值 节点类型 1 元素（标签）element 2 元素的属性attr 3 文本 text 获取id为content的标签，并得到它的父标签名。 源代码如下： div id=mydiv p这个是段落1/p div id=contenta href=#链接/ap这个是段落2/p/div /div script var d = document.getElementById(content); alert(d.parentNode.nodeName); // 得到mydiv的标签名div /script 节点的parentNode属性 DOM DOM基础 获取id为content的标签的前后节点。 div id=mydiv p这个是段落1/pdiv id=content/div a href=#链接/a /div script var d = document.getElementById(content); alert(d.previousSibling.nodeName); // IE8下得到 p，其他浏览器得到#text(换行的空格也被看成节点) alert(d.nextSibling.nodeName); // IE8下得到 a，其他浏览器得到#text(换行的空格也被看成节点) /script 节点的previousSibling和nextSibling属性 DOM DOM基础 removeChild()就是删除子节点。只有父标签才能删除子节点。 removeChild() DOM DOM删除节点 setAttribute(),给标签设置（增加）属性值，它接受两个参数：属性和属性值。这个属性可以是HTML自带的，也可以是开发人员自定义的属性。 增加属性：setAttribute() DOM DOM操作标签属性 通过getAttribute()可以获取属性的值，它只接受一个参数，那就是属性名。这个属性无论是原生的还是用户自定义的。 获取属性值：getAttribute() removeAttribute()方法可以彻底的把属性从标签中删除。 删除属性：removeAttribute() innerHTML，就是“里面的HTML”,通过该属性可以获取或更改双标签的内容。 标签内容：innerHTML属性 DOM DOM操作标签内容 END THANK YOU