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 ...