JavaScript零基础入门——（十）JavaScript的DOM基础

最新推荐文章于 2024-07-25 09:24:40 发布

weixin_34380781

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量84

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/JandenMa/blog/1834457

版权

2019独角兽企业重金招聘Python工程师标准>>>

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中，我们可以通过以下方式获取节点或节点集合：

document.getElementById：通过ID获取元素节点，返回单节点；
document.getElementsByTagName：通过标签名称获取元素节点，返回节点集合；
document.getElementByClassName：通过样式名获取元素节点，返回节点集合；
document.getElementsByName：通过元素节点name属性获取节点，返回节点集合；
document.querySelector：这个属于css选择器，按照css选择的规则，选择对应的元素；
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）

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

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