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); //undefineconsole.log(div.getAttribute(getTime)); //20console.log(div.getAttribute(data-list-name)); //这种方法直接这样写div.setAttribute(data-time, 20);// H5新增的获取自定义属性的方法// dataset是一个集合,里面存放了所有以data开头的自定义属性console.log(div.dataset); //有两个 2和20console.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
DOM—操作元素(H5自定义属性) 节点操作(子 父 兄弟节点 创建 添加节点 删除节点 复制节点)
如果觉得《DOM—操作元素(H5自定义属性) 节点操作(子 父 兄弟节点 创建 添加节点 》对你有帮助,请点赞、收藏,并留下你的观点哦!