前言：
今天同学们对“h5 data属性”都比较关怀，大家都想要学习一些“h5 data属性”的相关资讯。那么小编同时在网摘上收集了一些关于“h5 data属性””的相关内容，希望你们能喜欢，姐妹们快快来了解一下吧！4.7 H5自定义属性
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(属性')获取。但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。
1.设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值
2.获取H5自定义属性
1.兼容性获取 element.getAttribute('data-index' );
2. H5新增element.dataset.index或者element.dataset[ "index']
5.节点操作
5.1获取节点操作
5.2节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。
一般地,节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个基本属性。
元素节点nodeType为1属性节点nodeType为2文本节点nodeType为3 ( 文本节点包含文字、空格、换行等)
我们在实际开发中，节点操作主要操作是的元素是节点
5.3节点层级
利用DOM树可以把节点划分为不同层级关系，常见的是父子兄弟层级关系
1.父级节点
node.parentNode
parentNode属性可返回某节点的父节点,注意是最近的一个父节点如果指定的节点没有父节点则返回null
2.子节点
1.parentNode.childNodes (标准)
2.非标准 浏览器都支持（实际开发常用）
2.子节点
5. parentNode.firstElementChild //返回第一个子元素节点，找不到则返回null
6.parentNode.lastElementChild; //返回最后一个子元素节点，找不到则返回null
注意：这两个方法有兼容性问题，IE9以上才支持。
实际开发中, firstChild和lastChild 包含其他节点,操作不方便,而firstElementchild和
lastElementChild又有兼容性问题,那么我们如何获取第一个子元素节点或最后-个子元素节点呢?
3.实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]); console.log(ol.children[ol.children.length -1]);<body> <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.parentNode.firstElementChild 返回第一个子元素节点 console.log(ol.firstElementChild); console.log(ol.lastElementChild); //3.实际开发的写法 既没有兼容性问题又返回第一个子元素 console.log(ol.children[0]); console.log(ol.children[ol.children.length -1]); </script>下拉菜单案例：
案例分析：
<script> // 1. 获取元素 var nav = document.querySelector('.nav'); var lis = nav.children; // 得到4个小li // 2.循环注册事件 for (var i = 0; i < lis.length; i++) { lis[i].onmouseover = function() { this.children[1].style.display = 'block'; } lis[i].onmouseout = function() { this.children[1].style.display = 'none'; } } </script>3.兄弟节点
如何解决兼容性问题？
答：自己封装一个兼容性的函数
标签： #h5 data属性
