<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<!---DOM基础知识-->

<p>DOM1级别 DOM Core DOM HTML </p>

<p>DOM2级别 DOM Views DOM Events DOM Style DOM Traversal and DOM Ranges</p>

<P>DOM3级别 DOM Load and Save DOM Validation</P>

<div id="divContainer" style=" height: auto; width:600px;">DOM3级别</div>

<div id="divContainer1" style=" height: auto; width:600px;">

    <p>Element 1 </P>

    <p> Attr（属性节点） 2

        是包含他的元素节点的一部分，不属于文档树的一部分

    </P>

    <p>Text（文本节点） 3

        空格同样属于文本节点

    </P>

    <p>Comment（注释节点） 8 </P>

    <p>Document(文档节点） 9 </P>

    <p>DocumentType（文档类型节点） 10 </P>

    <p>DocumentFragment（文档片段节点） 11 所有节点的根节点 </P>

</div>

<div>

    <p>webkit 渲染流程</p>

    <p>解析HTML 构建DOM树--->构建渲染树---->布局渲染树--->绘制渲染树<p>

        <p style="padding-left: 230px;">                                      DOM                   <p>

        <p style="padding-left: 230px;">                                      ||                       <p>

        <p >                                HTML  --------->Html  Parse--->DOM Tree  --->layout     <p>

        <p style="padding-left: 230px;">                                      ||          ||        <p>

        <p style="padding-left: 230px;">                           Attachment---->Render Tree----->Painting----->Display<p>

        <p style="padding-left: 230px;">                                      ||

        <p>                                 Style Sheet---->Css Parse  --->Style Rules<p>

</div>

</body>

<script type="text/javascript">

    //IE 7 IE 8不支持Node

    var divNode = document.getElementById("divContainer");

    if (divNode.nodeType == Node.ELEMENT_NODE) {

        console.log("this is a element");

    }

    //IE 兼容

    if (divNode.nodeType = 1) {

        console.log("this is a element");

    }

    console.log("--attributes nodes--");

    var attrNodes = divNode.attributes;

    for (var i = 0; i < attrNodes.length; i++) {

        var item = attrNodes[i];

        console.log(item.nodeName + "----" + item.nodeValue);

    }

    console.log("--child nodes--");

    var childNodes = divNode.childNodes;

    for (var i = 0; i < childNodes.length; i++) {

        var item = childNodes[i];

        console.log(item.nodeName + "----" + item.nodeValue);

    }

    console.log("document.doctype.nodeName:  " + document.doctype.nodeName + "----document.doctype.nodeValue:  "

    + document.doctype.nodeValue)

    var comment=document.body.childNodes[1];

    console.log(comment.nodeName+"0--0"+comment.nodeValue)

    var flat=document.createDocumentFragment();

    console.log(flat.nodeName+"--"+flat.nodeValue)

</script>

</html>

DOM（一）的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. C++ Regsvr32订购具体解释

    一.Regsvr32命令 Regsvr 32命令是Windows在控制文件(如延长DLL.OCX.CPL文件)注册和反注册工具. 命令格公式:Regsvr32 [/s] [/n] [/i[:cmdli ...

  2. TortoiseGit安装与配置（转）

    TortoiseGit 简称 tgit, 中文名海龟Git. 海龟Git只支持神器 Windows 系统, 有一个前辈海龟SVN, TortoiseSVN和TortoiseGit都是非常优秀的开源的版 ...

  3. Nyoj 星际之门（一）(Cayley定理)

    描述 公元3000年,子虚帝国统领着N个星系,原先它们是靠近光束飞船来进行旅行的,近来,X博士发明了星际之门,它利用虫洞技术,一条虫洞可以连通任意的两个星系,使人们不必再待待便可立刻到达目的地. 帝国 ...

  4. 网络资源(6) - EJB视频

    2014_08_24 http://v.youku.com/v_show/id_XMjE0NjE3MDA0.html?f=5227828 01_EJB3.0_下载安装与运行jboss -------- ...

  5. Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds解

    产生了一个解决这个问题的方法是在项目部署到tomcat比长45第二,当项目是比较大的,框架复杂的问题经常发生. 解决方法非常easy,找到以下这个路径中 workspace\.metadata\.pl ...

  6. UVA 11426 - GCD - Extreme (II) (数论)

    UVA 11426 - GCD - Extreme (II) 题目链接 题意:给定N.求∑i<=ni=1∑j<nj=1gcd(i,j)的值. 思路:lrj白书上的例题,设f(n) = gc ...

  7. 2013级C++第13周(春)项目——继承的进一步话题与GUI应用开发

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 第一部分 程序阅读:阅读以下类的定义,请说出在 ...

  8. iOS程序发布时出现your application is being uploaded解决办法

    当用Xcode发布app时候出现“your application is being uploaded”或者用Application Loader 一直出现“ 正在通过ITUNES STORE进行鉴定 ...

  9. java中string和int互相转化

    1 怎样将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt([ ...

  10. php 基础算法（用*表示金字塔）通过hash 比較两个数组同样的数

    当作为一名php 程序猿,每天总与数据库打交道,做着最底层的程序猿的工作,開始着手研究一些算法,希望自己能在计算机的道路上走的更远.事实上我更喜欢管理,希望自己能作为一个卓越的管理者,但并不影响我对技 ...