4.7H5自定义属性

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]);

???

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

下拉菜单案例：

案例分析：

3.兄弟节点

如何解决兼容性问题？

答：自己封装一个兼容性的函数