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

时间 2019-11-06

标签 javascript 零基础入门 dom 基础栏目 JavaScript 繁體版

原文原文链接

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

欢迎你们回到咱们的JavaScript零基础入门，上一节课，咱们了解了JavaScript中的函数，这一节课，咱们来了解一下JavaScript的DOM。css

第一节课咱们讲过，JavaScript中的DOM，是Document Object Model的缩写，即文档对象模型。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，DOM就是用来表示和处理一个HTML或XML文档的经常使用方法。咱们经过JavaScript能够操做DOM。html

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

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来解决这个问题，他们只计算文本节点。spa

接着咱们来讲说同胞节点，咱们能够经过previousSibling和nextSibling来获取先后同胞节点，一样的，兼容问题依然存在，JS依旧提供了previousElementSibling和nextElementSibling来解决问题。视频

好吧，这节课带你们学习了DOM基础，比较理论，你们要本身消化一下，下一节课，带你们一块儿学习DOM操做。htm

若是想跟着振丹继续学习，能够微信关注【振丹敲代码】（微信号：JandenCoding）对象

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

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