人机交互界面的设计第十章 DOM.pptVIP

人机交互界面设计 第十章 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基础 JS通过document.createElement()方法可以创建新的标签。括号（）里只需要写要创建的标签名就可以了。例如： var mydiv = document.createElement(“div”); 使用以上代码就可以创建一个div标签，并把这个标签存储在变量mydiv里。那么mydiv这个变量就具有一个标签所具有一起特性。 新增节点document.createElement(标签名) DOM DOM增加节点 appendChild()顾名思义，就是添加子标签，只有父标签才能添加子标签。appendChild()是把标签添加到指定结构的尾部，如下： document.body.appendChild(mydiv) 可以把变量mydiv存储的标签添加到body标签的最后。如果要在页面指定位置添加标签，那么需要先获取对应的父标签。 添加节点到结构的尾部：appendChild() DOM DOM增加节点 nsertBefore()方法顾名思义可以把节点插入到某个节点之前，它接受两个参数：要插入的节点和作为参照的节点。不过，inertBefore()是节点的方法，且是属于父节点的方法。因此，要插入的标签和参照标签都应该要在同一个父节点里。 添加节点到结构的特定位置上：insertBefore() DOM DOM增加节点 removeChild()就是删除子节点。只有父标签才能删除子节点。 removeChild() DOM DOM删除节点 setAttribute(),给标签设置（增加）属性值，它接受两个参数：属性和属性值。