zoukankan      html  css  js  c++  java
  • DOM总结

      DOM(文档对象模型)提供标签对象通用的访问方式,将Html文件视为一颗节点树,没一个标签和文字都是一个节点,可以走访文件的节点和访问Html标签的内容。

      DOM树中的不同类型的节点有一些共同的属性和方法,通过这些属性和方法,我们可以访问DOM树中的所有节点、动态创建各种类型的节点。节点是DOM中最基本的对象类型,节点就是DOM树中的任何事物。

    一、访问节点

      访问元素时,我们应该知道该文件的文档元素是什么:

      document.documentElement--访问元素;

    二、检测节点类型

      通过使用nodeType特性检测节点类型:

      alert(document.nodeType);

      alert(document.documentElement.nodeType);

    三、处理元素属性

      节点对象即使具有attributes方法,但已经被所有类型的节点继承,只有元素节点才能有特性。元素节点的attributes属性其实是NameNodeMap,提供了用于访问和处理其内容的方法;

      1)getNamedItem(name)--返回nodeName属性值等于name节点;

      2)removegetNamedItem(name)--删除nodeName属性值等于name节点;

      3)setNamedItem(name)--将node添加到列表中,按nodeName属性进行索引;

      4)Item(pos)--像NodeList一样,返回位置在pos的节点

    DOM又定义了三个元素方法来帮助访问特性;

      1)getAttribute(name)--等于attributes.getNamedItem(name).value;

      2)setAttribute(name,newvalue)--attributes.getNamedItem(name).value=newvalue;

      3)removeAttribute(name)--等于attributes.removegetNamedItem(name);

    四、访问指定节点

      1)getElementsByTagName()--返回一个NodeList数组,包含所有标记名特性;

        getElementsByTagName(“img”)

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

      3)getElementById()--取单个指定元素(id具有唯一性,所以这是能最快的从文档树中找到指点元素的方法);

    五、创建和操作节点

      1)createAttribute(name):用给定名称name创建特性节点(创建一个属性);

      2)createComment(text):创建包含文本text的注释节点;

      3)createDocumentFragment():创建文档碎片节点;

      4)createElement(tagname):创建标记名为tagname的标签;

        document.createElement(“p”);

      5)createTextNode(text):创建包含文本text的文本节点;

        document.createTextNode(“hello,world”);

      6)removChild():移除子元素;

        document.parentNode.removChild();

      7)appendChild():添加子元素;

        document.parentNode.appendChild();

      8)replaceChild():替换子元素;

        document.parentNode.replaceChild(要添加的节点,被替换的接地啊);

      9)insertBefore():插入新的到旧的之前;

        document.parentNode.insertBefore(要添加的节点,插在那个节点之前);

      10)cloneNode():克隆节点;

        false为浅克隆,克隆的是标签;true为深克隆,全部克隆。

    六、table方法

      <table/>元素添加以下内容:

        caption:指向<caption/>元素(如果存在);

        tBodies:<tbody/>元素的集合;

        tFoot:指向<tFoot/>元素(如果存在);

        tHead:指向<tHead/>元素(如果存在);

        rows:表格中所有行的集合;

        createTHead:创建<tHead/>元素并将其放入表格;

        createTFoot:创建<tFoot/>元素并将其放入表格;

        createCaption:创建<caption/>元素并将其放入表格;

        delectTHead:删除<tHead/>元素;

        delectTFoot:删除<tFoot/>元素;

        delectCaption:删除<caption/>元素;

        delectRow(position):删除指定位置上的行;

        insertRow(position):在rows集合中的指定位置插入新行;

        <tbody/>元素添加以下内容:

        rows:<tbody/>中所有行的集合;

        delectRow(position):删除指定位置上的行;

        insertRow(position):在rows集合中的指定位置插入新行;

      <tr/>元素添加以下内容:

        cells:<tr/>元素中所有单元格的集合;

        delectCell(position):删除指定位置上的单元格;

        insertCell(position):在cells集合中的给定位置插入新单元格;

  • 相关阅读:
    TP框架模板中IF Else 如何使用?
    Append 后如何使用 fadein淡入效果
    ThinkPad如何修改fn键默认操作
    TP框架ajax U方法不解析怎么办?
    thinkphp session如何取数组
    FTP服务搭建
    Linux系统学习之字符处理
    如何使用zabbix初级监控
    项目同步部署
    巡检常用命令
  • 原文地址:https://www.cnblogs.com/LeeX/p/4082517.html
Copyright © 2011-2022 走看看