学习JavaScript——DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

Node类型

DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现。JavaScript中的所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性,用于表明节点的类型。一共有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)。

通过比较上面这些常量,可以很容易地确定节点的类型,例如:

1
2
3
if (someNode.nodeType == Node.ELEMENT_NODE) { //在 IE 中无效
alert("Node is an element.");
}

然而,由于IE没有公开Node类型的构造函数,因此上面的代码在IE中会导致错误。为了确保跨浏览器兼容,最好还是将nodeType属性与数字值进行比较:

1
2
3
if (someNode.nodeType == 1) { //适用于所有浏览器
alert("Node is an element.");
}

节点关系

操作节点

  • appendChild():向childNodes列表的末尾添加一个节点。添加节点后,childNodes的新增节点,父节点及以前的最后一个子节点的关系指针都会相应地得到更新。更新完成后,appendChild()返回新增的节点。

    如果传入到appendChild()中的节点已经是文档的一部分了,那结果就是将该节点从原来的位置转移到新位置。即使可以将DOM树看成是由一系列指针连接起来的,但任何DOM节点也不能同时出现在文档中的多个位置上。

  • insertBefore():接受两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点会变成参照节点的前一个同胞节点(previousSibling),同时被方法返回。如果参照节点是null,则insertBefore()appendChild()执行相同的操作。

也就是说:新的节点会被插入到第二个参数节点之前。

  • replaceChild():接受两个参数:要插入的节点和要替换的节点。
  • removeChild():接受一个参数,即要移除的节点。被移除的节点将成为方法的返回值。

与使用 replaceChild()方法一样,通过 removeChild()移除的节点仍然为文档所有,只不过在
文档中已经没有了自己的位置。

  • cloneNode():用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔值参数,表示是否执行深复制。在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点树;在参数为false的情况下,执行浅复制,即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。
  • normalize():如果找到了空文本节点,则删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点。(实验过程中,没有明显的效果)

Document类型

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

文档的子节点

  • documentElement:该属性始终指向 HTML 页面中的<html>元素。
  • 通过childNodes列表访问文档元素。
  • body:直接指向元素。
1
var body = document.body; //取得对`<body>`的引用

所有浏览器都支持document.documentElementdocument.body属性。

  • DocumentType:通常将<!DOCTYPE>标签看成一个与文档其他部分不同的实体,可以通过doctype属性(在浏览器中是document.doctype)来访问它的信息。(浏览器对其的支持不一致,所以该属性的用处很有限)。

文档信息

  • title

    1
    2
    3
    4
    //取得文档标题
    var originalTitle = document.title;
    //设置文档标题
    document.title = "New page title";
  • URLdomainreferrerURL属性中包含页面完整的URL(即地址栏中显示的URL),domain 属性中只包含页面的域名,而referrer属性中则保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下,referrer属性中可能会包含空字符串。

    1
    2
    3
    4
    5
    6
    //取得完整的 URL
    var url = document.URL;
    //取得域名
    var domain = document.domain;
    //取得来源页面的 URL
    var referrer = document.referrer;

在这3个属性中,只有domain是可以设置的。但由于安全方面的限制,也并非可以给domain设置任何值。如果URL中包含一个子域名,例如 p2p.wrox.com,那么就只能将domain设置为”wrox.com”(URL中包含”www”,如 www.wrox.com 时,也是如此)。不能将这个属性设置为URL中不包含的域。
浏览器对domain属性还有一个限制,即如果域名一开始是“松散的”(loose),那么不能将它再设置为“紧绷的”(tight)。换句话说,在将document.domain设置为”wrox.com”之后,就不能再将其设置回”p2p.wrox.com”,否则将会导致错误,

查找元素

  • getElementById()

getElementById()只返回文档中第一次出现的元素

  • getElementsByTagName()
  • getElementsByName()
  • ···

特殊集合

  • document.anchors,包含文档中所有带name特性的<a>元素;
  • document.applets,包含文档中所有的<applet>元素,因为不再推荐使用<applet>元素,所以这个集合已经不建议使用了;
  • document.forms,包含文档中所有的<form>元素,与document.getElementsByTagName("form")得到的结果相同;
  • document.images,包含文档中所有的<img>元素,与document.getElementsByTagName("img")得到的结果相同;
  • document.links,包含文档中所有带href特性的<a>元素。

Element类型

Element类型用于表现XMLHTML元素,提供了对元素标签名、子节点及特性的访问。

HTML 元素

所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型来表示。HTMLElement类型直接继承自Element并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性。

  • id,元素在文档中的唯一标识符。
  • title,有关元素的附加说明信息,一般通过工具提示条显示出来。
  • lang,元素内容的语言代码,很少使用。
  • dir,语言的方向,值为”ltr”(left-to-right,从左至右)或”rtl”(right-to-left,从右至左) ,也很少使用。
  • className,与元素的class特性对应,即为元素指定的CSS类。没有将这个属性命名为class,是因为classECMAScript的保留字。

取得特性

  • getAttribute()
  • setAttribute()
  • removeAttribute()

attributes 属性

Element类型是使用attributes属性的唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap,与NodeList类似,也是一个“动态”的集合。元素的每一个特性都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有下列方法:

  • getNamedItem(name):返回nodeName属性等于name的节点;
  • removeNamedItem(name):从列表中移除nodeName属性等于name的节点;
  • setNamedItem(node):向列表中添加节点,以节点的nodeName属性为索引;
  • item(pos):返回位于数字pos位置处的节点。
    1
    2
    3
    4
    5
    6
    var id = element.attributes.getNamedItem("id").nodeValue;
    var id = element.attributes["id"].nodeValue;
    element.attributes["id"].nodeValue = "someOtherId";
    var oldAttr = element.attributes.removeNamedItem("id");
    var oldAttr = element.attributes.removeNamedItem("id");
    ···

创建元素

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

1
var div = document.createElement("div");

Text类型

可以通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本。
使用下列方法可以操作节点中的文本:

  • appendData(text):将text添加到节点的末尾。
  • deleteData(offset, count):从offset指定的位置开始删除count个字符。
  • insertData(offset, text):在offset指定的位置插入text
  • replaceData(offset, count, text):用text替换从offset指定的位置开始到offset+count为止处的文本。
  • splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点。
  • substringData(offset, count):提取从offset指定的位置开始到offset+count为止处的字符串。

创建

document.createTextNode():这个方法接受一个参数——要插入节点中的文本。

Comment类型

注释类型节点

0%