js复习

最新推荐文章于 2026-06-03 09:02:55 发布

原创最新推荐文章于 2026-06-03 09:02:55 发布 · 312 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

DOM操作

获取元素

    document.getElementById()

    document.getElementsByTagName()

    document.getElementsByName()

修改元素的内里面容

    先获取元素节点node

        node.innerHTML='里面可以写HTML代码'

获取元素的属性

    先获取元素节点node

        node.getAttribute()

修改元素属性

    先获取元素节点node

        修改id

            node.id='xxx';

        修改class

            node.className='xxx'

        增加属性

            node.setAttribute(新属性名,'xxxx');

            node.新属性 = 'xxx';

        删除属性

            node.removeAttribute('属性名');

访问元素的父节点

    先获取元素节点node

        node.parentNode获取直接的父节点

访问元素的子节点

    node.childNodes获取所有的直接子节点（包括空格也是一个节点）

创建元素节点

    document.createElement('要创建的元素名');

创建文本节点

    document.createText('要创建的文本内容');

    创建的文本节点(node)不能通过 node.innerHTML = '' 的形式进行赋值

插入节点

    在node节点里面的ref_node上面插入一个节点，

        node.insertBefore(new_node,ref_node);

追加节点

    在node节点里面追加一个new_node节点

        node.appendChild(new_node)

删除节点

    删除node的子节点node_del

        node.removeChild(node_del);

修改元素的css样式

    获取node节点更改它的css样式

        node.style.属性名 = '新值';

节点类型

    用node.nodeType查看节点类型

        ELEMENT_NODE   1  元素节点

        ATTRIBUTE_NODE     2  属性节点

        TEXT_NODE      3  文本节点

        CDATA_SECTION_NODE 4  CDATA 区段

        ENTITY_REFERENCE_NODE  5  实体引用

        ENTITY_NODE    6  实体

        PROCESSING_INSTRUCTION_NODE    7  处理指令

        COMMENT_NODE   8  注释节点

        DOCUMENT_NODE  9  文档节点


JS事件处理
    事件冒泡
        从具体到广泛
    事件捕获
        从广泛到具体
    HTML事件处理
        直接在html的元素里面的事件属性里面赋值相应的函数
        例子：<button id="btn" onclick="get(),hello()">按钮</button>
        缺点：修改函数名的时候要改两处，修改麻烦
    DOM0级事件处理
        把函数赋值给一个事件处理程序
        例子：var btn = document.getElementById('btn');
               btn.onclick = hello;
               function hello(){
                    alert('hello');
               }
    DOM2级事件处理
        通过EventListener添加事件处理
            优点:事件之间不会被覆盖
        DOM的EventListener
            事件监听之间不会覆盖
                添加事件监听
                    node节点添加点击事件
                        node.addEventListener('click',函数名);
                移除事件监听
                        node.removeEventListener('click',函数名);
    IE事件处理
        attachEvent();
        removeEvent();
    事件对象
        type属性获取事件的类型
        target获取事件的目标
        stopPropagation()阻止事件冒泡
        preventDefault()阻止默认行为
            例子:像链接的跳转行为
js内置对象
    Date对象
        var date = new Date();
        
    Array对象
        var ary = new Array(这里自不指定大小都不是必须的);
        例子：
            var ary = new Array();
            ary[3] = 3;
            alert(ary[0]);
            alert(ary[3]);
            这里会弹出一个underfined和一个3

标签

#JavaScript #js #dom操作