程序员的知识教程库

网站首页 > 教程分享 正文

实战，DOM节点层次关系介绍（dom节点之间的关系）

henian88 2024-10-12 03:46:50 教程分享 3 ℃ 0 评论

首先来张美女图，整天好心情，然后祝大家国庆节玩的开心！

上节我们介绍了DOM的节点属性，nodeName,nodeValue,nodeType.

这节我们介绍下DOM节点层次关系，层次关系就和之前介绍的节点树一样，我们主要看看如何遍历和访问节点。

DOM中提供了一些对应的属性（这些属性具有一定的依赖关系）。包括：ownerDocument，childNodes，firstChild，lastChild，parentNode，previousSibling，nextSibling，previousElementSibling，nextElementSibling，attributes，className，innerHTML，innerText。从他们的名称上来看，就可以推出这些属性的作用。

F12试试这些节点之间的关系吧。

document.ownerDocument;

下图为获取该节点的文档根节点


document.getElementsByTagName('head')[0].childNodes;
document.getElementsByTagName('head')[0].firstChild;
document.getElementsByTagName('head')[0].lastChild;

下图中红色框为元素节点<head>的所有子节点childNodes（未显示完），绿色框为其第一个子节点firstChild，最后一个子节点lastChild未显示出来。


document.getElementsByTagName('head')[0].parentNode;

下图中元素节点<head>的父节点parentNode是绿色框整个html标签


document.getElementsByTagName('body')[0].previousSibling;
document.getElementsByTagName('body')[0].nextSibling;
document.getElementsByTagName('body')[0].previousElementSibling;
document.getElementsByTagName('body')[0].nextElementSibling;

下图中元素节点<body>的前一个同级节点previousSibling是#text，后一个同级节点nextSibling是null，因为元素节点<body>是父节点<html>的最后一个子节点lastChild，previousElementSibling和previousSibling的区别是，previousElementSibling获取的是前一个同级元素节点，即获取的是元素节点<head>，同理nextElementSibling获取的是同级后一个元素节点。


document.getElementById('body').attributes;
document.getElementById('body').className;
document.getElementById('body').innerHTML;
document.getElementById('body').innerText;

下图中绿色框为我们所要获取的元素节点<div>，其attributes有很多是个类似数组的集合；className是获取元素节点<div>的class名字相当于节点属性值nodeValue；innerHTML获取的是元素节点<div>与其对应的结束标签</div>之间的内容；innerText获取的是元素节点<div>与其对应的结束标签</div>之间的文本内容（注意：它与innerHTML的区别）。

好了，今天的内容就分享到这，大家按F12动手敲一敲代码，看看实际效果，这样就会理解更深刻了，我也是一边敲文字一边敲代码给大家演示的，这让我更深入了解了他们之间的关系。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表