博客
关于我
07_JavaScript自定义属性和节点操作
阅读量:282 次
发布时间:2019-03-01

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

目录

1. 排他操作

1.1 排他思想

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

  1. 所有元素全部清除样式(干掉其他人)

  2. 给当前元素设置样式 (留下我自己)

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

                    

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 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?

在这里插入图片描述

  1. 我是li1
  2. 我是li2
  3. 我是li3
  4. 我是li4
  5. 我是li5

3.6. 兄弟节点

下一个兄弟节点

在这里插入图片描述

上一个兄弟节点

在这里插入图片描述

我是div
我是span

下一个兄弟元素节点(有兼容性问题)

在这里插入图片描述

上一个兄弟元素节点(有兼容性问题)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

3.7. 创建节点

在这里插入图片描述

3.8. 添加节点

在这里插入图片描述

  • 123

3.9. 案例:简单版发布留言

在这里插入图片描述

在这里插入图片描述

            

转载地址:http://nxux.baihongyu.com/

你可能感兴趣的文章
mysql 记录的增删改查
查看>>
MySQL 设置数据库的隔离级别
查看>>
MySQL 证明为什么用limit时,offset很大会影响性能
查看>>
Mysql 语句操作索引SQL语句
查看>>
MySQL 误操作后数据恢复(update,delete忘加where条件)
查看>>
MySQL 调优/优化的 101 个建议!
查看>>
mysql 转义字符用法_MySql 转义字符的使用说明
查看>>
mysql 输入密码秒退
查看>>
mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
查看>>
mysql 通过查看mysql 配置参数、状态来优化你的mysql
查看>>
mysql 里对root及普通用户赋权及更改密码的一些命令
查看>>
Mysql 重置自增列的开始序号
查看>>
mysql 锁机制 mvcc_Mysql性能优化-事务、锁和MVCC
查看>>
MySQL 错误
查看>>
mysql 随机数 rand使用
查看>>
MySQL 面试题汇总
查看>>
MySQL 面试,必须掌握的 8 大核心点
查看>>
MySQL 高可用性之keepalived+mysql双主
查看>>
MySQL 高性能优化规范建议
查看>>
mysql 默认事务隔离级别下锁分析
查看>>