前端学习日志-day23

准备数据：创建数组datas，元素为存储表格数据的对象。
创建tr：通过for循环，根据datas.length确定tr数量并创建添加。
创建td与填充内容：用for...in遍历对象属性，创建td，通过td.innerHTML = datas[i][k]填充数据（k为对象属性）。
添加删除单元格：在tr循环内最后创建td，设置td.innerHTML = "<a href='javascript:;'>删除</a>"。
实现删除功能：获取所有a元素，绑定点击事件，通过tbody.removeChild(this.parentNode.parentNode)删除当前a所在的tr。

三、动态创建元素的区别

创建方式	特点	适用场景
`document.write()`	文档加载完成后调用会导致页面重绘，灵活性低	极少使用
`Element.innerHTML`	用数组拼接元素字符串再赋值，效率高	批量创建元素场景
`document.createElement('元素')`	需逐个创建元素，效率稍慢	需精细控制单个元素创建过程

四、DOM 核心总结

（一）DOM 基础概念

定义：文档对象模型，可通过接口修改网页结构、样式、内容。
DOM 树结构：包含document（网页对象）、element（元素 / 标签对象）、node（所有内容节点，如文本、属性等）。

（二）元素操作

创建：document.write()、Element.innerHTML、document.createElement()。
增加（子节点）：node.appendChild(子节点)（添加到末尾）、Node.insertBefore(新节点, 参考节点)（插入到参考节点前）。
删除（子节点）：Node.removeChild(子节点)。
修改：
- 内容：innerHTML（支持 HTML 标签）、innerText（仅纯文本）。
- 常规属性：href（a标签）、src（img标签）、title、alt、id。
- 表单属性：type、value、checked（复选框 / 单选框）、selected（下拉框）、disabled（禁用）。
- 样式：style（行内样式，如element.style.color = 'red'）、className（修改样式类名，覆盖原有类）。
查找：
- 方法：getElementById()（按 ID，唯一）、getElementsByClassName()（按类名，返回集合）、getElementsByTagName()（按标签名，返回集合）、querySelector()（按选择器，返回第一个匹配元素）、querySelectorAll()（按选择器，返回所有匹配元素集合）。
- 节点关系：parentNode（父节点）、children（子元素节点集合）、nextElementSibling（下一个兄弟元素节点）、previousElementSibling（上一个兄弟元素节点）。

（三）属性操作（自定义属性）

获取：getAttribute(属性名)、dataset.属性后缀（如data-id用dataset.id获取，不常用）。
创建：setAttribute(属性名, 属性值)。
删除：removeAttribute(属性名)。

（四）事件基础

绑定语法：事件源.事件类型 = 事件处理程序。
常用鼠标事件：

事件类型	触发条件
`onclick`	鼠标左键点击
`onmouseover`	鼠标经过元素
`onmouseout`	鼠标离开元素
`onfocus`	元素获得鼠标焦点（如输入框）
`onblur`	元素失去鼠标焦点
`onmousemove`	鼠标在元素内移动
`onmouseup`	鼠标按键弹起
`onmousedown`	鼠标按键按下

五、事件注册与解绑

（一）注册方式

传统方式：
- 语法：事件源.事件类型 = 事件处理函数。
- 局限：同一元素同一事件只能绑定一个处理函数，后续绑定会覆盖前者。
方法监听方式：
- 语法：eventTarget.addEventListener('type', 处理函数, useCapture)。
- 参数：type（事件类型，无需加on，如'click'）、处理函数（匿名或命名函数）、useCapture（布尔值，true为捕获阶段，false/ 默认为冒泡阶段）。
- 优势：同一元素同一事件可绑定多个处理函数，按绑定顺序执行。

（二）解绑方式

传统方式：事件源.事件类型 = null。
方法监听方式：
- 要求：处理函数必须为命名函数（匿名函数无法解绑）。
- 语法：先绑定eventTarget.addEventListener('type', fn)，再在处理函数内执行事件源.removeEventListener('type', fn)。

六、DOM 事件流

（一）概念

页面接收事件的传播顺序，分为三个阶段，事件会从外到内再到外传播。

（二）三个阶段

捕获阶段：从document开始，逐层传播到目标事件节点（从外到内）。
当前目标阶段：事件到达目标节点，触发目标节点的事件处理函数。
冒泡阶段：从目标节点逐层传播回document（从内到外），是最常用的阶段。

（三）代码中的体现

传统注册方式：仅支持冒泡阶段。
方法监听方式：通过useCapture控制阶段，true为捕获，false/ 默认为冒泡。

七、事件对象

（一）概念

事件触发时自动生成的对象，存储事件相关信息（属性、方法），在处理函数中通过参数接收（如function(e){}，参数名可设为event、evt、e）。

（二）常用属性与方法

e.target：返回触发事件的具体元素（如点击ul内的li，返回li）。
this：返回绑定事件的元素（如ul绑定事件，点击li时this返回ul）。
e.type：返回事件类型（如'click'、'mouseover'）。
e.stopPropagation()：阻止事件冒泡（避免事件传播到父节点）。
e.preventDefault()：阻止事件默认行为（如阻止a标签跳转、表单默认提交）。

八、事件委托

（一）概念

无需给每个子节点绑定事件，而是将事件绑定到父节点，利用事件冒泡，当子节点触发事件时，事件传播到父节点执行处理函数。

（二）核心应用

通过e.target获取触发事件的子节点，实现对子节点的统一事件处理（如批量处理列表项的点击事件）。

九、鼠标事件扩展

（一）特殊鼠标事件

contextmenu：触发上下文菜单（如右键菜单），可通过e.preventDefault()取消。
selectstart：开始选中文本时触发，可通过e.preventDefault()禁止文本选中。

（二）鼠标事件对象属性（`MouseEvent`）

e.clientX/e.clientY：获取鼠标在浏览器可视区的 X/Y 坐标（不包含滚动距离）。
e.pageX/e.pageY：获取鼠标在整个页面的 X/Y 坐标（包含滚动距离）。
e.screenX/e.screenY：获取鼠标在电脑屏幕的 X/Y 坐标。

今日练习代码

代码展示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            cursor: none;
        }
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var img = document.querySelector('img');
        //移动的天使：先要给图片设置绝对定位，先设置document的mousemove事件，事件处理函数内容为：获取pagex和y赋值给x和y，把img的left和top设置成x和y记得加px 如果需要居中则可以实现 -50 -40
        document.addEventListener('mousemove', function (e) {
            var x = e.pageX;
            var y = e.pageY;
            img.style.left = x - 50 + 'px';
            img.style.top = y - 40 + 'px';
        })
    </script>
</body>

</html><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            cursor: none;
        }
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var img = document.querySelector('img');
        //移动的天使：先要给图片设置绝对定位，先设置document的mousemove事件，事件处理函数内容为：获取pagex和y赋值给x和y，把img的left和top设置成x和y记得加px 如果需要居中则可以实现 -50 -40
        document.addEventListener('mousemove', function (e) {
            var x = e.pageX;
            var y = e.pageY;
            img.style.left = x - 50 + 'px';
            img.style.top = y - 40 + 'px';
        })
    </script>
</body>

</html>