JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础

欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。

第一节课我们讲过,JavaScript中的DOM,是Document Object Model的缩写,即文档对象模型。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,DOM就是用来表示和处理一个HTML或XML文档的常用方法。我们通过JavaScript可以操作DOM。

根据DOM,HTML文档的每一个成分,都是一个节点。DOM 是这样规定的:整个文档是一个文档节点,即document节点,用<document></document>包裹;每个 HTML 标签是一个元素节点,用<html></html>等HTML标签包裹;包含在 HTML 元素中的文本是文本节点,这种节点没有标签包裹;每一个 HTML 属性是一个属性节点,如href等属性;注释属于注释节点,用<!-- -->包裹。

DOM节点树中,节点彼此之间拥有层级关系,在这个关系网中,有父、子和同胞三种关系。父节点(parent)拥有子节点(child),而同级的子节点被称为同胞(sibling),也称为兄弟节点。在节点树中,顶端节点被称为根节点(root),除了父节点,每个节点都有父节点,一个父节点可以拥有很多子节点,同胞节点拥有相同的父节点。

在JS中,我们可以通过以下方式获取节点或节点集合:

  1. document.getElementById:通过ID获取元素节点,返回单节点;
  2. document.getElementsByTagName:通过标签名称获取元素节点,返回节点集合;
  3. document.getElementByClassName:通过样式名获取元素节点,返回节点集合;
  4. document.getElementsByName:通过元素节点name属性获取节点,返回节点集合;
  5. document.querySelector:这个属于css选择器,按照css选择的规则,选择对应的元素;
  6. document,querySelectorAll:这个与第5点相同,只不过选择的是元素集合。

除此之外,我们可以通过parentNode来获取父节点;用过childNodes来获取子节点,但是childNodes是有兼容性问题的,在IE6-8中,使用ChildNodes不会计算文本节点,但chrome、FireFox、IE9+会计算文本节点。所以,我们有可替代的方法,就是children,他只会处理元素节点。

同时,我们可以通过firstChild和lastChild来获取首尾子节点,但还是那个问题,存在兼容性问题,会计算文本节点,所以JS提供了firstElementChild和lastElementChild来解决这个问题,他们只计算文本节点。

接着我们来说说同胞节点,我们可以通过previousSibling和nextSibling来获取前后同胞节点,同样的,兼容问题依然存在,JS依旧提供了previousElementSibling和nextElementSibling来解决问题。

好吧,这节课带大家学习了DOM基础,比较理论,大家要自己消化一下,下一节课,带大家一起学习DOM操作。

                                                                                                       

如果想跟着振丹继续学习,可以微信关注【振丹敲代码】(微信号:JandenCoding)

新博文微信同步推送,还附有讲解视频哦~

也可直接扫描下方二维码关注。

转载于:https://my.oschina.net/JandenMa/blog/1834457

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值