1. H5自定义属性
目的:用于保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
由于有些自定义属性很容易引起歧义,难以判断是元素内置属性还是自定义属性。
H5给我们新增了自定义属性:
1.1 设置H5自定义属性
H5规定自定义属性 date-开头作为属性名并且赋值
如:
<div date-index = "1" ></div>
- 兼容性获取
element.getAttribute('data-index')
- H5新增方法
element.dataset.index
或element.dataset['index']
获取。(ie11或以上才能使用) - 如果自定义属性里面有多个链接的单词,则使用驼峰命名法获取。
Warning
对于 element.dataset.index
和 element.dataset['index']
方法,注意 index
和 data-index
中的要对应。
<body>
<div getTime="20" data-index="2" data-list-name="lili"></div>
<script>
var div = document.querySelector('div');
console.log(div.getTime); //undefine
console.log(div.getAttribute('getTime')); //20
console.log(div.getAttribute('data-list-name')); //这种方法直接这样写
div.setAttribute('data-time', 20);
// H5新增的获取自定义属性的方法
// dataset是一个集合,里面存放了所有以data开头的自定义属性
console.log(div.dataset); //有两个 2和20
console.log(div.dataset.index); //2 (取其中的index)
// 如果自定义属性里有多个单词,新增方法用驼峰法获取
console.log(div.dataset.listName); //lili
console.log(div.dataset['listName']); //lili 也可以这样表示
</script>
</body>
2. 节点操作
2.1 为什么学习节点操作
获取元素通常使用两种方式:
-
利用DOM提供的方法获取元素,缺点:逻辑性不强、繁琐
document.getElementByld()
document.getElementsByTagName()
document.querySelector()
-
利用 节点层级关系 获取元素
- 利用父子兄节点关系获取元素
- 优点:逻辑性强
- 缺点:兼容性稍差
两种方式都可以获取节点,但节点操作更简单
2.2 节点概述
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用 node
来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。
一般地,节点至少拥有 nodeType
(节点类型)、nodeName
(节点名称)和 nodeValue
(节点值)这三个基本属性。
三种基本节点类型:
- 元素节点
nodeType
为1
- 属性节点
nodeType
为2
- 文本节点
nodeType
为3
(文字、空格、换行)
实际开发中,主要操作的还是元素节点。
2.3 节点层级
2.3.1 父级节点
获取离元素最近的父节点,若找不到则返回 null
。
node.parentNode