《JAVASCRIPT高级程序设计》节点层次和DOM操作技术
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操作技术的更多相关文章
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
- 《JavaScript高级程序设计》笔记：DOM（十）
Node类型 nodeType以下是一些重要的nodeType的取值:1: 元素element2: 属性attr3: 文本text8: 注释comments9: 文档document nodeName ...
- 读书时间《JavaScript高级程序设计》五：DOM
DOM(文档对象模型)是针对HTML文档的一个API,描绘了一个层次化的节点树,可以添加.移除.修改页面的某一部分. 一个简单的文档结构 <!DOCTYPE html> <html& ...
- 《JavaScript高级程序设计》笔记：DOM扩展（十一）
选择符API querySelector()方法 // 取得body元素 var tbody = document.querySelector('body'); // 取得ID为"myDIV ...
- 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 《JavaScript高级程序设计》读书笔记--前言
起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...
- 读书笔记(05) - 事件 - JavaScript高级程序设计
HTML依托于JavaScript来实现用户与WEB网页之间的动态交互,接收用户操作并做出相应的反馈,而事件在此间则充当桥梁的重要角色. 日常开发中,经常会为某个元素绑定一个事件,编写相应的业务逻辑, ...
- 读书笔记(03) - 性能 - JavaScript高级程序设计
作用域链查找 作用域链的查找是逐层向上查找.查找的层次越多,速度越慢.随着硬件性能的提升和浏览器引擎的优化,这个慢我们基本可以忽略. 除了层级查找损耗的问题,变量的修改应只在局部环境进行,尽量避免在局 ...
- javascript高级程序设计阅读笔记（一）
javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...
随机推荐
- Python正则表达式学习笔记
[] 字符类,只要匹配里面的任意字符,都算匹配 . 元字符,可以匹配除换行符之外的所有字符 大小写敏感,但是可以关闭 \d 可以匹配0-9中的任意数字 {3}大括号里面的数字,边上前面一个字符匹配的 ...
- 7 -- Spring的基本用法 -- 11...
7.11 基于XML Schema的简化配置方式 Spring允许使用基于XML Schema的配置方式来简化Spring配置文件. 7.11.1 使用p:命名空间简化配置 p:命名空间不需要特定的S ...
- JBPM4.4 基本使用
JBPM工作流环境搭建: 1.先下载JBPM框架 2.安装JBPM图形编辑插件 注:插件在jbpm-4.4\install\src\gpd 目录下 创建工程导入JBPM依赖jar包 注:jar包目录j ...
- RSA实践指南
创建时间:2005-03-02 文章属性:原创 文章提交:watercloud (watercloud_at_xfocus.org) RSA算法基础->实践 讲讲自己学习RSA中的实践过程,已经 ...
- svn第一篇----入门指南
摘要:trunk存放的是主代码,不修改,branch,tag,milestone均是从trunk中衍生的.branch复制trunk中代码用于开发,tag用于存放比较重要的发行版,存放release版 ...
- OPENCV形态学操作1
形态学操作是指基于形状的一系列图像处理操作,包括膨胀,腐蚀,二值化,开运算,闭运算,顶帽算法,黑帽算法,形态学梯度等,最基本的形态学操作就是膨胀和腐蚀. 一.膨胀 首先需要明确一个概念,膨胀和腐蚀都是 ...
- COM问题
因为应用程序正在发送一个输入同步呼叫,所以无法执行传出的呼叫.
- Go的pprof使用
go中有pprof包来做代码的性能监控,在两个地方有包: net/http/pprof runtime/pprof 其实net/http/pprof中只是使用runtime/pprof包来进行封装了一 ...
- eclipse快速定位java对应的class
当前设置值,只能定位class文件 设置eclipse External Tools Configurations... Program --> new New 创建viewclass.bat文 ...
- iPhone Info.plist属性说明
1.) <key>BadgeStyle</key> 设置这个属性就是修改通知标记 出现在未接电话短信邮件的那个小数字 可以改变字体 颜色 位置等 2.) <key> ...