JS备忘单:Dom操纵和事件监听器
操作DOM
需要知道
- 查找元素:.querySelector()、. getElementBy()
- 要添加元素:.createElement()、. appendChild(),insertBefore()、. innerHTML
- 删除元素:.remove()、. removeChild()
如何使用
首先在您要操作的页面上找到一个元素。您可以通过查看源HTML文件或按cmd + shift + c在页面上选择一个元素来执行此操作。
在这种情况下,我们选择<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";
如果您在右边的控制台中查看,您会看到我们已经在h1变量中添加了文本!但是,等等,它不在我们的页面上。这是因为创建元素不会将其包括在DOM中。为此,我们必须将h1变量附加到其父级dogContainer。有两种方法可以做到这一点; 第一种是使用appendChild方法:dogContainer.appendChild(h1);
通过在父类(在本例中为dogContainer)上调用该方法,您将把子代添加到父代的末尾。如果您希望将元素放在容器顶部怎么办?有一种方法。insertBefore()
有两个参数,第一个是您要插入的元素,第二个是您要插入该元素的位置。
dogContainer.insertBefore(h1,dogContainer.firstChild);
我们做到了!如果要删除刚刚创建的文本,就像在我们创建的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';})
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » JS备忘单:Dom操纵和事件监听器
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。