获取到文档里面的元素以后，我们就可以去做很多事情 … 比如输出或者设置元素里的内容，找到它的兄弟或者老爸等等 … 这个视频我们去试一下 …

先选中这个文档里面的 h1 元素 …

下面我们在 Properties 这个选项卡里，再去查看一下个 h1 元素的一些属性 … 这里也很多有用的属性 … childNodes 里面是 h1 的所有的子节点 …

innerHTML 里面是 h1 元素内部的 HTML 标签还有内容 … innerText 是 h1 里面的文字 … 你可以对照这个列表，去找到自己想要的东西 …

下面我们去试几个 …

先用上一个视频里介绍的方法，获取到这个 h1 元素 … 可以使用 getElementById … 再给获取到的结果起个名字 …

var pageTitle = document.getElementById(‘page-title');

然后输入 pageTitle.nodeName … 得到的是这个元素的节点的名称 …

想要输出它里面的文字，可以使用 pageTitle.innerText …

我们还可以找到 h1 的父节点 … pageTitle.parentNode

它的父节点是 body 元素 … 同样我们可以找出 pageTitle 的兄弟元素 … 比如我们要得到它的上一个兄弟 …

pageTitle.previousElementSibling

返回的结果是 null ，因为它没有上一个兄弟元素 … 但是它有下一个兄弟 … 也就是这个 p 元素 …

pageTitle.nextElementSibling

得到的就是这个 p 元素… 想要输出这个兄弟元素里面的文字 … 可以这样

pageTitle.nextElementSibling.innerText

输出的就是 h1 元素的下一下兄弟元素， p 元素里面的文字 …

TEST2

下面我们再找到这个带有 .artist-list 类的 ul 元素 … var artistList = document.querySelector(‘.artist-list');

这个元素节点里面有一些子节点 … 使用它的 childNodes 属性可以查看它的所有的子节点 …

artistList.childNodes

这些子节点包含了元素类型的节点，还有文本类型的节点 …. 想知道一共有多少个子元素类型的节点 …

artistList.childElementCount

返回的结果是 4，一共有四个 li 元素 …

想得到它的第一个元素类型的子节点，可以使用 firstElementChild 这个属性 …

artistList.firstElementChild

后面再加上一个 innerText ，可以只输出这个子节点的文字内容 ..

artistList.firstElementChild.innerText;

想重新设置一下这个子元素里的文字，可以在后面加上一个等号 … 后面是新的内容 …

artistList.firstElementChild.innerText = '克里斯·马丁';

除了 firstElementChild ，还有一个 lastElementChild 属性 ..

artistList.lastElementChild

它会返回最后一个元素类型的子节点 ..