自定义属性目的 为了保存并使用数据，有些数据可以保存在页面中而不用保存到数据库中。
设置H5自定义属性 H5规定自定义属性data开头做为属性名并且赋值 获取H5自定义属性 dataset是一个集合，里面存放了所有以data-开头的自定义属性，只支持ie11以上 若出现data-list-name=‘andy’这种自定义属性，则data.listName引用(驼峰命名)
获取元素通常使用两种方式 1.利用DOM提供的方法获取元素
document.getElementById()document.getElementByTagName()document.querySelector() 等逻辑性不强，繁琐2.利用节点层级关系获取元素
利用父子兄节点关系获取元素逻辑性强，但是兼容性较差节点概述 一般地，节点至少拥有节点类型(nodeType)，节点名称(nodeName)，节点值(nodeValue)这三个基本属性。
元素节点为 nodeType 1属性节点为 nodeType 2文本节点为 nodeType 3(文本节点包含文字、空格、换行等)节点层级 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。 1.父级节点
node.parentNode parentNode属性可返回某节点的父节点，注意是最近的一个父节点如果指定的节点没有父节点则返回null 2.子节点 ①parentNode.childNodes (标准)parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。 注意：返回值里面包括了所有子节点，包括元素节点、文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用chilsNodes
②parentNode.children(非标准)parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(这个是我们重点掌握的) 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
③parentNode.firstChildfirstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点
④parentNode.lastChildlastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点
⑤parentNode.firstElementChild ⑥parentNode.lasrElementChild返回第一个(最后一个)元素节点，找不到则返回null 注意：这两个方法有兼容性问题，IE9以上才支持 实际开发的写法，既没有兼容性问题又返回第一个子元素
parentNode.children[0] //取第一个元素节点 parentNode.children[parentNode.children.length - 1] //取最后一个元素节点案例分析
<body> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> <li> <a href="#">微博</a> <ul> <li> <a href="">私信</a> </li> <li> <a href="">评论</a> </li> <li> <a href="">@我</a> </li> </ul> </li> </ul> <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> </body>3.兄弟节点
①node.nextSibling //取下一个节点 ②node.previousSibling //取上一个节点nextSibing返回当前元素的下一个(上一个)兄弟节点，找不到则返回null。同样，也是包含所有的节点
③node.nextElementSibling //取下一个元素节点 ④node.previousElementSibling //取上一个元素节点返回当前元素下一个(上一个)兄弟元素节点，找不到则返回null。 注意：这两个方法有兼容性问题，IE9以上才支持 通过封装一个兼容性的函数 4.创建节点
document.createElement('tagName')doucument.createElement()方法创建由tagName 指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也成为了动态创建元素节点。 添加节点
node.appendChild(child) //后面追加元素 node.insertBefore(child,指定元素) //指定元素可为node.children[0]node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾（指定子节点前面）。类似于css里面的after(befor)伪元素。
案例分析
<body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> // 1. 获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); // 2. 注册事件 btn.onclick = function() { if (text.value == '') { alert('您没有输入内容'); return false; } else { // console.log(text.value); // (1) 创建元素 var li = document.createElement('li'); // 先有li 才能赋值 li.innerHTML = text.value; // (2) 添加元素 // ul.appendChild(li); ul.insertBefore(li, ul.children[0]); } } </script> </body>5.删除节点
node.removeChild(child) //ul.removeChild(ul.children[0])node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。
案例分析
<body> <textarea name="" id=""></textarea> <button>发布</button> <ul> </ul> <script> // 1. 获取元素 var btn = document.querySelector('button'); var text = document.querySelector('textarea'); var ul = document.querySelector('ul'); // 2. 注册事件 btn.onclick = function() { if (text.value == '') { alert('您没有输入内容'); return false; } else { // console.log(text.value); // (1) 创建元素 var li = document.createElement('li'); // 先有li 才能赋值 li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"; // (2) 添加元素 // ul.appendChild(li); ul.insertBefore(li, ul.children[0]); // (3) 删除元素 删除的是当前链接的li 它的父亲 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // node.removeChild(child); 删除的是 li 当前a所在的li this.parentNode; ul.removeChild(this.parentNode); } } } } </script> </body>6.复制节点(克隆节点)
node.cloneNode() //ul.children[0].cloneNode(true) //如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点，克隆后需要添加节点。node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点。
案例分析
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #333; } thead tr { height: 40px; background-color: #ccc; } </style> </head> <body> <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> // 1.先去准备好学生的数据 var datas = [{ name: '魏璎珞', subject: 'JavaScript', score: 100 }, { name: '弘历', subject: 'JavaScript', score: 98 }, { name: '傅恒', subject: 'JavaScript', score: 99 }, { name: '明玉', subject: 'JavaScript', score: 88 }, { name: '大猪蹄子', subject: 'JavaScript', score: 0 }]; // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行 var tbody = document.querySelector('tbody'); for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr // 1. 创建 tr行 var tr = document.createElement('tr'); tbody.appendChild(tr); // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象 datas[i] for (var k in datas[i]) { // 里面的for循环管列 td // 创建单元格 var td = document.createElement('td'); // 把对象里面的属性值 datas[i][k] 给 td // console.log(datas[i][k]); td.innerHTML = datas[i][k]; tr.appendChild(td); } // 3. 创建有删除2个字的单元格 var td = document.createElement('td'); td.innerHTML = '<a href="javascript:;">删除 </a>'; tr.appendChild(td); } // 4. 删除操作 开始 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode) } } // for(var k in obj) { // k 得到的是属性名 // obj[k] 得到是属性值 // } </script> </body> </html>8.三种动态创建元素区别
document.write()element.innerHTMLdoucument.createElement() 区别