• dom1学习笔记


    文档对象模型(DOM)

       DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型:文档型节点、元素节点、特性节点、注释节点等共有12种节点类型。DOM1级定义了一个Node接口,该接口由所有节点类型实现。可通过nodeType属性显示节点的类型。推荐将nodeType与数字值比较得知节点类型(如果是使用数值常量例如Node.ELEMENT_NODE(1)比较,在IE中无效)。

    一、Node类型

        1、每个节点都有三个属性(通用):

                     nodeName(对应节点元素标签名,在element类型中等同于属性tagName)、

                     nodeType(对应节点类型对应的数字)、

                     nodeValue(对应节点的值)。

        2、节点关系(家族关系)(用于遍历节点)。对应有一下几个属性:

                     childNodes   返回子节点的Nodelist

          (Nodelist 似数组但不是数组,有length属性,是有生命、有呼吸的对象,能随节点的变动而实时变动,而非第一次访问的某个瞬间拍摄下的快照。Nodelist可通过方框号下标访问,也可以使用item()访问)

                     parent    返回节点的父节点

                     firstChild  返回第一个子节点

                     lastChild   返回最后一个子节点

                     previousSibling  返回前一个同胞兄弟节点

                     nextSibling    返回下一个同胞兄弟节点

         3、节点操作(都是对其子节点的操作,也即是对其Nodelist的操作)

                     appendChild()   用于childNodes列表的末尾追加一个节点

                     insertBefore()  (两个参数:第一个参数为新节点,第二个参数为参照节点)在参照节点前插入新节点

                     replaceChild()    (两个参数:第一个参数为新节点,第二个参数为替换节点)用新节点替换要替换的节点

                     removeChild()    移除节点

          4、cloneNode()   用于创建调用这个方法的节点的一个完全相同的副本。若参数为true,则进行深度克隆,但一般浏览器不会克隆其节点中的javascript或事件处理,只复制特性和子节点。(但IE有个bug,会复制事件处理程序)

          5、normalize()   用于处理文档树中的文本节点。如果在调用该方法的后代子节点中发现空文本节点,就删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点。

    二、获取节点

         1、document.getElementById("ID name")    通过Id获取节点

         2、document.getElementsByTagName("tag name")    通过标签名称获取节点

         3、document.getElementsByName("name")      通过属性name的值获取节点

    三、特性节点的操作

            设  element为元素节点

              (1)element.getAttribute("特性名称")    获取特性节点

              (2)element.setAttribute("名称",“值”)  设置特性节点

              (3)element.removeAttribute("特性名称")  移除特性节点

                以下方法不常用

              (4)element.getAttributeNode("名称")   获取特性节点

              (5)element.setAttributeNode(node)    设置特性节点

              (6)element.createAttribute("名称")      创建特性节点

    四。创建节点

               (1)document.createElement(“标签名”)     创建Element节点

               (2)document.createAttribute("属性名称")  创建Atrr节点

               (3)document.createTextNode("字符串")    创建Text节点

               (4)document.createComment("字符串")    创建Comment节点

               (5)document.createDocumentFragment()   创建DocumentFragment类型

    五、不同类型的节点

          1、document类型(document作为HTMLDocument的一个实例)

                    (1)document.documentElement      获取<html>的引用

                    (2)document.body     获取<body>的引用

                    (3)document.doctype   获取<!DOCTYPE>的引用    有些浏览器不把它当做文档的子节点,但其也是一节点,但不会出现在document.childNodes中。

                    (4)document.title  获取文档标题

                      三个与网页请求有关的属性URL、domain、referrer,这些信息都存储在HTTP的头部:

                   (5)document.URL  获取页面的完整URL

                   (6)document.domain    获取页面的域名(由于不同的子域的页面无法通过javascript通讯,而将每个页面的document.domain设置为相同的值,则不同的页面中javascript可以访问对方的javascript对象。但如果domain属性一开始设置为“松散”例如"wrox.com",就不能设置为“紧绷”例如“p2p.wrox.com”)

                   (7)document.referrer   获取链接到当前页面的URL

          一些document类型的特殊集合

                    (1)、document.anchors    包含文档中的所有带有name特性的<a>元素

                    (2)、document.applets     包含文档中所有<applet>元素

                    (3)、document.forms       包含文档中所有的<form>元素

                    (4)、document.images      包含文档中所有的<img>元素

                    (5)、document.links          包含文档中所有带有href特性的<a>元素

           2、Element类型(所有HTML元素都由HTMLElement类型表示)

                元素标签element的属性有:

                     (1)、element.id   元素在文档中唯一的标识

                     (2)、element.title  有关元素的附加说明信息

                     (3)、element.lang  元素内容的语言代码

                     (4)、element.dir  语言方向  值有“ltr”和“rtl”

                     (5)、element.className  与元素的class属性对应     

                     (6)element.attributes      返回特性列表也即对应的NamedNodeMap 与Nodelist类似,可以通过下标访问,也可以通过以下方法操作:

                          *element.attributes.getNameItem(name)    获取特性为name的属性

                          *element.attributes.removeNamedItem(name)  移除特性为name的节点

                          *element.attributes.setNamedItem(node)     向列表添加节点

                          *element.attributes.item(pos)     获取数字pos位置处的节点

                  

           3、Attr类型

                   三个属性:name、value、specified

                   每个特性节点都有一个specified属性,当为true时 ,代表是指定的属性,当为false时,代表未经设定的属性,也即是默认属性

           4、Text类型

                可以通过nodeValue属性或data属性访问Text节点中包含的文本。

                一些操作文本节点的操作

                     appendData(text)    将text添加到节点的末尾

                     deleteData(offset, count)     从offset指定的位置开始删除count个字符     

                     insertData(offset,  text)       在offset指定的位置插入text

                     replaceData(offset, count, text)   用text替换从offset指定位置开始到offset+count为止处的文本

                     splitText(offset)     从offset指定的位置将当前文本节点分成两个文本节点。

                     substringData(offset,count) 提取从offset指定位置开始到offset+count为止的字符串

           

           5、Comment类型

                 Comment类型与Text类型继承来自相同的基类,因此它除了splitText()之外的所有字符串操作方法。与Text类型相似,也可以通过nodeValue或data属性来取得注释的内容。注释节点也可以通过其父节点来访问。

             eg:

                  <div id="myid">      

                  <!--这是注释-->

                  </div>

          var div = document.getElementById("myid"),

               comment = div.firstChild;

              alert(comment.data);  //这是注释

            6、CDATASection类型

                 CDATASection 类型只针对基于XML的文档,表示的是CDATA区域,与Comment类似,CDATASection类型继承自Text类型,因此拥有除了splitText()之外的所有字符串操作方法。

                 ps: CDATA区域只会出现在XML文档中,因此多数浏览器都会把CDATA区域错误地解析为Comment或Element。

            7、DocumentFragment类型

                在所有节点类型中,只有DocumentFragment在文档中没有对应的标记,dom规定文档片段是一种“轻量级”的文档,可以包含和控制节点,不会像完整的文档那样占用额外的资源。它继承了Node的所有方法。

               子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference

               ps:虽然不能将文档片段直接添加到文档中,但可以将它作为一个“仓库”使用,用来存储其他节点。

        

    六、文档写入方法:

             1、document.write()    原样写入文本

             2、document.writeln()  写入文本后,末尾添加一个换行符

             3、document.open()    打开网页的输入流

             4、document.close()    关闭网页的输入流

        (ps:参考javascript高级程序设计第三版,若有错漏,万望各位帮忙纠错,共同分享学习经验才有进步的。)

  • 相关阅读:
    单片机与嵌入式系统中C语言的位运算小记
    #ifndef、#def、#endif说明
    Freertos学习初识任务函数
    IAR(EWARM)下移植FreeRTOS到STM32F10x笔记
    visio 画 弯曲 箭头 ( 波浪线 曲线)
    dos 中tree的使用方法
    Win7下Borland C++ 4.5 & TASM5.0调试uC/OSII
    (*(volatile unsigned long *)
    有关推挽输出、开漏输出、复用开漏输出、复用推挽输出以及上拉输入、下拉输入、浮空输入、模拟输入区别
    POJ 1236 Network of Schools
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/3500249.html
Copyright © 2020-2023  润新知