JS Dom-优快云博客

博客主要介绍了JavaScript中的节点类型，包括Node、Document、Element和Text类型。详细说明了Node类型有12种，由Node类型中定义的数值常量表示，还提及了document对象以及Element类型的示例标签。

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

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;

示列：确定节点类型

if (someNode.nodeType == Node.ELEMENT_NODE){
	alert("Node is an element.");
}

属性

属性	描述
nodeName	元素的标签名
nodeValue	代表元素类型的值(1,2,3…)
childNodes	获取当前元素的子节点
children	获取只是element类型的子节点
firstChild	获取当前元素的第一个子节点
lastChild	获取当前元素的最后一个子节点
parentNode	获取当前元素的父节点
previousSibling	获取当前元素的兄弟节点
nextSibling	下一个兄弟节点
ownerDocument	获取节点的文档结点(html中是document)
childElementCount	获取当前元素的元素节点个数
firstElementChild	获取当前元素的第一个元素节点
lastElementChild	获取当前元素的最后一个元素节点
previousElementSibling	获取当前元素的上一个同辈元素节点
nextElementSibling	获取当前元素的下一个同辈元素节点
innertText	获取或者设置当前元素的文本内容

方法

方法	描述
appendChild(newNode)	可向节点的子节点列表的末尾添加新的子节点
insertBefore(newNode,childNode)	可在当前元素已有的子节点前插入一个新的子节点
replaceChild(newnode,oldnode)	替换当前节点中指定的子节点
removeChild(node)	删除当前节点中指定的子节点
cloneNode()	用于创建调用这个方法的节点的一个完全相同的副本。在参数为true的情况下执行深复制，也就是复制节点及其整个子节点树；在参数为false 的情况下，执行浅复制，即只复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点

Document类型

document对象

属性

属性	描述
documentElement	该属性始终指向HTML页面中的<html>元素
body	该属性直接指向<body>元素
doctype	该属性指向<!DOCTYPE>
title	获取网页标题
URL	取得完整的URL
domain	取得域名
referrer	取得来源页面的URL
charset	获取文档的编码格式
activeElement	属性，这个属性始终会引用DOM 中当前获得了焦点的元素
hasFocus()	方法用于确定文档是否获得了焦点
anchors	包含文档中所有带name 特性的<a>元素
applets	包含文档中所有的<applet>元素，因为不再推荐使用<applet>元素,所以这个集合已经不建议使用了
forms	包含文档中所有的<form>元素，与document.getElementsByTagName(“form”)得到的结果相同
images	包含文档中所有的<img>元素，与document.getElementsByTagName(“img”)得到的结果相同
links	包含文档中所有带href 特性的<a>元素
body	引用文档的<body>元素的补充

方法

方法	描述
getElementById()	返回带有给定class特性的所有元素
getElementsByTagName()	返回带有给定标签名特性的所有元素
getElementsByName()	返回带有给定name特性的所有元素
getElementsByClassName()	返回带有给定class特性的元素
createElement(“div”)	创建一个指定名称的元素
createTextNode(str)	创建新文本节点

Element类型

如:<a>、<h1>

属性

属性	描述
id	元素在文档中的唯一标识符。
title	有关元素的附加说明信息，一般通过工具提示条显示出来。
lang	元素内容的语言代码，很少使用。
dir	语言的方向，值为"ltr"（left-to-right，从左至右）或"rtl"（right-to-left，从右至左）
className	与元素的class特性对
tagName	获取标签名
innerHTML	获取或者设置当前元素的内容
attributes	属性(返回元素的属性列表) element.attributes.getNamedItem(name);返回nodeName 属性等于name 的节点； element.attributes.removeNamedItem(name)：从列表中移除nodeName 属性等于name 的节点； element.attributes.setNamedItem(node)：向列表中添加节点，以节点的nodeName 属性为索引；
element.attributes.item(pos)	返回位于数字pos 位置处的节点

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为止处的字符串。
element.normalize()	规范文本节点(多个合成一个)
splitText(int)	分隔文本节点