Web APIs——排他操作、自定义属性操作、节点操作

最新推荐文章于 2024-09-27 10:58:52 发布

原创最新推荐文章于 2024-09-27 10:58:52 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

API 专栏收录该内容

7 篇文章

订阅专栏

1.1. 排他操作

1.1.1 排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1. 所有元素全部清除样式
2. 给当前元素设置样式
3. 注意顺序不能颠倒

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1. 获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的是伪数组  里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                // (1) 我们先把所有的按钮背景颜色去掉  干掉所有人
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // (2) 然后才让当前的元素背景颜色为pink 留下我自己
                this.style.backgroundColor = 'pink';

            }
        }
    </script>

1.2. 自定义属性操作

1.2.1 获取属性值

element.属性获取属性值
element.getAttribute(‘属性’);
区别
- element.属性获取内置属性值（元素本身自带的属性）
- element.getAttribute(‘属性’); 主要获得自定义的属性（标准）程序员自定义的属性

    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
	</script>

1.2.2. 设置属性值

element.属性 =‘值’ 设置内置属性值
element.setAttribute(‘属性’,‘值’);
区别
- element.属性设置内置属性值
- element.setAttribute(‘属性’); 主要设置自定义的属性（标准）

        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是

1.2.3. 移出属性

element.removeAttribute(‘属性’);

		// class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');

1.2.5. H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

设置h5自定义属性
h5规定自定义属性data-开头作为属性名并赋值
例如： <div data-index=“1”> <div>
或者使用js设置
element.setAttribute(‘data-index’,2)
获取h5自定义属性
1、兼容性获取 element.getAttribute(‘data-index’);
2、h5新增element.dataset.index或者element.dataset[‘index’] ie 11才开始支持

    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

1.3. 节点操作

获取元素通常使用两种方式：
1、利用DOM提供的方法获取元素

document.getElementByld()
document.getElementByTagName()
document.querySelector等
逻辑性不强、繁琐
2、利用节点层级关系获取元素
利用父子兄节点关系获取元素
逻辑性强、但是兼容性稍差

1.3.1. 节点概述

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

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

在这里插入图片描述

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType为3（文本节点包含文字、空格、换行等）

1.3.2. 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
在这里插入图片描述

1.3.3. 父级节点

node.parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果找不到父节点就返回为 null

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

1.3.4. 子节点

所有子节点

1、parentNode.childNodes（标准）
parentNode.childNodes发那会包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包含元素节点，文本节点等。如果只想要获得里面的元素节点，则需要专门处理。一般不提倡用childNodes

子元素节点
2、parentNode.children(非标准)
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回
虽然children是一个非标准，但是得到了各个浏览器的支持，可以使用

    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <script>
        // DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>

第1个子节点

3、parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点

最后1个子节点

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

第1个子元素节点

5、parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null

最后1个子元素节点
6、parentNode.lastElementChild
lastElementChild返回最后一个子元素节点，找不到则返回null
注意：这两个方法有兼容性问题，IE9以上才支持

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案： 1、如果想要第一个子元素节点，可以使用parentNode.children[0] 2、如果想要最后一个子元素节点，可以使用parentNode.children[parentNode.children.length-1]

    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>

1.3.5. 兄弟节点

下一个兄弟节点

1、node.nextSibling
nextSibling 返回当前元素的下一个兄弟节点、找不到则返回null，同样，也是包含所有的节点
上一个兄弟节点

2、node.previousSibling 得到下一个兄弟节点

    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

下一个兄弟元素节点（有兼容性问题）

3、node.nextElementSibling:返回当前元素下一个兄弟元素节点，找不到则返回null（有兼容性问题）

上一个兄弟元素节点（有兼容性问题）

4、node.previousElementSibling：previousElementSibling返回当前元素上一个兄弟节点，找不到返回null（有兼容性问题）

兼容性解决方案：自己封装一个兼容性函数

   function getNextElementSibling(element) {
      var el = element;
      while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
      }
      return null;
    }

1.3.6. 创建节点

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

1.3.7. 添加节点

1、node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素

2、node.insertBefore(child,指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素

    <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.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>