JavaScript高级程序设计：第十章
一、理解包含不同层次节点的DOM
1.节点层次
以下面的HTML为例：
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
可以将这个简单的HTML文档表示为一个层次结构。
文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点<html>元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他元素都包含在文档元素中。
（1）Node类型
DOM1级定义了一个Node接口，该接口将有DOM中的所有节点类型实现。这个Node接口在javascript中是作为Node类型实现的。每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一：
Node.ELEMENT_NODE(1) ;
Node.ATTRIBUTE_NODE(2) ;
Node.TEXT_NODE(3) ;
Node.CDATA_SECTION_NODE(4) ;
Node.ENTITY_REFERENCE_NODE(5) ;
Node.ENTITY_NODE(6) ;
Node.PROCESSING_INSTRUCTION_NODE(7) ;
Node.COMMENT_NODE(8) ;
Node.DOCUMENT_NODE(9) ;
Node.DOCUMENT_TYPE_NODE(10) ;
Node.DOCUMENT_FRAGMENT_NODE(11) ;
Node.NOTATION_NODE(12)
①要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。对于元素节点，nodeName中保存的始终都是元素的签名，而nodeValue的值则始终为null。
②节点关系
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList对象是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
③操作节点
操作节点最常使用的方法就是appendChild（）。
④其他方法
有两个方法是所有类型的节点都有的。第一个就是cloneNode（），用于创建调用这个方法的节点的一个完全相同的副本。第二个是normalize（）方法。这个方法唯一的用处就是处理文档树中的文本节点。
二、Document类型
document节点具有以下特征：
nodeType的值为9；
nodeName的值为“#document”；
nodeValue的值为null；
parentNode的值为null；
ownerDocument的值为null；
其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、ProcessingInstruction或Comment。
1.文档的子节点
DOM有两个内置的访问其子节点的快捷方式。第一个是documentElement属性，该属性始终指向HTML页面中的<html>元素。另一个就是通过childNodes列表访问文档元素，但通过documentElement属性则能更快捷、更直接地访问该元素。
2.文档信息
document对象有一些标准的Document对象所没有的属性。第一个就是title。包含着<title>元素中的文本——显示在浏览器窗口的标题栏或标签页上。
接下来介绍的3个属性都与对网页的请求有关，它们是URL、domain和referrer。URL属性中包含页面完整的URL，domain属性中只包含页面的域名，而referrer属性中则保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下，referrer属性中可能会包含空字符串。
URL与domain属性是互相关联的。
例如，如果document.URL等于http：//www.wrox.com/WileyCDA/，那么document.domain就等于www.wrox.com。
在这三个属性中，只有domain是可以设置的。
3.查找元素
取得元素的操作可以用document对象的几个方法来完成。其中Document类型为此提供了两个方法：getElementById（）和getElementsByTagName（）。
第一个方法接收一个参数：要取得的元素ID。这里的ID必须与页面中元素的id严格匹配。例如：
<div id = “myDiv”>Some text </div>
可以使用下面代码取得这个元素：
var div = document.getElementById（”myDiv”）；
第二个方法接受一参数：要取得的元素的标签名，返回的是包含零或多个元素的NodeList。例如，下面代码会取得页面中所有的<img>元素，并返回一个HTMLCollection。
var images = document.getElementsByTagName（”img”）；
第三个方法，只有HTMLDocument类型才有的方法，是getElementByName（）。这个方法会返回带有给定name特性的所有元素。最常用getElementsByName（）方法的情况是取得单选按钮。
4.特殊集合
除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTMLCollection对象：
document.anchors，包含文档中所有带name特性的<a>元素
document.applets，包含文档中所有<applet>元素，因为不再推荐使用<applet>元素因此这个集合不再建议使用。
document.forms，包含文档中所有的<form>元素，与document.getElementByTagName（”form”）得到的结果相同。
document.images，包含文档中所有的<img>元素，与document.getElementsByTagName（”img”）得到的结果相同。
document.links，包含文档中所有带href特性的<a>元素。
5.DOM一致性检测
document.implementation属性可以用来检测浏览器实现了哪些部分。这个方法接收两个参数：要检测的DOM功能的名称及版本号。
6.文档写入
有一个document对象的功能已经存在很多年了，那就是将输出流写入到网页中的能力。这个能力体系在以下4个方法中：write（）、writeln（）、open（）、close（）。其中，write（）和writeln（）都接受一个字符串参数，即要写入到输出流中的文本。write（）会原样写入。而writeln（）会在字符串的末尾添加一个换行符（\n）。
三、Element类型
Element类型用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。Element节点具有以下特征：
nodeType的值为1；
nodeName的值为元素的标签名；
nodeValue的值为null；
parentNode可能是Document或Element；
其子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；这两个属性会返回相同的值。
1.html元素
所有的HTML元素都由HTMLElement类型或其子类型表示。每个HTML元素中都存在下列标准特性：
id，元素在文档中的唯一标识符。
title，有关元素的附加说明信息，一般通过工具提示条显示出来。
lang，元素内容的语言代码，很少使用。
dir，语言的方向。值为”ltr”（left-to-right，从左至右）或”rtl”（right-to-left，从右至左），也很少使用。
className，与元素的class特性相对应，即为元素指定的CSS类。
2.取得特性
每个元素都由一个或多个特新，这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有三个，分别是getAttribute（）、setAttribute（）和removeAttribute（）。
3.设置特性
与getAttribute（）对应的方法是setAttribute（），这个方法接收两个参数：要设置的特性名和值。如果特性已经存在，setAttribute（）会以指定的值替换现有的值；如果特性不存在，setAttribute（）则创建该属性并设置相应的值。
4.attributes属性
Element类型是使用attribute属性的唯一一个DOM节点类型。attribute属性中包含一个NamedNodeMap，与NodeList类似，也是一个”动态”的集合。元素的每一个特性都由一个attr节点表示，每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法：
getNamedItem(name)：返回nodeName属性等于name的节点；
removeNamedItem(name)：从列表中移除nodeName属性等于name的节点；
setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引；
item(pos)：返回位于数字pos位置处的节点。
5.创建元素
使用document.createElement（）方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。不区分大小写。例如，使用下面的代码可以创建一个<div>元素。
var div = document.createElement（”div”）；
6.元素的子节点
元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点。
四、Text类型
本节点由Text类型表示，包含的是可以照字面解释的纯文本内容。
1.创建文本节点
可以使用document.createTextNode（）创建新文本节点，这个方法接受一个参数——要插入节点中的文本。例如下面代码：
var element = document.createElement（”div”）;
element.className = “message” ;
var textNode = document.createTextNode（”Hello world!”）;
element.appendChild（textNode）;
document.body.appendChild（element）;
这个例子创建了一个新<div>元素并为它指定了值为”message”的class特性。然后又创建了一个文本节点，并将其添加到前面创建的元素中。最后一步，就是将这个元素添加到了文档的<body>元素中，这样就可以在浏览器中看到新创建的元素和文本节点了。
2.规范化文本节点
normalize()方法能够将相邻文本节点合并。如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。
3.分割文本节点
Text类型提供了一个作用于normalize()相反的方法：splitText()。这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。
五、Comment类型
Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。与Text类型相似，也可以通过nodeValue或data属性来取得注释的内容。Comment类型节点具有以下特征：
nodeType的值为8；
nodeName的值为”#comment”；
nodeValue的值是注释的内容；
parentNode可能是Document或Element；
不支持子节点。
六、CDATASection类型
CDATASection类型只针对基于XML的文档，表示的是CDATA区域。与Comment类型类似，因此拥有除splitText()之外的所有字符串操作方法。CDATASection类型节点具有以下特征：
nodeType的值为4；
nodeName的值为”#cdata-section”；
nodeValue的值是CDATA区域中的内容；
parentNode可能是Document或Element；
不支持子节点。
七、DocumentType类型
DocumentType类型具有以下特征：
nodeType的值为10；
nodeName的值为doctype的名称；
nodeValue的值为null；
parentNode是Document；
不支持子节点。
八、DocumentFragment类型
DocumentFragment类型节点具有以下特征：
nodeType的值为11；
nodeName的值为”#document-fragment”;
nodeValue的值为null；
parentNode的值为null；
子节点可以是：Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference。
九、Attr类型
nodeType的值为2；
nodeName的值是特性的名称；
nodeValue的值是特性的值；
parentNode的值为null；
在HTML中不支持子节点；
在XML中子节点可以是Text或EntityReference。
Attr对象有3个属性：name、value和specified。其中，name是特性名称，value是特性的值，specified是一个布尔值，用以区别特性是在代码中指定的还是默认的。
十、DOM操作技术
1.动态脚本
创建动态脚本有两种方法：插入外部文件和直接插入javascript代码。
动态加载的外部javascript文件能够立即运行，比如下面的<script>元素：
<script type = “text/javascript” src=“client.js”></script>
2.动态样式
所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的。需要注意的是，必须将<link>元素添加到<head>而不是<body>元素，才能保证在所有浏览器中的行为一致。
加载外部样式文件的过程是异步的，也就是加载样式与执行javascript代码的过程没有固定的次序。
3.操作表格
使用核心DOM方法创建表格代码如下：
//创建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1 , 1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2 , 1"));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 2 , 1"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2 , 2"));
//将表格添加到文档主体中
document.body.appendChild(table);
JavaScript高级程序设计：第十章的更多相关文章
- 《JavaScript高级程序设计（第3版）》笔记-序
很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...
- 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介
前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...
- 【javascript学习——《javascript高级程序设计》笔记】DOM操作
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...
- 读javascript高级程序设计00-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...
- 《JavaScript高级程序设计》读书笔记--前言
起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...
- 阅读摘录《javascript 高级程序设计》01
前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...
- 《JavaScript高级程序设计》学习笔记(5)——面向对象编程
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...
- 《JavaScript高级程序设计》学习笔记(4)——引用类型
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...
- 《JavaScript高级程序设计》学习笔记(3)——变量、作用域和内存问题
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第四章内容. 1.函数:通过函数可以封装 ...
- 1 《JavaScript高级程序设计》学习笔记(1)
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 首先,我将从<JavaScript高级程序设计>这本JavaScript学习者必看的经典教 ...
随机推荐
- selenium grid的使用与配置
一.selenium grid的组成与作用:由一个集线器hub和多个客户机node组成,如果你的程序需要在不用的浏览器,不同的操作系统上测试,而且比较多的case需要多线程远程执行,那么一个比较好的测 ...
- Hibernate5--课程笔记5
关联关系映射: 关联关系,是使用最多的一种关系,非常重要.在内存中反映为实体关系,映射到DB中为主外键关系.实体间的关联,即对外键的维护.关联关系的发生,即对外键数据的改变. 外键:外面的主键,即,使 ...
- zTree模糊查询人员姓名：getNodesByParamFuzzy
以前使用zTree,不知道有getNodesByParamFuzzy这个模糊查询的方法,所以用了比较笨的方法,比如:功能要求(模糊查询人员姓名),先获得用户输入的名称,然后到数据库或者缓存中去查找,然 ...
- openstack私有云布署实践【4.2 上层代理haproxy+nginx配置 (办公网测试环境)】
续上一节说明 一开始我也是使用haproxy来做的,但后来方式改了,是因为物理机controller的高配置有些浪费,我需要1组高可用的上层nginx代理服务器来实现其它域名80代理访问,很多办公网测 ...
- 第四章 android 命名规范和编码规范
书里面讲的比较常见,单个人也是有不同的观点: 因为android绝大部分使用java开发的,因此java相关规范适用于android: Google Style: 英文地址:http://google ...
- js--性能优化（转）
前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己 ...
- 为什么PHP（CLI）同一个错误信息会打印两次？
第一个信息是display_errors输出的,在fpm环境下输出到浏览器那里,而在CLI环境下会打印到屏幕上. display_errors = On 第二个信息是log_errors输出的. lo ...
- input、button、a标签 等定义的按钮尺寸的兼容性问题
在项目中有遇到这类问题,搜索了一下解决方式,采用链接:https://segmentfault.com/q/1010000000190931 里各位楼主的答案,摘抄如下: 例子如下: HTML: &l ...
- 浙大pat 1037
1037. Magic Coupon (25) 时间限制 100 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The magi ...
- Java线程--interrupt join yield setDaemon常用方法的使用
概念: 操作系统可以有多个进程,一个线程可以有一个或多个线程.进程与进程之间不共享内存,都在各自的空间中运行.而线程不仅可以共享内存,还可以用有一个自己的内存空间,叫做线程栈. 线程又称轻量级进程.J ...