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.兄弟节点
如何解决兼容性问题？
答：自己封装一个兼容性的函数