WebApi入门第六章( DOM节点 )

2.元素节点与属性节点


  • 1.元素节点

  • 类型 nodeTypoe:1

  • 名称 nodeName:标签名大写

  • 值 nodeValue : null

  • 2.属性节点

  • 类型 nodeTypoe:2

  • 名称 nodeName:属性名

  • 值 nodeValue : 属性值

3.文本节点与注释节点与文档节点


  • 1.文本节点

  • 类型 nodeTypoe:3

  • 名称 nodeName:#text

  • 值 nodeValue : 文本内容

  • 2.注释节点

  • 类型 nodeTypoe:8

  • 名称 nodeName:#comment

  • 值 nodeValue : 注释内容

  • 3.文档节点

  • 类型 nodeTypoe:9

  • 名称 nodeName:#document

  • 值 nodeValue : null

4.获取子节点与子元素


  • childNodes:获取子节点:(文本节点,注释节点,子元素节点)

  • 细节:属性节点通过attribute来获取,一般用的不多

  • 浏览器兼容问题:IE8及之前不包含非空文本

  • children:获取子元素:(元素节点)

  • 浏览器兼容问题: IE8及之前包含注释节点

5.兄弟节点与兄弟元素


nextSibling:获取下一个节点 previousSibling:获取上一个节点

  • IE8及之前:文本(不包含非空)、注释、元素

  • 其他浏览器:文本(包含非空)、注释、元素

6.第一个子节点与第一个子元素


  • 1.firstChild : 第一个子节点

  • 2.firstElementChild:第一个子元素节点

  • 他们两者的浏览器兼容问题与兄弟节点一致

7.最后一个节点与最后一个元素


  • 1.lastChild : 最后一个子节点

  • 2.lastElementChild:最后一个子元素节点

  • 他们两者的浏览器兼容问题与兄弟节点一致

8.获取父节点


parentNode:获取元素的父元素节点

  • 细节:一个元素的父节点一定是一个元素,而不是(文本、注释、属性),只有元素才有子节点

9.小案例(点击关闭二维码 )


  • 需求:点击二维码图片右上角的小叉叉,关闭二维码

案例图片 :

效果图:

完整代码:


Document
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值