DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息，每种类型都继承与Node接口，因此都共同享有一些属性和方法，同时，也拥有各自的特点、数据和方法。另外，每个节点都与其余节点存在一些关系。

一、节点树

以下面代码为例，先简单介绍一下：

<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <p>Hello world</p>
</body>
</html>

　　这段代码的节点树表示如图(由三种类型的节点组成：Document/Element/Text)：

二、节点共有的属性和方法

三、不同类型节点的介绍

1、Document类型

　　document对象是Document类型的一个实例，表示整个html页面，并具有以下的属性和方法：

2、Element类型

　　Element类型主要提供了对元素标签名、子节点和特性的访问。元素中所有指定的信息，可以通过以下代码来获取：

<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <div id="myDiv" class="bd" title = "Body text" lang = "en" dir = "ltr"></div>
<script>
    var div = document.getElementById("myDiv");
    alert(div.id);
    alert(div.className);
    alert(div.title);
    alert(div.lang);
    alert(div.dir);
</script>
</body>
</html>

　　也可以通过操作DOM的方法来获取、修改、移除相应的属性，方法有：getAttribute()、setAttribute()、removeAttribute()，以getAttribute()为例：

<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <div id="myDiv" class="bd" title = "Body text" lang = "en" dir = "ltr"></div>
<script>
    var div = document.getElementById("myDiv");
    alert(div.getAttribute("id"));
    alert(div.getAttribute("class"));
    alert(div.getAttribute("title"));
    alert(div.getAttribute("lang"));
    alert(div.getAttribute("dir"));
</script>
</body>
</html>

3、Text类型

　　文本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。在默认情况下，每个包含内容的元素最多也只能有一个文本节点，而且必须有内容存在。

<!-- 没有内容，也就没有文本节点 -->
<div></div>

<!-- 有空格，因此有一个文本节点 -->
<div> </div>

<!-- 有内容，因而有一个文本节点 -->
<div>Hello World!</div>

4、Comment类型

　　注释在DOM中是通过comment类型来表示的。注释节点可以通过其父节点来访问：

<html>
<head></head>
<body>
    <div id="myDiv"><!--A comment--></div>
<script>
    var div = document.getElementById("myDiv");
    var comment = div.firstChild;
    alert(comment.data);
</script>
</body>
</html>

　　另外，通过document.createComment()也可以创建注释节点。

5、CDATASection类型

　　CDATASection类型只针对XML的文档，表示的是CDATA区域。

6、DocumentType类型

　　DocumentType类型在web浏览器中并不常见，并且该类型的对象不能动态创建。

7、Document.Fragment类型

　　Document.Fragment类型在文档中没有对应的标记，虽然不能把它直接添加到文档中，但是它可以作为一个“仓库”来使用，可以在里面保存将来会添加到文档中的节点。如下例所示，如果单独为<ul>元素添加3个列表项，将会导致浏览器反复渲染；通过文档片段来保存列表项，然后一次性的添加它们，可以避免这个问题。

<html>
<head></head>
<body>
    <ul id="myList"></ul>
<script>
    var fragment = document.createDocumentFragment();
    var ul = document.getElementById("myList");
    var li = null;
    for(var i = 0; i < 3; i++){
        li = document.createElement("li");
        li.appendChild(document.createTextNode("Item" + i));
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
</script>
    </body>
</html>

8、Attr类型

　　Attr类型表示的是存在于元素属性中的节点，尽管它被认为是节点，但是并不存在于文档树中，通常使用getAttribute()、setAttribute()、removeAttribute()访问，很少直接引用Attr节点。

四、DOM操作技术

　　DOM操作是JAVASCRIPT中开销最大的操作，以下介绍动态插入脚本、动态修改CSS样式。

1、动态脚本

<!-- 动态插入外部文件 -->
<script>
    function loadScript(url){
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.scr = url;
        document.body.appendChild(script);
    }
    loadScript("client.js");
</script>
<!-- 直接插入javascript代码 -->
<script>
    function loadScriptString(code){
        var script = document.createElement("script");
        script.type = "text/javascript";
        try{
            // 如果出错，说明是IE
            script.appendChild(document.createTextNode(code));
        }catch(ex){
            script.text = code;
        };
        document.body.appendChild(script);
    }
    loadScript("function sayHi(){alert('Hi');}]");
</script>

2、动态样式

　　动态样式是指页面刚加载时，不存在的样式；动态样式是在页面加载完后，动态添加到页面中的。

<!-- 动态插入外部样式表 -->
<script>
    function loadStyles(url){
        var link = document.createElement("link");
        link.type = "text/css";
        link.href = url;
        document.body.appendChild(link);
    }
    loadStyles("styles.css");
</script>
<!-- 直接插入样式代码 -->
<script>
    function loadStyleString(css){
        var style = document.createElement("style");
        style.type = "text/css";
        try{
            // 如果出错，说明是IE
            style.appendChild(document.createTextNode(css));
        }catch(ex){
            style.StyleSheet.cssText = css;
        };
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(head);
    }
    loadStyleString("body{background-color:red}");
</script>

《JAVASCRIPT高级程序设计》节点层次和DOM操作技术的更多相关文章

  1. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  2. 《JavaScript高级程序设计》笔记：DOM（十）

    Node类型 nodeType以下是一些重要的nodeType的取值:1: 元素element2: 属性attr3: 文本text8: 注释comments9: 文档document nodeName ...

  3. 读书时间《JavaScript高级程序设计》五：DOM

    DOM(文档对象模型)是针对HTML文档的一个API,描绘了一个层次化的节点树,可以添加.移除.修改页面的某一部分. 一个简单的文档结构 <!DOCTYPE html> <html& ...

  4. 《JavaScript高级程序设计》笔记：DOM扩展（十一）

    选择符API querySelector()方法 // 取得body元素 var tbody = document.querySelector('body'); // 取得ID为"myDIV ...

  5. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  6. 《JavaScript高级程序设计》读书笔记--前言

    起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...

  7. 读书笔记(05) - 事件 - JavaScript高级程序设计

    HTML依托于JavaScript来实现用户与WEB网页之间的动态交互,接收用户操作并做出相应的反馈,而事件在此间则充当桥梁的重要角色. 日常开发中,经常会为某个元素绑定一个事件,编写相应的业务逻辑, ...

  8. 读书笔记(03) - 性能 - JavaScript高级程序设计

    作用域链查找 作用域链的查找是逐层向上查找.查找的层次越多,速度越慢.随着硬件性能的提升和浏览器引擎的优化,这个慢我们基本可以忽略. 除了层级查找损耗的问题,变量的修改应只在局部环境进行,尽量避免在局 ...

  9. javascript高级程序设计阅读笔记（一）

    javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...

随机推荐

  1. Cocos2dx 3.1.1 学习笔记整理(3)：逐帧动画

    以下代码是在cocos中使用,plist+png 还有SpriteBatchNode播放动画的代码,备份一下,以防git被墙: bool GameMain::init() { if( !Layer:: ...

  2. android测试之——mokeyrunner上（二）

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...

  3. Spring自学教程-IOC、DI、AOP(二)

    一.spring的IOC-就是怎样使用spring来创建对象 二.springDI(依赖注入)-就是怎样给属性赋值 通过set方式赋值 以下我们只需要记住两点的赋值,基本类型和引用类型的赋值 基本类型 ...

  4. php上传zip文件在线解压文件在指定目录下，CI框架版本

    我从网上找的文件php在线解压zip压缩文件 文件为jy.php可以直接执行,但是怎样将其加到CI框架中呢?? jy.php文件 <?php header("content-Type: ...

  5. LPC1788的ADC和DAC使用

    #ifndef __ADC1_H_ #define __ADC1_H_ #include "common.h" #include "delay.h" void ...

  6. ucos任务控制块详解

    Ucos实现多任务的基础包括几个方面:任务控制块,任务堆栈,中断,任务优先级,一一说起 首先,任务控制块的结构如下 //系统在运行一个任务的时候,按照任务的优先级获取任务控制块,再在任务堆栈中获得任务 ...

  7. 菊花加载第三方--MBprogressHUD

    上次说到了网络请求AFN,那么我们在网络请求的时候,等待期间,为了让用户不认为是卡死或程序出错,一般都会放一个菊花加载,系统有一个菊花加载类叫UIProgressHUD.但是我今天要说的是一个替代它的 ...

  8. C# Expression表达式笔记

    整理了一下表达式树的一些东西,入门足够了 先从ConstantExpression 开始一步一步的来吧  它表示具有常量值的表达式 我们选建一个控制台应用程序 ConstantExpression _ ...

  9. Java编译时出现No enclosing instance of type XXX is accessible.

    今天在编译Java程序的时候出现以下错误: No enclosing instance of type Main is accessible. Must qualify the allocation ...

  10. 安卓 SQLite error：SQLite database locked exception while compling : PRAGMA journal_mode .....

    项目中频繁的切换Tab键,会频繁地从数据库读取数据,这是报出这样的错误: 解决方法是在国外的某论坛找到的 : 在插入数据的时候,首先: SQLiteDatabase db = SQLiteDataba ...