【十】DOM（一）

最新推荐文章于 2025-03-30 01:42:51 发布

博勋

最新推荐文章于 2025-03-30 01:42:51 发布

阅读量296

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript高级程序设计

本文链接：https://blog.youkuaiyun.com/qq_31280709/article/details/52456411

javascript高级程序设计专栏收录该内容

10 篇文章

订阅专栏

本文介绍DOM中各种节点类型及其属性和方法，包括Node、Document、Element、Text和DocumentFragment等，并详细讲解如何使用JavaScript进行DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.Node类型

DOM定义了Node接口，由DOM中所有节点类型实现。JS中的所有节点类型都继承自Node类型，因此所有节点类型共享基本的属性和方法。

nodeType属性：每个节点都有一个nodeType属性，用于表明节点的类型。12种，如下：最常用的是元素和文本节点

元素节点            　　     Node.ELEMENT_NODE(1)
属性节点            　　     Node.ATTRIBUTE_NODE(2)
文本节点            　　     Node.TEXT_NODE(3)
CDATA节点                   Node.CDATA_SECTION_NODE(4)
实体引用名称节点    　        Node.ENTRY_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)
DTD声明节点                 Node.NOTATION_NODE(12)

nodeName和nodeValue属性：了解节点的具体信息。对于元素节点nodeName保存元素的标签名，nodeValue的值为null

节点关系：1.每个节点有一个childNodes属性，其中保存一个NodeList对象，这是一种类数组对象（但不是Array的实例），用于保存一组有序节点。它是基于DOM结构动态执行查询的结果，dom结构的变化能自动反映在此对象中。

访问NodeList中节点的方法：方括号语法和item()方法。如someNode.childNodes[0]或someNode.childNode.item(0)。childNodes中的每个节点相互之间是同胞节点，通过previousSibling和nextSibling来访问其他节点。hasChildNodes()方法，在节点包含一个及以上的子节点时返回true。2.每个节点都有parentNode属性，指向文档树的父节点。父节点的firstChild和lastChild的属性分别指向childNodes的第一个和最后一个节点。

操作节点：appendChild()：向childNodes列表的末尾添加一个节点，返回新增的节点。如果传入到appendChild()中的节点已经是文档的一部分，则将节点从原位置转移到新位置。

insertBefore()：添加节点到特定的位置，接收两个参数，要插入的节点和作为参照的节点，被插入的节点会成为参照节点的前一个同胞节点。若参照节点为null则等同于appendChild。

replaceChild()：替换节点，接收两个参数，要插入的节点和要替换的节点。

removeChild()：移除节点，返回被移除的节点。

注：以上方法是操作子节点的，必须先取得父节点。还有一些其他操作方法，是所有类型的节点都有的：

cloneNode()：创建调用这个方法的节点的一个完全相同的副本。接收一个布尔值参数，true表示执行深复制，复制节点及整个子节点树；false浅复制，只复制节点本身。复制后返回的节点副本属于文档所有但是未指明父节点，因此算孤立节点，除非通过appendChild()添加到文档中。注：此方法不会复制添加到DOM节点中的js属性如事件处理程序等。

normalize()：处理文档树中的文本节点。

二.Document类型

js通过Document类型表示文档，在浏览器中document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。

文档的子节点：documentElement属性：始终指向html页面的<html>元素；body属性：直接指向<body>元素，document.body；doctype属性：指向<!doctype>标签

文档信息：title属性：指向<title>。接下来的三个属性与对网页的请求有关，所有这些信息都存在于请求的http头部，通过js的这些属性访问：

URL属性：包含完整url；

domains属性：只包含域名；

referrer属性：保存连接到当前页面的那个页面的url；

查找元素：getElementById()：参数大小写严格匹配，找不到返回null。多元素ID值相同只返回第一个。

getElementsByTagName()：返回包含零个或多个元素的NodeList。在html文档中返回HTMLCollection对象，这个对象有一个方法namedItem()，可以通过元素的name特性取得集合中的项。如：<img src="***" name="myimg"> --->> var images = document.getElementsByTagName('img'); var myimg = images.namedItem("myimg");直接用方括号语法也会在后台调用这些方法，如images['myimg']

getElementsByName()：返回带有给定name特性的元素。常用的情况是取得单选按钮。

特殊集合：document.forms：包含文档中的所有<form>元素；document.images：包含所有<img>元素

文档写入：write()原样写入、wirteln()在字符串末尾添加换行。如果在文档加载结束后再调用document.write()则输出的内容会重写整个页面。

open()和close()分别用于打开和关闭网页的输出流。

三.Element类型

四.Text类型

特征：nodeType=3，nodeValue的值为节点所包含的文本，可通过nodeValue或data属性访问文本。

length属性，保存节点中字符的数目。

创建文本节点：document.createTextNode()；

规范化文本节点：一般情况下每个元素只有一个文本子节点，但也会由例外，normalize()规范文本节点，如果在一个包含两个及以上文本节点的父元素上调用此方法，则会将文本节点合并成一个节点。

分割文本节点：splitText()：原文本包含从开始到指定位置之前的内容，新文本节点包含剩下内容，返回新文本节点。这是从文本中提取数据的一种常用的DOM解析技术。

五.DocumentFragment类型

文档片段是一种轻量级的文档，可以包含和控制节点，但是不会像完整的文档那样占用额外资源。如果逐个添加元素，会导致浏览器反复渲染新信息，为避免可以先用一个文档片段保存要创建的元素，再一次性将他们添加到文档中。

创建：document.createDocumentFragment()；

六.Attr类型

元素的特性在DOM中以Attr来表示。尽管也是节点，但不认为是DOM树的一部分。Attr对象有三个属性，name，value，specified（布尔值，区别特性是在代码中指定的还是默认的）

document.createAttribute()并传入特性名称可以创建新的特性节点，setAttributeNode()方法将新创建的特性添加到元素中去：element.setAttributeNode('attr');

最常用的方法：getAttribute()；setAttribute()；removeAttribute()；不建议直接访问特性节点。

DOM操作技术

1.动态脚本

//外部文件
function loadScript(url) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild(script)
}
loadScript('example.js')
//行内方式
var script = document.createElement('script');
script.type = 'text/javascript';
var code = "function sayhi() { alert('hi'); }";
try { script.appendChild(document.createTextNode code); }
catch { script.text = code; }
document.body.appendChild(script)

2.动态样式

function loadStyle(url) {
	var link = document.createElement('link');
	link.rel = "stylesheet";
	link.type = "text/css";
	link.href = url;
	var head = document.getElementsByTagName("head")[0];
	head.appendChild(link);
}
loadStyle('example.css');