您好,欢迎访问一九零五行业门户网

JavaScript驾驭网页-DOM_javascript技巧

一、dom全称
文档对象模型(document object model)
二、dom是什么
dom就是一个编程接口,就是一套api。
dom是针对html文档、xml等文档的一套api。就类似于jdbc是针对数据库的一套api一样。
三、dom的用途
dom 是用来访问或操作html文档、xhtml文档、xml文档中的节点元素。
现在基本上所有的浏览器都都执行了w3c发布的dom规范,所以在浏览器上就可以用dom的这些api。
dom提供对脚本友善的网页结构与内容的视图
dom把网页视为节点构成的层次树
dom树
每棵dom树的最顶端节点都是document,它在html节点的上层
网页是dom节点的集合
见图1
节点类型
网页节点是按类别分类的,主要有元素节点与文本节点构成
见图2
节点特性
利用节点特性能用于导览节点树
以下是常用的节点特性:
nodevalue 存储于节点的值,只限于文本与属性节点使用(不含元素)
nodetype 节点类型,例如它是document或text等等,但以代号表示
childnodes 包含节点下所有子节点的数组,以出现在html代码中的顺序而排列
firstchild 节点下的第一个子节点
lastchild 节点下的最后一个子节点
例子
document.getelementbyid(“id”).nodevalue;//获取某节点下的纯文本 document.getelementsbytagname(“body”)[0].childnodes[1].lastchild;//body下的第二个子节点的最后一个节点
利用dom改变元素的内容
首先 移除所有子节点
然后 根据新内容创建新的文本节点
最后 把新创建的文本子节点附加到节点下
这里涉及到三个方法
removechidl()移除目标节点下的一个子节点,传入将被移除的子节点
createtextnode()从文本字符串创建文本节点
appendchildo()以最后一个子节点的开工加入新节点,传入将被新增加的子节点
var node=document.getelementbyid(“id”);//获取元素 while (node.firstchild)//删除元素下的所有子节点(这里判断子节点是否存在,存在为true) node.removechild(node.firstchild) node.appendchild(document.createtextnode(“message”))//为元素添加新内容
总结
innerhtml虽并非万维网的标准,但这个特性能访问元素内存储的所有内容
document object model(文档对象模型),简称dom,提供访问和修改网页数据的标准化机制
dom视图页为关联节点的层次树
使用dom(而非innerhtml)改变网页内容的方案,需移除元素下所有的子节点,然后创建并附加上包含新内容的新子节点。
关于javascript驾驭网页-dom就给大家介绍到这里,下篇将给大家介绍javascript驾驭网页-css与dom,感兴趣的朋友点击!
其它类似信息

推荐信息