JavaScriptのNode节点

DOM的最小组成单位叫做节点(node),一个文档的树形结构(DOM树),就是由各种不同的类型的节点组成.

对于HTML文档,节点主要有以下六种类型:Document节点、DocumentType节点、Element节点、Attribute节点、Text节点和DocumentFragment节点。

节点 名称 含义
Document 文档节点 整个文档(window.document)
DocumentType 文档类型节点 文档的类型(比如<!DOCTYPE html>)
Element 元素节点 HTML元素(比如<body>、<a>等)
Attribute 属性节点 HTML元素的属性(比如class=”right”)
Text 文本节点 HTML文档中出现的文本
DocumentFragment 文档碎片节点 文档的片段

浏览器原生提供一个Node对象,上表所有类型的节点都是Node对象派生出来的。也就是说,它们都继承了Node的属性和方法。

Node节点的属性

nodeName,nodeType

nodeName属性返回节点的名称,nodeType属性返回节点的常数型.

类型 nodeName nodeType
DOCUMENT_NODE document 9
ELEMENT_NODE 大写的HTML元素名 1
ATTRIBUTE_NODE 等同于Attr.name 2
TEXT_NODE text 3
DOCUMENT_FRAGMENT_NODE document-fragment 11
DOCUMENT_TYPE_NODE 等同于DocumentType.name 10
document.querySelector('a').nodeType ===1
//true
document.querySelector('a').nodeType === Node.ELEMENT_NODE  //true
两者等价
这些属性返回当前节点的相关节点ownerDocument, nexSibling, previousSibling, parentNode, parentElement.
(1)ownerDocument:返回当前节点所在的顶层文档对象,即document对象
var d = p.ownerDocument;
d === document  //true
(2)nextSibling:返回紧跟在当前节点后面的第一个同级节点.同一级可能是不同的标签也是可以实现的.

(3)previousSibling:返回当前节点前面的、距离最近的同一级节点.

(4)parentNode:返回当前节点的父节点.对一个节点来说,它的父节点只可能有三种类型:element节点、document节点和documentfragment节点
如何从父节点移除指定节点
if (node.parentNode) {
    node.parentNode.removeChild(node);
}
(5)parentElement:返回当前节点的父Element节点.
设置执行节点的父element节点的css属性
if(node.parentElement) {
    node.parentElement.style.color = "red";
}<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值