JS — 事件的相关概念和DOM
程序员文章站
2022-06-20 18:34:35
JS是以事件驱动为核心的一门语言。 事件的三要素：事件源、事件、事件驱动程序。 例如： 常见的事件如下： DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM就是由节点组成的。 解析过程 HTML ......
js是以事件驱动为核心的一门语言。
事件的三要素：事件源、事件、事件驱动程序。
例如：
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getelementbyid("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
常见的事件如下：
dom：文档对象模型。dom 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
dom就是由节点组成的。
解析过程
html加载完毕，渲染引擎会在内存中把html文档，生成一个dom树，getelementbyid是获取内中dom上的元素节点。然后操作的时候修改的是该元素的属性。
dom树（一切都是节点）
dom的数据结构如下：
dom节点的获取
dom节点的获取方式其实就是获取事件源的方式。
节点的访问关系，是以属性的方式存在的。
js中的父子兄访问关系：
插入节点
插入节点有两种方式，它们的含义是不同的。
方式1：
父节点.appendchild(新的子节点);
解释：父节点的最后插入一个新的子节点。
方式2：
父节点.insertbefore(新的子节点,作为参考的子节点)
解释：
- 在参考节点前插入一个新的节点。
- 如果参考节点为null，那么他将在父节点最后插入一个子节点。
复制节点（克隆节点）
格式如下：
要复制的节点.clonenode(); //括号里不带参数和带参数false，效果是一样的。
要复制的节点.clonenode(true);
括号里带不带参数，效果是不同的。解释如下：
-
不带参数/带参数false：只复制节点本身，不复制子节点。
-
带参数true：既复制节点本身，也复制其所有的子节点。