x-js学习笔记7

最新推荐文章于 2024-06-12 11:59:04 发布

Find_first

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量619

点赞数

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/xmc20050422/article/details/131273736

版权

2.1.1addEventListener（）

2.1.2attachEvent()，ie9以前用

2.2删除事件（解绑事件）

2.3dom事件流

1节点操作

1.1用DOM获取元素

document.getElementByld()

document.getElementByTagName()

document.querySelector等

逻辑性不强、繁琐

1.2利用节点层级关系获取元素

利用父子兄节点关系获取元素

逻辑性强，但是兼容性稍差

1.2.1节点概述

网页中所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。

HTML DOM树中所有的节点均可以通过js进行访问，所有HTML元素（节点）均可以被修改，也可以创建或删除。

一般地，节点至少拥有node Type(节点类型)、node Name（节点名称）和node Value（节点值）这三个基本属性

元素节点 node Type 为1 主要是元素节点

属性节点 node Type 为2

文本节点 node Type为3（文本节点包含文字、空格、换行等）

1.3节点层级

DOM树可以化成不同的层级关系，常见的是父子兄层级关系。

1.3.1父级节点

node.parentNode

<div class="box">
        <span class="erweima"></span>
    </div>
    <script>
        var erweima = document.querySelector('.erweima');
        //var box = document.querySelector('.box');
        //console.log(box);
        //得到的是离元素最近的父级节点 如果找不到父节点就返回null
        console.log(erweima.parentNode);
    </script>

1.3.2子节点

1 parentNode.childNodes(标准)

返回包含指定节点的子节点的集合，该集合为即使更新的集合。

<script>
        //DOM提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelector('li');
        //1.子节点 得到所有的节点 包含元素节点 文本节点
        console.log(ul.childNodes);//返回9个
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        for (var i = 0; i < ul.childNodes.length; i++) {
            if (ul.childNodes[i].nodeType == 1) {
                //ul.childNodes[i]是元素节点
                console.log(ul.childNodes[i]);
            }
        }
    </script>

2 parentNode.children(非标准)

只读属性，返回所有子元素的节点。它只返回子元素的节点，其余节点不返回（重点，非标准但受到各个浏览器的支持）。

//2.children 获取所有的子元素节点 实际开发也常用
        console.log(ul.children);

3 parentNode.firstChild

firstChild返回第一个子节点，找不到返回null，同样，也是包含所有的节点

4 parentNode.lastChild

lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

5 parentNode.firstElementChild

返回第一个子元素节点

6 parentNode.lastElementChild

<script>
        var ol = document.querySelector('ol');
        //1 firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        //2 firstElementChild 返回第一个子元素节点
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
    </script>

但以上两个方法都有兼容性问题，IE9以上才支持

console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);

1.3.3兄级节点

1 node.nextSibling

nextSibling返回当前元素下一个兄弟节点找不到返回null。包含所有节点

2.node.previousSibling

previousSibling返回当前元素上一个兄弟节点找不到返回null。包含所有节点

3.node.nextElementSibling

得到下一个元素节点

4.node.previousElementSibling

得到下一个元素节点

但以上两个方法都有兼容性问题，IE9以上才支持

<body>
    <div>div</div>
    <span>span</span>
    <script>
        var div = document.querySelector('div');
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
        function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextSibling) {
                if (el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }


    </script>


</body>

1.3.4创建节点添加节点

document.createElement('tagName')

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，叫动态创建元素节点

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        //1 创建节点元素节点
        var li = document.createElement('li');
        //2 添加节点 node.appendChild(child) node父级 child 是子级
        var ul = document.querySelector('ul');
        ul.appendChild(li)
        //3 添加节点 node.inserBefore(child,指定元素)；
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        //4 我们想要页面添加一个新的元素：1.创建元素 2.添加元素
    </script>


</body>

1.3.5删除节点

node.removeChild(child)

node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。

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


    </script>
</body>

1.3.6复制节点（克隆节点）

<body>
    <ul>
        <li>3</li>
        <li>2</li>
        <li>1</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        // 1 node.cloneNode(); 括号为空或者里面是flase 浅拷贝
        // 2 node.cloneNode(ture); 括号为true 拷贝 只复制标签 且复制里面的内容
        var lili = ul.children[0].cloneNode();
    </script>
</body>

1.3.7三种动态创建元素区别

document.write()是直接将内容写入页面的内容流，但是文档执行完毕，则它会导致页面全部重绘

element.innerHTML

document.createElement()