DOM节点以及节点之间的关系

三大属性

所有的Node(元素、属性、文本)对象都是document的 子代节点

nodeType 节点类型(number)

document  9
element  1
attrbute  2
text  3

节点名 (nodeName)

document -> #document
标签元素 -> 全大写的标签名
属性名 -> attitude
文本节点 -> #text

节点值 (nodeValue)

document	null
标签元素		null
属性值		attribute
文本的内容	text

查找三个元素,直接用(window)

document.documentElement -> html
document.head -> head
document.body -> body

节点间关系

节点关系:

1.父子关系
node.parentNode		获得node的父节点
node.childNodes		获得node的直接子代节点
node.firstChild		获得node下的第一个子节点
node.lastChild		获得node下最后一个子节点
2.兄弟关系
node.previousSibling	返回当前节点的前一个兄弟节点
node.nextSibling	返回当前节点的下一个兄弟节点

节点树:包含了所有节点(元素,文本)完整的结构

元素树:仅包含元素节点的树形结构

节点元素关系

1.父子关系
elem.parentElement	返回父元素对象
elem.children	返回子元素对象集合IE8支持
elem.firstElementChild	返回第一个子元素对象
elem.lastElementChild	返回最后一个子元素对象
2.兄弟关系
elem.previousElementSibling		返回当前元素的前一个兄弟元秦
elem.nextElementSibling		返回当前元素的下一个兄弟元素
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值