<!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. handlebar的一些用法——个人使用总结

    handlebar的一些用法 概述与介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less t ...

  2. MP4文件格式具体解释——结构概述

    MP4文件格式具体解释(ISO-14496-12/14) Author:Pirate Leo Email:codeevoship@gmail.com 一.基本概念 1. 文件,由很多Box和FullB ...

  3. ABP领域层——实体

    ABP领域层——实体 基于DDD的现代ASP.NET开发框架--ABP系列之10.ABP领域层——实体 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的 ...

  4. Android 内存管理 &amp;Memory Leak &amp; OOM 分析

    1.Android 流程管理&内存 Android主要应用在嵌入式设备其中.而嵌入式设备因为一些众所周知的条件限制,通常都不会有非常高的配置,特别是内存是比較有限的. 假设我们编写的代 码其中 ...

  5. KafkaOffsetMonitor

    Kafka实战-KafkaOffsetMonitor   1.概述 前面给大家介绍了Kafka的背景以及一些应用场景,并附带上演示了Kafka的简单示例.然后,在开发的过程当中,我们会发现一些问题,那 ...

  6. linux_曝出重大bash安全漏洞及修复方法

    日前Linux官方内置Bash中新发现一个非常严重安全漏洞(漏洞参考https://access.redhat.com/security/cve/CVE-2014-6271  ),黑客可以利用该Bas ...

  7. Unity插件之NGUI学习(6)—— 关于Widget怎样加入触发事件(触发OnClick)

    NGUI中,Button本身就带有OnClick事件,可是Sprite,Label等( 也绑有Widget的)并没有触发事件,事实上NGUI的事件触发都必须加入Box Collider,并勾选Is T ...

  8. root运行/media可运行文件权限不够,chmod改动权限无效

    http://blog.csdn.net/pipisorry/article/details/39649699 问题: 我想运行media目录下自己写的某个程序,但无法运行? 1. 于是我以root的 ...

  9. hust1384---The value of F[n]

    Description For any integer i>=3 we have F[i]=(F[i-1]+2*F[i-2]+3*F[i-3])%9901; Now give you F[0], ...

  10. Utility Classes Are Evil

    原文地址:http://alphawang.com/blog/2014/09/utility-classes-are-evil/ This post is a summary of this arti ...