使用JS操作HTML

通过可编程的文档对象模型Document Object Model),JavaScript 获得了足够的能力来操作 HTML文档, 如改变页面中的所有 HTML 元素、元素的属性、CSS 样式以及对页面事件做出反应。

简单说起来就是我们要了解Document对象(前面我们已经接触过一些)以及这个对象有哪些属性和方法,了解了文档Document对象,结合我们之前学的怎么操作对象的属性和方法,一切问题就迎刃而解了。这就是对象在JavaScript里的重要之处。

查找DOM的方法

打开Document接口的技术文档,在技术文档左侧我们可以看到Document 接口的所有属性与方法。接下来会通过控制台实战的方式让大家对这些属性与方法有更加清晰的理解。

技术文档:JavaScript Document接口

在学习CSS的时候我们了解到,要给HTML的某个标签设置样式,首先我们要有选择器,CSS的选择器有id、class、以及HTML的标签等等,而要用JavaScript操作HTML,首先也是要先查找到需要操作的DOM。

通过标签、标签的ID、class查找DOM

使用Chrome浏览器打开微信公众平台,然后打开该页面的开发者工具,打开console控制台,然后直接在控制台里逐行输入下面的命令:

通过getElementById()返回的是一个节点,因为文档里只会有一个id,而通过getElementsByClassName()和document.getElementsByTagName()返回的是HTMLCollection对象数组,HTMLCollection对象是元素的集合

 

通过选择器来查找DOM

querySelector() 方法返回文档中指定 CSS 选择器的第一个元素,大家可以在console控制台里逐行输入命令来查看效果:

 

通过选择器返回所有DOM

querySelectorAll() 方法返回文档中指定 CSS 选择器的所有元素,返回 NodeList 对象数组,NodeList 对象表示节点的集合。大家可以在console控制台里逐行输入命令来查看效果:

HTMLCollection对象是元素Element的集合,而NodeList 对象表示节点Node的集合,元素Element是控制页面结构的节点Node,但是由于我们平时操作HTML都是控制页面的结果,所以其实这两者的区别没有太大。

元素节点的属性与方法

所有的元素节点都可以看成是一个Element对象,回顾一下对象的知识,要操作一个对象,首先我们需要了解这个对象有哪些属性和方法。

技术文档:Element MDN文档

我们可以结合技术文档,以及在控制台展开一个NodeList或HTMLCollection的对象(或者它的子命名空间),就可以看到该对象有哪些元素和方法了。

其实下面的命令都是基于我们之前学到的知识,比如常量赋值,数组,以及访问对象的属性和方法的点表示法等等。大家可以在console控制台里逐行输入命令来查看效果:

结合我们之前学的知识,想要改变元素对象的值,我们需要先访问该对象的某个具体属性,然后给它赋值即可。

修改class与属性

在执行上面的代码时,有一个classList属性,这个属性可以返回元素的类名列表,所以会非常管用,比如我们希望显示和隐藏某个元素这种动态效果就可以使用到它。

技术文档:classList

我们在控制台里输入,这个在前面我们就了解过,我们把它单独拿出来:

展开DOMTokenList,在__proto__DOMTokenList会包含很多函数,其中add()、remove()、toggle()函数在实战中会经常用到。比如我们可以在控制台输入:

找到link4的Elements源代码:

我们发现在class里增加了一个hidden,如果我们给hidden添加css样式,比如display:none,这个元素就会被隐藏。

了解DOM的节点

节点树中的节点彼此拥有层级关系。父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称为根(root),比如<html>标签
  • 每个节点都有父节点、除了根(它没有父节点),比如<head> 和 <body> 的父节点是 <html> 节点
  • 一个节点可拥有任意数量的子,<body>标签里面就有很多个子节点,如<div><a><img>等。
  • 同胞是拥有相同父节点的节点

继续在控制台输入代码,之前desktop_link我们已经赋值过啦,大家可以直接输出,如果微信公众平台之前关闭过,我们可以按照之前的步骤重新给desktop_link赋值。

展开得到的HTMLCollection对象和NodeList对象,我们查看里面的属性和方法,找到以下属性:

关于下面的各个属性的意思,我们可以查看

技术文档:Node

  • firstChild:返回树中节点的第一个子节点
  • lastChild:返回该节点的最后一个子节点
  • childNodes:返回一个包含了该节点所有子节点的实时的NodeList
  • parentNode:返回一个当前结点 Node的父节点
  • parentElement:返回一个当前节点的父节点 Element
  • previousSibling:返回其父节点的 childNodes 列表中紧跟在其前面的节点
  • nextSibling:返回其父节点的 childNodes 列表中紧跟在其后面的节点

关于下面的各个属性的意思,我们可以查看

技术文档:ParentNode

  • firstElementChild:返回父节点的第一个Element后代
  • lastElementChild:返回父节点的最后一个Element后代
  • children:返回一个包含父节点所有Element 类型的后代的动态html集合 HTMLCollection
  • childElementCount:给出对象含有的后代数量

大家只需要根据找到这些属性并结合技术文档理解这些属性的意思,相信大家对节点树、父子节点、后代、相邻节点等概念有了非常清楚的认识。

操作元素的节点

要操作元素的节点,除了可以从节点对象的属性着手以外(结合我们之前学的对象属性的知识),我们还可以从这些对象的方法上入手,在Node技术文档Document技术文档里,有几个非常有用的方法:

  • appendChild():将一个节点添加到指定父节点的子节点列表末尾
  • removeChild():从DOM中删除一个子节点。返回删除的节点。
  • insertBefore():在参考节点之前插入一个拥有指定父节点的子节点
  • replaceChild():用指定的节点替换当前节点的一个子节点,并返回被替换掉的节点。
  • createElement():createElement() 方法通过指定名称创建一个元素

添加内容到HTML

使用VS Code编辑器打开index.html,在<body>标签内输入以下代码:

当你把数组、对象以及DOM的一些知识掌握之后,发现其实上面的代码就会比较简单了。

本节任务

  1. 通过实战的方式掌握查找DOM的方法;
  2. 了解元素节点的属性和方法;
  3. 了解DOM节点的概念;
  4. 掌握如何操作元素的节点;
  5. 掌握使用JS给元素添加内容