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

1、人机交互界面设计第十章dom目录01 dom基础02 dom增加节点03 dom删除节点04 dom操作标签属性05 dom操作标签内容domdomdom（document object model，文档对象模型），它定义了访问 html 和 xml 文档标签的标准。通过dom，开发人员可以很任意的添加、删除和修改页面的某一部分。假定，页面中有这样的一个结构：这个是段落1 链接 这个是段落2 dom节点与dom图domdom基础这个是段落1 链接 这个是段落2 var mydiv = document.getelementbyid(mydiv); /通过id mydiv，获取标签alert(m

2、ydiv.childnodes.length); /ie8得到2，其他浏览器得到5。节点的childnodes属性domdom基础但是因为一些浏览器把html中格式的换行也看成了一个子节点，所以得到的是5。这些非元素标签会对我们的程序产生干扰。因此，在对节点进行操作的时候，必须首先判断节点的类型nodetype。常用的nodetype数值如下：节点的childnodes属性domdom基础 nodetype值 节点类型 1元素（标签）element 2元素的属性attr 3文本 text获取id为content的标签，并得到它的父标签名。源代码如下：这个是段落1链接这个是段落2 var d =

3、 document.getelementbyid(content); alert(d.parentnode.nodename); / 得到mydiv的标签名div节点的parentnode属性domdom基础获取id为content的标签的前后节点。这个是段落1 链接var d = document.getelementbyid(content); alert(d.previoussibling.nodename); / ie8下得到 p，其他浏览器得到#text(换行的空格也被看成节点)alert(d.nextsibling.nodename); / ie8下得到 a，其他浏览器得到#tex

4、t(换行的空格也被看成节点)节点的previoussibling和nextsibling属性domdom基础js通过document.createelement()方法可以创建新的标签。括号（）里只需要写要创建的标签名就可以了。例如：var mydiv = document.createelement(“div”);使用以上代码就可以创建一个div标签，并把这个标签存储在变量mydiv里。那么mydiv这个变量就具有一个标签所具有一起特性。新增节点document.createelement(标签名)domdom增加节点appendchild()顾名思义，就是添加子标签，只有父标签才能添加子标

5、签。appendchild()是把标签添加到指定结构的尾部，如下：document.body.appendchild(mydiv)可以把变量mydiv存储的标签添加到body标签的最后。如果要在页面指定位置添加标签，那么需要先获取对应的父标签。添加节点到结构的尾部：appendchild()domdom增加节点nsertbefore()方法顾名思义可以把节点插入到某个节点之前，它接受两个参数：要插入的节点和作为参照的节点。不过，inertbefore()是节点的方法，且是属于父节点的方法。因此，要插入的标签和参照标签都应该要在同一个父节点里。添加节点到结构的特定位置上：insertbefore()domdom增加节点removechild()就是删除子节点。只有父标签才能删除子节点。removechild()domdom删除节点setattribute(),给标签设置（增加）属性值，它接受两个参数：属性和属性值。这个属性可以是html自带的，也可以是开发人员自定义的属性。增加属性：setattribute()domdom操作标签属性通过getattribute()可以获取属性的值，它只接受一个参数，那就是属性名。这个属性无论是原生的还是用户自定义的。获取属性值：getattribute()removeattribute()方法可以彻底的把属性从标签中删除。删除属性：remov