dom使用指南

来源:互联网 发布:淘宝美工的工作职责 编辑:程序博客网 时间:2024/06/05 08:38

文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口
DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。

一.dom对象的只读属性
  *.firstChild     返回一个对象,表示当前节点第一个子节点
  *.lastChild      返回一个对象,表示当前节点最后一个子节点
  *.nextSibling    返回一个对象,表示当前节点的下一个兄弟节点
  *.previousSibling返回一个对象,表示当前节点的上一个兄弟节点
  *.parentNode     返回一个对象,表示当前节点的父对象
  *.nodeName       返回一个字符串,表示当前节点对应的html标记
  *.nodeType       返回一个数字,1表示标签,2表示属性,3表示文本项


二.dom对象的可读写属性
  *.nodeValue      返回一个字符串,表示文本项的值,如果为其他类型的节点,返回null
  *.data           返回一个字符串,表示文本项的值,如果为其他类型的节点,返回undefined

  总结:由于这些是可以写的属性,所有说我们可以动态的修改前台数据,比如(文本节点.nodeValue = "动态的值"


三.dom对象的集合属性
  *.childNodes     返回一个对象数组,表示当前节点的所有子节点集合
  *.attributes     返回一个对象数组,表示当前节点的所有属性集合,通过id来访问,比如attributes.id 或 cn2.border 例:attributes.border.nodeValue=10但是一般不这么用,因为有更简单的用法


四.常用的dom方法
  *.documentElement返回文档的根节点                 例:document.documentElement.nodeName
  *.activeElement  返回当前文档中被激活的标签节点   例:document.activeElement.nodeName

  *.createElement(sNode)  新增标签节点,参数为标签名       例:var newnode = document.createElement("div") 
  *.createTextNode(text)  创建包含静态文本的节点           例:var newText = document.createTextNode("建包含静态文本的节点 ");
  *.document.createAttribute("name") 创建属性
  *.document.createComment()         创建注释
  *.document.createStyleSheet();     创建样式
  *.document.createEventObject()     创建事件对象
  *.总要是用前二个

  *.appendChild(oNode)   追加子节点                 例:    table(一个源节点).appendChild(oNode(一个新的节点));
  *.removeChild(oNode)   删除子节点                 例:    table(一个源节点).removeChild(oNode);

  *.getAttribute(name)   得到标签对象属性名称为name的值         例:tablenode.getAttribute("border")
  *.setAttribute(name,value)   设置指定标签对象的值             例:tablenode.setAttribute("border",10);

  *.insertBefore(newNode,targetNode)  将新的newNode节点插入在目标节点targetNode之前
  *.removeNode(name)   删除以name命名的节点
  *.replaceNode(newNode,oldNode) 以newNode节点替代oldNode

  *.hasChildNodes           返回布尔值,判断是否有子节点 


<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
原创粉丝点击