JavaScript DOM总结

Js基础 专栏收录该内容
12 篇文章 1 订阅

当网页被加载时,浏览器会创建页面的文档对象模型(DOM:Document Object Model)。通过HTML DOM可以访问到JavaScript HTML文档中所有的元素。HTML DOM被构造为对象的树,创建了一套完整体系,通过可编程性,JavaScript获得了能够操作动态改变HTML的能力。
在这里插入图片描述
一、 HTML

  1. HTML改变输出流
    HTML输出流指的是当前格式是HTML数据格式,这部分数据正在被传输、导出或显示,这样的一个动作称为“流”。
    改变输出流就是将这传输的数据更改之后再显示新的数据,可以通过:document.write()来向页面书写内容,但不建议使用该方法。该方法是直接向HTML内书写内容,很容易覆盖数据。
    在这里插入图片描述 →→ 在这里插入图片描述
    在页面加载时写入两串字符串,输出结果都为“123”,但一个是标签一个是body的文字内容。在此之前我的页面上本来还有一个div元素,但已经被覆盖掉了。
    在这里插入图片描述
  2. HTML改变元素
    页面被分为很多个块,叫做元素块,组合成一个元素块就是通过无数个元素组合起来的,比如说一个按钮,一段文字,它们在页面上都是元素。改变元素的意思就比如说一个p标签里面有一些文字,现在我们要改变里面的文字,这就是改变元素。
    改变元素的方法很简单,通过一个innerHTML属性就可以改变元素。
    在这里插入图片描述
  3. HTML改变属性
    属性是HTML中元素的属性。比如说一个div标签,上面就有很多属性,比如说:class属性(类)、id属性(id)、style(样式)等等。
    一开始可以先给这些属性里写入一些值,然后再通过js将这些属性改变成另外的值,这就是改变属性(或改变属性值)。
    改变属性的方法通过一个setAttribute(attrName,attrValue)方法来改变。
    在这里插入图片描述
    首先通过id获取到元素,然后调用修改方法并传入需要修改的属性名和属性值即可。
    控制台代码结果:
    在这里插入图片描述
    二、 CSS
    1.HTML改变样式
    HTML元素中有一个style属性,它定义了一个元素在页面上所显示的样式。改变样式就是改变style的值。
    语法:document.getElementByid(id).style.property = NewStyle
    首先我们通过id获取到某一个元素,然后点出style再点出具体要修改的某一个样式并将更改的样式值写到赋值运算符右边(=)。
    在这里插入图片描述
    结果为:
    在这里插入图片描述 →→ 在这里插入图片描述
    三、 事件
    1.HTML事件属性
    通过HTML DOM,JavaScript有了能对事件作出反应的能力。当用户做出动作时就能执行JavaScript。
    在这里插入图片描述
    不仅如此,如果需要调用函数对象的话,还可以通过事件属性去实现。
    事件属性是在元素上设置的属性,当用户对其元素做出动作,通过事件属性对其做出反应。
    在这里插入图片描述
    2.事件分配
    在写代码时肯定会遇到两个地方都要用到同一个事件,HTML DOM也支持JavaScript对元素进行事件分配。所谓事件分配就是将两个地方都运用到的相同事件合并成一个函数对象,然后再让两个地方都去调用,那么这就是将该函数对象分配给了两个地方,也就是一个事件两个地方调用。
    在这里插入图片描述
    3.事件罗列
    HTML DOM支持JavaScript能执行的事件也不止这些,下面将罗列几条:
    (1) onclick():鼠标单击事件
    (2) ondblclick():鼠标双击事件
    (3) onmouseover():鼠标移入事件
    (4) onmouseout():鼠标移出事件
    (5) onchange():元素发生改变触发事件
    (6) onkeydown():键盘按下事件
    (7) onkeyup():键盘弹起事件
    四、 节点
    1.HTML添加元素
    向HTML内添加元素首先要创建出一个元素节点,然后将该节点添加到已有的元素中,这一过程便是添加的元素。
    在这里插入图片描述
    通过createElement创建一个元素,需要向其添加内容则通过createTextNode创建一段内容,再将内容通过appendChild添加到元素内,这样一个子节点就创建好了,接下来就要将该子节点添加到已有元素中就行了。
    2.HTML删除元素
    删除元素就是移除子节点,将一个元素里的节点移除。为什么要这样说,因为在JavaScript中想删除一个元素,必须知道它的父级元素和被删元素本身,完全锁定该元素之后才能删除。
    在这里插入图片描述
    所得结果在页面控制台上显示的ul内只有一个child2。
    这一个例子没有通过查找父元素进行删除,因为所有条件我们都知道,但是不避免有不知道的情况,下面是常用解决方法:通过parentNode方法找到父元素去移除元素。
    在这里插入图片描述
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值