dom有关知识详细整理-优快云博客

本文围绕JavaScript节点层次展开，介绍了Node、Document、Element、Text、Comment等类型的属性和方法，如Node类型的节点关系与操作节点方法，Document类型的元素引用方式。还提及HTML5扩展，包括classList属性、焦点管理、自定义数据属性等内容，以提升开发效率和性能。

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

节点层次

Node类型

JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。每个节点都有一个nodeType属性，用以表明节点的类型，通常以数字常量来表示。共有12个数值，

Node.ELEMENT_NODE  1	一个 元素 节点，例如 <p> 和 <div>。

Node.TEXT_NODE     3    文本节点，Element 或者 Attr 中实际的  文字

Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的 ProcessingInstruction ，例如 <?xml-stylesheet ... ?>
声明。

Node.COMMENT_NODE	8	一个 Comment(注释)节点。

Node.DOCUMENT_NODE	9	一个 Document（文档） 节点。

Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html>  就是用于 HTML5 的。

Node.DOCUMENT_FRAGMENT_NODE	11	一个 DocumentFragment 节点

复制代码

//其余的已经弃用，请不要使用

节点关系

父子兄弟关系，和家谱类似看下图：

每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。 NodeList 是一种类数组对象，有length属性，但并不是数组的实例，

所有节点都有的最后一个属性是 ownerDocument，该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。通过这个属性，我们可以不必在节点层次中通过层层回溯到达顶端，而是可以直接访问文档节点。

操作节点

1.appendChild()用于向 childNodes列表的末尾添加一个节点。用于向 childNodes 列表的末尾添加一个节点。

2.insertBefore() 方法。这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（ previousSibling ）

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

4.removeChild() 方法。移除节点

5.createElement()创建元素节点

6.createTextNode()创建文本节点

7.clone(boolean)复制节点

8.normalize(); Node.normalize() 方法将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。

9.要使用这几个方法必须先取得父节点（使用 parentNode 属性）。

Document类型

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

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

1.1

作为 HTMLDocument 的一个实例， document 对象还有一些标准的 Document 对象所没有的属性。这些属性提供了 document 对象所表现的网页的一些信息。

document.title;

document.URL;

document.domain; 可以进行跨域通信，例：

 两个页面来自不同的子域名，需要互相访问他们的javascript对象，假如页面A:video.baidu.com,页面B:image.baidu.com ，可以将这个两个页面的document.domain都设置为：baidu.com,它们之间就可以通信了。
复制代码

document.referrer;

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

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

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

document.write()

document.writeln()有换行符（\n）

元素的引用

doucument.getElementById() //id应用

document.getElementsByTagName() //标签引用————同属于HTMLcollection对象，类数组，和nodelist对象类似，有length，可通过下标和item()访问

document.getElementsByName()//name引用————同属于HTMLcollection对象，类数组，和nodelist对象类似，有length，可通过下标和item()访问

document.getElementByClassName()//同属于HTMLcollection对象，类数组，和nodelist对象类似，有length，可通过下标和item()访问

由于使用上面的方法只能通过运行 JavaScript 代码来完成查询操作会带来性能问题，在之后的DOM扩展中，增加了两个方法来代替它们，

querySelector() 和 querySelectorAll()这两个方法是原生API，解析和树查询操作可以在浏览器内部通过编译后的代码来完成，极大地改善了性能。 querySelector()接受一个css或多个选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

//取得div元素中的第一个p元素
document.querySelector("div p")
//取得第一个class为contain的div元素
document.querySelector("div.contain")
//取得第一个div元素中的p元素
document.querySelector("div>p")
//取得第一个name值为logn的input元素
document.querySelector("input[name='logn']")
复制代码

querySelectorAll()接受一个或多个css选择符，返回一个nodeList对象的实例

//取得所有的div中的所有p元素
document.querySelectorAll("div p")
//取得所有的class为contain的div元素
document.querySelectorAll("div.contain")
//取得所有的div中其子元素为p的元素
document.querySelectorAll("div>p")
//取得所有的name值为logn的input元素
document.querySelectorAll("input[name='logn']")
复制代码

Element类型

除了 Document 类型之外， Element 类型就要算是 Web 编程中最常用的类型了。 Element 类型自身常用属性：

id  //唯一标识符
className // 与元素的class相对应，
title  //元素附加信息说明，
lang  //元素内容的语言代码，很少使用
复制代码

取得特性

getAttribute()//获取特性  getAttribute("id")

setAttribute()//设置特性  setAttribute("id")

removeAttribute()//移除特性 removeAttribute("id") 
复制代码

//建议不要使用自定义特性设置，

Text类型

normalize(),规范化文本节点，于是就催生了一个能够将相邻文本节点合并的方法。这个方法是由 Node 类型定义的（因而在所有节点类型中都存在），名叫 normalize() ，在文本节点的父元素上使用。

splitText()，分割文本节点

这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的parentNode 相同。

Comment类型

Comment 类型与 Text 类型继承自相同的基类，因此它拥有除 splitText() 之外的所有字符串操作方法。与 Text 类型相似，也可以通过 nodeValue 或 data 属性来取得注释的内容。

<div id="myDiv"><!--A comment --></div>
var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"
alert(comment.nodeValue);//'A comment'
复制代码

HTML5扩展

getElementsByClassName() //getElementsByClassName() 方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。

classList属性

在操作类名时，需要通过 className 属性添加、删除和替换类名。ClassList属性使用起来非常的简便，这个 classList 属性是新集合类型 DOMTokenList 的实例。与nodeList类似，有length属性，可以使用item()方法，也可以使用方括号语法

add(value) ：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。

//添加"current"类
复制代码

div.classList.add("current");

contains(value) ：表示列表中是否存在给定的值，如果存在则返回 true ，否则返回 false 。
//确定元素中是否包含既定的类名
复制代码

if (div.classList.contains("bd") && !div.classList.contains("disabled")){ //执行操作 )

remove(value) ：从列表中删除给定的字符串。

//删除"disabled"类
`div.classList.remove("disabled");`

toggle(value) ：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

`div.classList.toggle("user");`
//迭代类名
`for (var i=0, len=div.classList.length; i < len; i++){
doSomething(div.classList[i]);
}`
复制代码

焦点管理

HTML5 也添加了辅助管理 DOM 焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。

document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即可。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有没有"myname"值呢？
if (div.dataset.myname){alert("Hello, " + div.dataset.myname);}
复制代码

如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。在跟踪链接或混搭应用中，通过自定义数据属性能方便地知道点击来自页面中的哪个部分。

scrollIntoView() 方法

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。具体用法可以查看MDN

children属性

children用来处理ie浏览器和其它浏览器在处理文本节点空白符存在差异化的问题。除此之外和childNode没有什么区别。

Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。

下面的函数用来检查一个元素是否是body元素的后代元素且非body元素本身.

  return (node === document.body) ? false : document.body.contains(node);
}
复制代码