JS备忘单:Dom操纵和事件监听器

作者 : IT 大叔 本文共1376个字,预计阅读时间需要4分钟 发布时间: 2020-09-4

操作DOM

需要知道

  • 查找元素:.querySelector()、. getElementBy()
  • 要添加元素:.createElement()、. appendChild(),insertBefore()、. innerHTML
  • 删除元素:.remove()、. removeChild()

如何使用

首先在您要操作的页面上找到一个元素。您可以通过查看源HTML文件或按cmd + shift + c在页面上选择一个元素来执行此操作。

JS备忘单:Dom操纵和事件监听器插图

在这种情况下,我们选择<div>ID为“ dog-image-container” 的元素。为了选择此项,我们将使用querySelector并将其保存到变量中以备后用。

dogContainer = document.querySelector('#dog-image-container');

现在,我们要添加一个<h1>显示“ Dog Pics” 的元素。让我们从创建它开始。let h1 = document.createElement('h1');现在我们已经将<h1>元素存储在“ h1”变量中,让我们为其分配一些文本。h1.innerHTML = "Dog Pics";

JS备忘单:Dom操纵和事件监听器插图(2)

如果您在右边的控制台中查看,您会看到我们已经在h1变量中添加了文本!但是,等等,它不在我们的页面上。这是因为创建元素不会将其包括在DOM中。为此,我们必须将h1变量附加到其父级dogContainer。有两种方法可以做到这一点; 第一种是使用appendChild方法:dogContainer.appendChild(h1);通过在父类(在本例中为dogContainer)上调用该方法,您将把子代添加到父代的末尾。如果您希望将元素放在容器顶部怎么办?有一种方法。insertBefore()有两个参数,第一个是您要插入的元素,第二个是您要插入该元素的位置。
dogContainer.insertBefore(h1,dogContainer.firstChild);

JS备忘单:Dom操纵和事件监听器插图(4)

我们做到了!如果要删除刚刚创建的文本,就像在我们创建的h1变量上调用remove()方法一样简单:h1.remove();此方法是一种快捷方式,因为它允许我们删除元素而无需寻找父元素。removeChild()但是,需要父母和孩子一起工作:dogContainer.removeChild(h1);

事件监听器

需要知道:

desiredElement.addEventListener("type of event", callBackFunction())

事件侦听器允许我们与页面进行交互。请查看MDN文档以获取可用事件的列表。为了我们的目的,我们希望能够单击我们的新“ Dog Pics”文本并将其变为红色。对我们来说幸运的是,我们所需的元素已经使用h1变量进行了定义。在回调函数中,我们定义了执行操作时发生的情况。我们需要文本变成红色。

h1.style.color = 'red';

此行代码在h1元素上调用style属性,并为其分配新的颜色红色。现在,我们拥有了拼图的所有内容来编写事件监听器:

  • wantedElement = h1
  • “事件类型” =“点击”
  • 回调函数= h1.style.color ='红色';

h1.addEventListener("click",function(event){h1.style.color = 'red';})

JS备忘单:Dom操纵和事件监听器插图(6)

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » JS备忘单:Dom操纵和事件监听器

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论