Dom基础《javascript高级程序设计》阅读笔记

最新推荐文章于 2025-07-08 09:38:52 发布

weixin_33701294

最新推荐文章于 2025-07-08 09:38:52 发布

阅读量94

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rason2008/archive/2011/10/07/2200713.html

分享JavaScript基础知识、操作节点方法、文档类型与元素类型等重要内容，包括Node类型、节点关系、操作节点方法、Document类型及Element类型等内容，以及如何在文档中查找元素、特殊集合和文档写入方法。提供详细解释和示例，旨在帮助新手快速掌握JavaScript。

学习javascript也将近两个星期了，为了更快更好地掌握这门知识，我决定从今天开始坚持写博客与各位大牛学习交流，希望大家多多指教我这个菜鸟。这是我的第一篇阅读笔记，基本上就是记录书上一些重要的基础知识点，花了自己很长的时间来敲进去，所以希望各位读者转载的话请注明出处。

1，常用Node类型：Node.ELEMENT_NODE(1)

　　　　　　　　　Node.ATTRIBUTE_NODE(2)

　　　　　　　　　Node.TEXT_NODE(3)

　　　　　　　　　Node.DOCUMENT_NODE(9)

　　对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值始终是null

2.节点关系，如下图：

　　hasChildNodes()这个方法在节点包含一个或多个子节点的情况下返回true；ownerDocument属性指向整个文档的文档节点

3，操作节点

　　appendChild()方法用于向childNodes列表的末尾添加一个节点，并返回新增的节点；如果新增的节点已经是文档的一部分，那结果就是将该节点从原来的位置转移到新位置。

　　insertBefore()方法接受两个参数：要插入的节点和作为参考的节点；被插入的节点会变成参照节点的前一个同胞节点（previousSibling），同时被方法返回。

　　replaceChild()方法接受两个参数：要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中删除，同时由要插入的节点占据其位置。

　　removeChild（）方法接受一个参数，即要删除的节点，被删除的节点将成为方法的返回值。

　　注：replaceChild()和removeChild（）方法一样，被移除的节点仍然为文档所有，只不过在文档中已经没有了自己的位置

　　前面四个方法必需先取得父节点（使用parentNode属性）

4，其它方法

　　cloneNode()方法用于创建调用这个方法的节点的一个完全相同的副本，该方法接受一个布尔值参数；true为深复制，也就是复制节点及其整个子节点树，false只复制该节点。

　　normalize()方法用来处理文本节点，文本节点不包含文本或者连接出现两个文本节点的情况。

5.Document类型

　　Document类型表示文档，在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。而且，document对象是window对象的一个属性，因此可以将其作为全局对象来访问。

　　文档的子节点：

　　document.documentElement,document.childNode[0],document.firstChild都指向<html>元素

　　document.body指向<body>元素，document.title可以取得<title>元素中的文本

　　document.URL取得的是地址栏中显示的URL,domain属性中只包含页面的域名，documnet.referrer取得来源页面的URL，三个属性中只有domain可以设置。

　　查找元素：

　　documnet.getElementById(),接受一个ID参数，如果不存在返回null；如果页面中多个元素ID相同只返回第一次出现的元素；

　　document.getElementsByTagName(),接受一个标签名的参数，返回的是包含零个或多个元素的NodeList，在HTML中返回一个HTMLCollection对象；与NodeList相似，可以使用方括号语法或item()方法来访问HTMLCollection对象中的项，该对象还有一个nameItem()方法可以通过元素的name特性取得集合中的项。

　　document.getElementsByName()方法，只有HTMLDocument类型才有这个方法，用法顾名思义，而返回的也是一个HTMLCollection对象。

　　特殊集合：

　　document.anchors:包含文档中所有带有name特性的<a>元素；

　　document.forms:包含文档中所有的<form>元素；

　　document.images:包含文档中所有的<img>元素；

　　document.links:包含文档中所有带href特性的<a>元素。

　　文档写入：

　　这个能力体现在四个方法：write(),writeln(),open(),close();

　　write(),writeln()可以用来动态地包含外部资源，如下列：

　　document.write("<script type=\"text/javascript\" src=\"file.js\">"+"</scr"+"ipt>" );

6,Element类型

　　取得属性：

　　操作特性的DOM方法主要有三个：getAttribute(),setAttribute(),removeAttribute()

　　有两类特殊的特性需要注意：第一类是style，在通过getAttribute()访问时，返回的是包含的CSS文本，而通过属性来访问它则返回一个对象；第二类是onclick这样的时间处理程序，当通过getAttribute()访问会返回响应的代码字符串，而通过onclick属性访问时会返回一个javascript函数。

　　attributes属性：

　　Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap,元素的每一个特性都由一个attr节点表示，每个节点都保存在NamedNodeMap对象中。NamedNodeMap拥有一下方法：

　　getNamedItem(name):返回nodeName属性等于name的节点；

　　removeNamedItem(name)：从列表中已出nodeName属性等于name的节点；

　　setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引；

　　item(pos)：返回位于数字pos位置处的节点。

　　attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。每个特性节点都有一个名为specified的属性，这个属性的值如果为true，则意味这要么是在HTML中指定了相应的特性，要么是同时setAttribute()方法设置了该特性。

　　创建元素：

　　document.createElement()方法可以创建新元素，这个方法只接受一个参数，即要创建元素的标签名。

7，Text类型

　　文本节点由Text类型表示，包含的是可以照字面解析的纯文本内容。纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。可以通过nodeValue和data属性访问Text节点中包含的文本。

　　使用下列方法可以操作节点中的文本：

　　appendData(text):

　　deleteData(offset,count):

　　insertData(offset,text):

　　replaceData(offset,count,text):

　　splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点

　　substringData(offset,count):

　　除了这些方法外，文本节点还有一个length属性，保存着节点中字符的数目。