一、理解包含不同层次节点的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高级程序设计:第十章的更多相关文章

  1. 《JavaScript高级程序设计(第3版)》笔记-序

    很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...

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

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

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

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

  4. 读javascript高级程序设计00-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

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

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

  6. 阅读摘录《javascript 高级程序设计》01

    前言: 因为工作需要,所以开始主攻前台JS方面的技术.在以前的工作中,使用过这门脚本语言.但是都是比较凌乱的,用到什么学什么,只是为了实现业务,而去使用. 不会考虑到代码优化,封装对象等.今次特意借了 ...

  7. 《JavaScript高级程序设计》学习笔记(5)——面向对象编程

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...

  8. 《JavaScript高级程序设计》学习笔记(4)——引用类型

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第五章内容. 在ECMAScript中, ...

  9. 《JavaScript高级程序设计》学习笔记(3)——变量、作用域和内存问题

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第四章内容. 1.函数:通过函数可以封装 ...

  10. 1 《JavaScript高级程序设计》学习笔记(1)

    欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 首先,我将从<JavaScript高级程序设计>这本JavaScript学习者必看的经典教 ...

随机推荐

  1. selenium grid的使用与配置

    一.selenium grid的组成与作用:由一个集线器hub和多个客户机node组成,如果你的程序需要在不用的浏览器,不同的操作系统上测试,而且比较多的case需要多线程远程执行,那么一个比较好的测 ...

  2. Hibernate5--课程笔记5

    关联关系映射: 关联关系,是使用最多的一种关系,非常重要.在内存中反映为实体关系,映射到DB中为主外键关系.实体间的关联,即对外键的维护.关联关系的发生,即对外键数据的改变. 外键:外面的主键,即,使 ...

  3. zTree模糊查询人员姓名:getNodesByParamFuzzy

    以前使用zTree,不知道有getNodesByParamFuzzy这个模糊查询的方法,所以用了比较笨的方法,比如:功能要求(模糊查询人员姓名),先获得用户输入的名称,然后到数据库或者缓存中去查找,然 ...

  4. openstack私有云布署实践【4.2 上层代理haproxy+nginx配置 (办公网测试环境)】

    续上一节说明 一开始我也是使用haproxy来做的,但后来方式改了,是因为物理机controller的高配置有些浪费,我需要1组高可用的上层nginx代理服务器来实现其它域名80代理访问,很多办公网测 ...

  5. 第四章 android 命名规范和编码规范

    书里面讲的比较常见,单个人也是有不同的观点: 因为android绝大部分使用java开发的,因此java相关规范适用于android: Google Style: 英文地址:http://google ...

  6. js--性能优化(转)

    前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己 ...

  7. 为什么PHP(CLI)同一个错误信息会打印两次?

    第一个信息是display_errors输出的,在fpm环境下输出到浏览器那里,而在CLI环境下会打印到屏幕上. display_errors = On 第二个信息是log_errors输出的. lo ...

  8. input、button、a标签 等定义的按钮尺寸的兼容性问题

    在项目中有遇到这类问题,搜索了一下解决方式,采用链接:https://segmentfault.com/q/1010000000190931 里各位楼主的答案,摘抄如下: 例子如下: HTML: &l ...

  9. 浙大pat 1037

    1037. Magic Coupon (25) 时间限制 100 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The magi ...

  10. Java线程--interrupt join yield setDaemon常用方法的使用

    概念: 操作系统可以有多个进程,一个线程可以有一个或多个线程.进程与进程之间不共享内存,都在各自的空间中运行.而线程不仅可以共享内存,还可以用有一个自己的内存空间,叫做线程栈. 线程又称轻量级进程.J ...