• JavaScipt中对DOM的理解


    一.理解DOM

      浏览器通过文档对象模型DOM使JavaScript程序可以访问页面上的元素,而DOM是页面上XHTML中文档正文标题、段落、列表、样式IDclass以及所有其他出现的数据的一个内部表示。

     DOM的主要思想是HTML上每一个元素分别对应于DOM中的一个节点。DOM定义了许多种节点类型来表示节点的多个方面:

    1.文档节点Document-----最顶层的节点或者说是各节点,它代表整个XHTML文档,所有的其他节点都是附属于它的。

    2.文档类型节点DocumentType------DTD引用(使用<!DOCTYPE >语法)的对象表现形式。

    3.文档片段节点DocumentFragment-----可以像Document一样来保存其他节点。

    4.元素节点Element-----表示起始标记和结束标记之间的内容。

    5.文本节点Text----代表XHTM文档中元素的起始标记和结束标记之间,或者CDataSection内容包含普通文本。

    6.属性节点Attr-----d代表元素节点开始标记内指定的属性。

    7.CDataSection节点----<![CDATA]>的对象表现形式。

    8.注释节点Comment----代表注释。

    二.使用DOM

    1.访问相关的节点

     要访问<html/>元素,我们可以使用documentdocumentElement特性:

     Var oHead=oHtml.firstChild;

     Var oBody=oHtml.lastChild;

    也可以使用childNodes特性来完成同样的工作,使用方括号标记:

    Var oHead=oHtml.childNodes[0];

    Var oHead=oHtml.childNodes[1];

    实际上,正式的从childNodes列表中获取子节点的方法是使用item()方法:

    Var oHead=oHtml.childNodes.item(0);

    Var oHead=oHtml.childNodes.item(0);

    2.检测节点类型

         元素节点的attributes属性其实是NameNodeMap,它提供一些用于访问和处理其内容的方法,包括:

    (1).getNameItem(name)---返回nodeName属性值等于name的节点

    (2).removeNameItem(name)----删除nodeName属性值等于name的节点

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

    (4).itme(pose)----NodeList一样,返回在位置pos的节点

    3.访问指定节点

     (1).getElementByTagName()方法

       DOM定义了getElementByTagName()方法,用来返回一个包含所有的tagName(标记名)特性等于某个指定值得元素的NodeList。如:

    Var oImgs=document.getElementsByTagName(“img”);

     上一行代码返回文档中所有<img/>元素的列表。

    (2).getElementByName()方法

         DOM定义了getElementByName()方法,用来获取所有name属性等于指定值得元素,如:

    Var oRadios=document.getElementByName”radColor”);

    (3).getElementById()方法

           Var=oDiv=document.getElementById(“div1”);

       4.创建和操作节点

    (1) 创建节点createElement( )、createTextNode( )appendChild( ) 如:

                    先创建节点名称

         Var op=document.createElement(“p”);

              再创建text文本节点

         Var text=document.createTextNode;

             把text值加到p元素中

        Op.appendChildtext);

             把元素加到页面上 

    Document.Body appendChildop);

    (2)删除、替换节点removeChild( )replaceChild( )、insertBefore( )

           删除节点

      Var op=document.body.getElementByName(“p”)[0]

     Op.parentNode.removeChildop

          替换节点

     Var newp=document.createElement(“p”)

     Var text=document.createTextNode

     Newp.appendChildtext);

     Var oldp=document.getElementByName(“p”)[0];

     Oldp.parentNode.replaceChild(newP,oldP);

    5.操作文本节点

     AppenDatastring)将字符添加在文本节点尾部

    DeleteDataoffsetcount)删除文本节点中从指定位置开始的指定数量的字符

    InsertDataoffsetstring)将指定字符添加到指定位置

    ReplaceDataoffsetcountstring)用给的字符串替换文本节点指定位置数量的文本数

    Splittextoffset)将文本分为两个部分右边返回为新节点,左边留在原始位置

    SubstringDataoffsetcount)从文本节点中数据返回指定位置指定数目的字符串

    三.HTML DOM特征功能

      1.table方法       

    使用DOM来创建HTML 表格

    var table=document.creatElement(“table”)

    var tbody=createElement(“tbody”);

    table.appendChild(tbody)

    var otr1= document.creatElement(“tr”);

    tbody. appendChild(otr1)

    var otd1= document.creatElement(“td”);

    otd1. appendChild(document.creatTextNode(“Cell 1,1”));

    otr1. appendChild(otd1)

    四.innerHTML

    HTML的字符串赋值给一个元素

    代码<div><b>hello</b>WORLD</div>  innerHTML <b>hello</b>WORLD

      

  • 相关阅读:
    Redis面试题
    spring boot错误: 找不到或无法加载主类
    JAVA的高并发编程
    Redis多机多节点集群实验
    Redis单机多节点集群实验
    Redis集群概述
    Redis的持久化之AOF方式
    Redis的持久化之RDB方式
    Redis持久化介绍
    Redis Keys的通用操作
  • 原文地址:https://www.cnblogs.com/lisen28/p/4102705.html
Copyright © 2020-2023  润新知