JavaScript学习笔记12_js span[i].onclick = getstr(i)-优快云博客

这篇博客详细介绍了DOM操作，包括删除节点、复制节点、动态生成表格等，以及事件处理的高级用法，如事件监听和事件流。通过实例展示了如何在JavaScript中修改元素属性、内容和样式，以及如何处理DOM事件，包括捕获和冒泡阶段。此外，还探讨了不同方式创建元素的效率和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

节点操作

删除节点

node.removeChild(child)

删除留言案例

复制节点

node.cloneNode()浅拷贝

node.cloneNode(true)深拷贝

动态生成表格

三种动态创建元素的区别

document.write()

element.innerHTML

document.createElement

DOM重点核心知识

创建

document.write

innerHTML

createElement

增

appendChild

insertBefore

删

removeChild

改

1.修改元素属性:src、href、title

2.修改普通元素内容：innerHTML、innerText

3.修改表单内容：value、type、disabled

4.修改元素样式：style、className

查

1.DOM提供的API方法：getElementById、getElementByTagName

2.H5提供的新方法：querySelector、querySelectorAll

3.获取节点操作元素：父（parentNode）、子（children）兄（previousElementSibling、nextElementSibling）

属性操作

setAttribute：设置dom的属性值

getAttribute：得到dom属性值

removeAttribute：移除属性

事件操作

事件高级

传统方式：

方法监听注册方式

addEventListener事件监听方式

attachEvent事件监听方式（IE9之前支持）

删除事件（解绑事件）

传统方式删除事件eventTarget.onclick =null；

方法监听注册方式：eventTarget.removeEventListener(type,listener[,useCapture]);

DOM事件流

DOM事件流三个阶段

节点操作

删除节点

node.removeChild(child)
node父节点,child子节点
禁用按钮disabled = true；

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>

    </ul>
    <script>
        //1.获取ul元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        /* //2.删除元素 node.removeChild(child)
        ul.removeChild(ul.children[0])//删除ul第一个孩子 */
        //3.点击按钮依次删除ul里面的孩子
        btn.onclick = function () {
            if (ul.children.length == 0) {
                this.disabled = true;
            }
            ul.removeChild(ul.children[0]);
        }
    </script>

</body>

</html>

点击一次删除后的结果

删除留言案例

分析:当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接
然后需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
阻止链接跳转：javascript:;或者Javascript:void(0);
删除元素，删除的是当前链接的li，他的父亲

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

    </script>

</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        //1.获取button按钮 textarea域 ul标签
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //2.btn点击注册事件
        btn.onclick = function () {
            if (text.value == '') {//判断输入内容是否为空
                alert('请输入内容');
                return false;
            } else {
                //3.创建li标签元素
                var li = document.createElement('li');
                //4.将text里面的值赋值给li
                li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>";
                //5.在前面插入li元素
                ul.insertBefore(li, ul.children[0]);
                /* //5.在后面插入li元素
                ul.appendChild(li); */
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        //node.removeChild(child);  删除的是li当前所在的li   li的相当于this.parentNode
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>

</body>

</html>

结果
点击删除之后的结果

复制节点

node.cloneNode()浅拷贝
- 括号里面为空或者false，是浅拷贝，只复制节点本身，不克隆里面的子节点
node.cloneNode(true)深拷贝

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //2.克隆节点node.cloneNode()
        var lili = ul.child[0].cloneNode();
        ul.appendChild(lili);
    </script>

</body>

</html>

结果

动态生成表格

使用JS动态生成学生数据，将tbody里面的数据存储到JS的datas数组中
所有的数据都放在tbody里面的行中
因为行很多，我们需要循环创建多个行（对应多少人）
每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
遍历对象 for(var k in obj){} ；k得到是属性名，obj[k] 得到的是属性值
最后一列单元格是删除，需要单独创建一个删除的单元格

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        var datas = [{//将tbody数据存在datas数组中
            name: '魏璎珞1',
            subject: 'Javascript',
            score: 100
        }, {
            name: '魏璎珞2',
            subject: 'Javascript',
            score: 98
        }, {
            name: '魏璎珞3',
            subject: 'Javascript',
            score: 98
        }];
        //往tbody里面创建行  有几个人（数组长度）就创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {//外面的for循环管行
            //1.创建tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            //2.行里面创建单元格 td
            for (var k in datas[i]) {//里面的for循环管列
                //创建单元格
                var td = document.createElement('td');
                //把对象里面的属性值 给td  
                //这里的obj[i]表示属性值  这里的obj[i][k]表示属性值
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            //3.创建有删除两个字 的单元格
            var td = document.createElement('td');
            td.innerHTML = '<a href ="javascript:;">删除</a>';
            tr.appendChild(td);
        }
        //4.删除操作
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                //点击a删除当前a所在的行 node.removeChild(child)  a的父亲是单元格td a父亲的父亲是行tr
                tbody.removeChild(this.parentNode.parentNode);

            }
        }


    </script>

</body>

</html>

点击删除之前的结果
点击删除之后的效果

三种动态创建元素的区别

document.write()
- 直接将内容写入页面的内容流，但是文档执行完毕，则他会导致页面重绘
element.innerHTML
- 将内容写入某个DOM节点，不会导致页面全部重绘
- 创建多个元素效率更高（不要采取拼接字符串的形式）而是要采取数组形式拼接。

document.createElement

创建多个元素效率稍微低一点，但是结构清晰

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button>点击</button>
    <p>abc</p>
    <script>
        //1.document.write()  创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        var btn = document.querySelector('button');
        btn.onclick = function () {
            document.write('<div>123</div>');
        }
        //2.element.innerHTML

    </script>

</body>

</html>

结果
点击之后的结果

DOM重点核心知识
- DOM文档对象模型
- 对于HTML，dom使得html形成一颗dom树，包含文档、元素、节点。
- 获取过来的DOM元素是一个对象（object）所以称为文档对象模型
- 创建
  - document.write
  - innerHTML
  - createElement
- 增
  - appendChild
  - insertBefore
- 删
  - removeChild
- 改
  - 修改dom元素属性，dom元素内容、属性、表单值
  - 1.修改元素属性:src、href、title
  - 2.修改普通元素内容：innerHTML、innerText
  - 3.修改表单内容：value、type、disabled
  - 4.修改元素样式：style、className
- 查
  - 1.DOM提供的API方法：getElementById、getElementByTagName
  - 2.H5提供的新方法：querySelector、querySelectorAll
  - 3.获取节点操作元素：父（parentNode）、子（children）兄（previousElementSibling、nextElementSibling）
- 属性操作
  - setAttribute：设置dom的属性值
  - getAttribute：得到dom属性值
  - removeAttribute：移除属性
- 事件操作

事件高级

注册事件（绑定事件）两种方式

传统方式和方法监听注册方式
传统方式：
- 利用on开头的事件
- 特性：注册事件唯一性
- 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
- addEventListener()它是其中一个方法
- IE9之前不支持此方法，可使用attachEvent()代替
- 特点：同一个元素同一个事件可以注册多个监听器，按注册事件一次执行
addEventListener事件监听方式
- eventTarget.addEventListener(type,listener[,useCapture])
- type：事件类型字符串需要带''号,比如click、mouseover，注意这里不要带on
- listener：事件处理函数，事件发生时，调用该监听函数
- useCapture：可选参数，是一个布尔值，默认是false

attachEvent事件监听方式（IE9之前支持）

eventTarget.attachEvent(eventNameWithOn,callback)
eventNameWithOn：事件类型字符串，比如onclick、onmouseover这里需要带on
callback：事件处理函数，当目标出发事件时回调函数被调用

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <button>方法监听注册事件</button>
    <script>
        //1事件监听注册事件   addEventListener里面的事件类型是字符串，必须加''，而且不带on
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            alert('我是方法监听注册事件1');
        })
        //特点 同一个事件可以添加多个侦听器
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            alert('我是方法监听注册事件2');
        })
        /* //2.attachEvent IE9之前版本支持
        btn[1].attachEvent('onclick', function () {
            alert('22');
        }) */

    </script>

</body>

</html>

结果

删除事件（解绑事件）

传统方式删除事件eventTarget.onclick =null；
方法监听注册方式：eventTarget.removeEventListener(type,listener[,useCapture]);
解决兼容性

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
    </style>

</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function () {
            //1.传统方式删除事件  eventTarget.onclick =null；
            alert('传统删除事件');
            divs[0].onclick = null;
        }
        divs[1].addEventListener('click', fn)//里面的fn不需要调用加小括号
        //2.方法监听删除事件removeEventListener(type,listener[,useCapture]);
        function fn() {
            alert('方法监听删除事件');
            divs[1].removeEventListener('click', fn);
        }
        //3.


    </script>


</body>

</html>

点击第一个盒子结果
点击第二个盒子结果

DOM事件流

事件传播的过程级DOM事件流
DOM事件流三个阶段
- 捕获阶段

- 当前目标阶段

- 冒泡阶段
- 事件冒泡：时间开始时最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
- 事件捕获：由DOM最顶层节点开始，然后逐级向下传播到具体的元素接收过程
JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent只能得到冒泡阶段
捕获阶段：如果addEventListener第三个参数是true那么则处于捕获阶段；如果第三个参数是false则表示时间在冒泡阶段
实际开发中更加关注事件冒泡
有部分事件没有冒泡：onblur、onfocus、onmouseenter、onmouseleave

案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //1.捕获阶段：如果addEventListener第三个参数是true那么则处于捕获阶段
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, true);
        //2.冒泡阶段  如果addEventListener第三个参数是false那么则处于冒泡阶段
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, false);

    </script>

</body>

</html>