zoukankan      html  css  js  c++  java
  • 文档对象模型(DOM)

     

    w3c提出了文档对象模型DOM(Document Object Mode)。浏览器通过DOM使Javascript可以访问页面上的元素,而DOM是网页上XHTML中正文标题、段落、列表、样式、ID、class以及所有其他出现的数据的一个内部表示。

    一、理解DOM

    DOM中定义了许多种节点类型:

    1、文档节点Document

    2、文档类型节点DocumentType

    3、文档片段节点DocumentFragment

    4、元素节点Element

    5、文本节点Text

    6、属性节点Attr

    7、CDataSection节点

    8、注释节点Comment

    所有类型的节点有一些共同的属性和方法。

    nodeName:节点名字;

    nodeValue:节点的值;

    nodeType:节点类型;

    ownerDocument:指向这个节点所属的文档;

    firstChild:指向在childNodes列表中第一个节点

    lastChild:指向在childNodes列表中最后一个节点

    previousSibling:指向前一个兄弟节点

    nextSibling:指向后一个兄弟节点

    hasChildNodes():当ChildNodes包含一个或多个节点是,放回true;

    attributes:包含了代表一个元素的特性的Attr对象

    appendChild(node):将node添加到childNodes的结尾

    removeChild(node):从childNodes中删除node

    replaceChild(newnode,oldnode):将oldnode替换为newnode

    insertBefore(newnode,refnode):在refnode之前插入newnode

    二、使用DOM

    1、访问相关节点

         Document.documentElement访问<htlm/>元素

         ChildNodes.length获取子节点数量

         Document.body指向<body/>元素

    2、处理元素属性

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

    removeNamedItem(name)-删除nodeName属性值等于name的节点

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

    item(pos)-想NodeList一样,返回在pos的节点

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

    getAttribute(name)

    setAttribute(name,newvalue)

    removeAttribute(name)

    3、访问指定节点

    1)getElementsByTagName()方法

    2)getElementsByName()方法 

    3)getElementById()方法

    4、创建和操作节点

    createAttribute(name)用给定名称name创建特性节点

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

    createDocumentFragment()创建文档碎片节点

    createElement(tagname)创建标记名为tagname的元素

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

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

    2)removeChild()、replaceChild()、insertBefore()

    3)createDocumentFragment()

    4)cloneNode(true)把元素以及所有子节点一起复制

    cloneNode(false)只复制元素

    5、操作文本节点

    AppendData(string)将字符串添加在文本节点尾部

    DeleteData(offset,count)删除文本节点中从指定位置开始的指定数量的字符

    InsertData(offset,string)将指定字符串插入到文本节点指定的位置中

    replaceData(offset,count,string)用给定的字符串替换文本节点指定位置指定数量的文本数据

    splitText(offset)将指定位置的文本节点分为2个部分,将右边部分返回为一个新的文本节点,左边不变

    substringData(offset,count)从文本节点的文本数据中返回指定位置指定数目的字符串

    三、table方法

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

    Caption-指向<caption/>元素

    tBodies-<tbody/>元素集合

    tFoot-指向<tfoot/>元素

    tHead-指向<thead/>元素

    rows-表格中所有行的集合

    createTHead()-创建<thead/>元素并将其放入表格

    createTFoot()-创建<tfoot/>元素并将其放入表格

    createCaption()-创建<caption/>元素并将其放入表

    deletetTHead()-删除<thead/>元素

    deletetTFoot()-删除<tfoot/>元素

    deletetCaption()-删除<caption/>元素

    deleteRow(position)-删除指定位置的行

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

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

    Rows-<tbody/>中所有行的集合

    deleteRow(position)-删除指定位置的行

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

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

    Cells-<tr/>元素中所有单元格的集合

    deleteCell(position)-删除指定位置的单元格

    insertCell(position)-在cells集合中指定位置插入新单元格

  • 相关阅读:
    【整理】PHP获取客户端真实IP地址详解
    配置百度编辑器变成纯代码编辑器
    Notepad++安装SVN插件
    【CodeBase】【转】php随机生成汉字
    【CodeBase】PHP打印所有用户自定义常量
    php5.3新垃圾回收机制详解
    php脚本cli 模式运行
    php 内存分配新
    php-fpm epoll封装
    火焰图定位dbproxy问题
  • 原文地址:https://www.cnblogs.com/p719027365/p/4070065.html
Copyright © 2011-2022 走看看