码迷,mamicode.com
首页 > 其他好文 > 详细

文档对象模型DOM

时间:2017-03-06 23:28:57      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:tab   ntb   att   数据   classname   innerhtml   字符串替换   指定位置   get   

 1、节点:
      文档节点Document
      元素节点Element
      文本节点Text
      属性节点Attr
      注释节点Comment
     
  2、节点的属性和方法:
      nodeType:判断节点类型
      ownerDocument:指向这个节点所属的文档
      firstChild:指向在childNodes列表中的第一个节点
      lastChild:指向在childNodes列表中的最后一个节点
      childNodes:所有子节点的列表
      previousSibling:指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为null
      nextSibling:指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为null
      hasChildNodes():当childNodes包含一个或多个节点时
      attributes:包含了代表一个元素的特性的Attr对象;仅用于Element节点
      appendChild(node):将node添加到childNodes的末尾
      removeChild(node):从childNodes中删除node
      replaceChild(newnode,oldnode):将childNodes中的oldnode替换成newnode
      insertBefore(newnode,refnode):在childNodes中的refnode之前插入newnode
  3、助手对象
      NodeList:用来表示一个元素的子节点
      NamedNodeMap:用于表示元素特性
 
  4、访问相关的节点
      访问<html/>元素:var ohtml=document.ducumentElement;
      取得<head/>和<body/>元素:var oHead=ohtml.firstChild或var oHead=ohtml.childNodes[0]
                               或var oHead=ohtml.childNodes.item(0);
                               var oBody=ohtml.lastChild或var oBody=ohtml.childNodes[1]
                               或var oHead=ohtml.childNodes.item(1);;
      获取子节点的数量:alert(ohtml.childNodes.length);
      查询是否存在一个子节点:hasChildNodes()。
      定义document.body作为指向<body/>元素的指针:var oBody=document.body;

 parentNode
  5、检测节点类型(nodeType)
  6、处理元素属性
      getAttribute(name):返回node属性值等于name的节点;
      setAttribute(name,newname):更改
      removeAttribute(name):删除node属性值等于name的节点;
      var sId=op.getAttribute("id"):获取id特性。
  7、访问指定节点
      1)getElementsByTagName()
        var oImgs=document.getElementByTagName("img");
        alert(oImg[0].tagName);

 

 var oPs=document.getElementsByTagname("p");         var oImgsInP=oPs.getElementsByTagName("img");       用星号的方法来获取document中的所有元素。但IE必须使用document.all来代替它      

      2)getElementsByName()(获取所有name属性等于指定值的元素)      

      3)getElementById()

  8、创建和操作节点      

     1)createElement()、createTextNode()、appendChild()        

         var oP=document.createElement("P");        

        var oText=document.createTextNode("Hello world!");        

        oP.appendChild(oText);        

        document.body.appendChild(oP);        

         在body里面写onload。      

     2)removeChild()删除节点、replaceChild()替换节点、insertBefore()插入节点,可以让新消息出

现在旧消息之前。      

     3)createDocumentFragment():创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容

一次性添加到document中。      

    4)cloneNode()复制节点      

    5)操作文本节点          访问文本节点事例:textNode=document.getElementById(‘p1‘).firstChild;          用length属性访问它的长度,data属性设置它的属性值。          方法:apppendData(string):将字符串添加在文本节点的文本末尾。                deleteData(offset,count):删除文本节点中从指定位置开始的指定数量的字符。                insertData(offset,string):将指定字符串插入到文本节点指定的位置中。                replaceData(offset,count,string):用给定的字符串替换文本节点指定位置指定数量的文

本数据。                splitText(offset):将指定位置的文本节点分成两部分,将右边的部分返回为一个新的文本

节点,将左边的部分留在原始位置。                substringData(offset,count):从文本节点的文本数据中返回指定位置指定数目的字符串。  

 9、HTML DOM特征功能       1)让特性像属性一样。className       2)table方法       3)innerHTML

文档对象模型DOM

标签:tab   ntb   att   数据   classname   innerhtml   字符串替换   指定位置   get   

原文地址:http://www.cnblogs.com/hurui/p/6512290.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!