zoukankan      html  css  js  c++  java
  • 第10 章 DOM

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点数,允许开发人员添加、移除和修改页面的一部分。

    注意:IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致。

    10.1节点层次

    节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。

    10.1.1Node类型

    DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript是作为Node类型实现的;JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本类型与方法

    每个节点都有一个nodeType属性,用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示,任何节点类型必居其一:

    通过比较上面这些变量,可以容易地确定节点的类型。例如

    if(someNode.nodeType==Node.ELEMENT_NODE){ //IE不兼容 因为没有公开Node构造函数
        alert("Node is an element.");
    }
    if(someNode.nodeType==1){ //适用于所有浏览器
        alert("Node is an element.");
    }

    cloneNode(),用于创建调用这个方法的节点的一个完全相同的副本。

    cloneNode()方法接受一个布尔值参数,表示是否执行深复制。在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点数;在参数为false的情况下,执行浅复制,即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。因此,这个节点副本就成为一个“孤儿”,除非通过appendChild(),insertBefore()或replaceChild()将它添加到文档中

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOCUMENT OBJECT MODEL</title>
    </head>
    <body>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    <script>
    var myList=document.getElementsByTagName("ul")[0];
    var shallowList=myList.cloneNode(false);
    var deepList=myList.cloneNode(true); 
    console.log(deepList); //<ul> <li>item1</li> <li>item2</li> <li>item3</li> </ul> 深复制
    console.log(deepList.childNodes.length); //3
    console.log(shallowList); //<ul></ul> 浅复制
    console.log(shallowList.childNodes.length) //1
    </script> </body> </html>

    最后normalize(),这个方法唯一的作用就是处理文档树中的文本节点。由于解析器的实现或DOM操作等原因,可能会出现文本节点不包括文本,或者连续出现两个文本节点的情况。当子某个节点上调用这个方法时,就会在该节点的后代节点中查询上述两种情况。如果找到了空文本节点,就删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点。

    3.操作节点

  • 相关阅读:
    建设全功能团队
    gwt之mvc4g
    SQLServer代码差异备份
    DateTimePicker选择到秒
    SQL定时备份并删除过期备份
    Div文本垂直居中
    WinForm当前窗口抓图
    web架构设计经验分享(转)
    用yui compressor 压缩 javascirpt脚本
    查看sqlserver连接数
  • 原文地址:https://www.cnblogs.com/jcbo/p/6845792.html
Copyright © 2011-2022 走看看