07_JavaScript自定义属性和节点操作-白红宇

07_JavaScript自定义属性和节点操作

阅读量：282 次

发布时间：2019-03-01

本文共 1844 字，大约阅读时间需要 6 分钟。

1. 排他操作

1.1 排他思想

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

所有元素全部清除样式（干掉其他人）

给当前元素设置样式（留下我自己）

注意顺序不能颠倒，首先干掉其他人，再设置自己

1.2 案例：百度换肤

在这里插入图片描述

2. 自定义属性操作

2.1. 获取属性值

在这里插入图片描述

2.2. 设置属性值

在这里插入图片描述

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

2.3. 移出属性

在这里插入图片描述

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

2.4. 案例：tab栏

在这里插入图片描述

2.5. H5自定义属性

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

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

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

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

在这里插入图片描述

3. 节点操作

3.1. 节点概述

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

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

在这里插入图片描述

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

在这里插入图片描述

3.2. 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

在这里插入图片描述

3.3. 父级节点

在这里插入图片描述

×

3.4. 子节点

所有子节点

在这里插入图片描述

子元素节点

在这里插入图片描述


           
    我是li
        
    我是li
        
    我是li
        
    我是li

第1个子节点

在这里插入图片描述

最后1个子节点

在这里插入图片描述

第1个子元素节点

在这里插入图片描述

最后1个子元素节点

在这里插入图片描述

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

在这里插入图片描述


           
    我是li1
        
    我是li2
        
    我是li3
        
    我是li4
        
    我是li5

3.6. 兄弟节点

下一个兄弟节点

在这里插入图片描述

上一个兄弟节点

在这里插入图片描述


   
    我是div
   
    我是span

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

在这里插入图片描述

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

在这里插入图片描述

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