jsDOM

4.6 自定义属性的操作

　　1.获取属性值

　　　　element.属性  获取属性值

　　　　element.getAttribute('属性') 

　　区别

　　　　element.属性 获取内置属性值

　　　　element.getAttribute('属性')  主要获取自定义属性 

　　2.设置属性值

　　　　element.属性='值'  设置内置属性值

　　　　element.setAttribute('属性','值') 

　　3.移除属性　　

　　　　element.removeAttribute('属性')

4.7 H5自定义属性

　　自定义属性的目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

　　自定义属性获取是通过getAttribute('属性')获取

　　但是有些自定义属性容易引起歧义，不容易判断是元素的内置属性还是自定义属性

　　H5给我们新增了兹议定属性

　　H5规定自定义属性以data-开头  <div   data-index='1'></div>

　　H5新增  element.dataset.index 或　 element.dataset[‘index’]　

5.1节点概述

　　一般地节点至少拥有nodeType(节点类型)、nodeName(几点名称) 和nodeValue(节点值)这个三个基本属性

　　元素节点nodeType 为1

　　属性节点nodeType 为2

　　文本节点nodeType 为3（文字 空格 换行都算文本节点）

　　节点操作主要操作元素节点

 5.2节点层级　　

　　利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

　　1.父级几点

　　　　1、node.parentNode

　　node.parentNode 属性可返回某个节点的父节点,注意是最近的一个父节点

　　如果指定的节点没有父节点则返回null

　　2.子节点

　　　1、parentNode.childNodes(标准)

　　　　parentNode.childNodes返回包含指定节点的子节点的集合，该机器为即使更新的集合

　　　　注意：返回的值里面包含了说要字节点，包括元素节点，文本节点等

　　　　　　如果只想要获取里面的元素节点 则需要专门的处理 所有我们一般不提倡使用childNodes

　　　　

 　　　　2、parentNode.children(非标准)

　　　　3、parentNode.firstChild 

　　　　　　firstChild 返回第一个子节点 找不到则返回null。同样也是包含所有的节点

　　　　parentNode.lastChild 

　　　　lastChild 返回最后一个子节点

　　　　4、parentNode.firstElementChild 

　　　　firstElementChild 返回第一个子元素节点

　　　　5、parentNode.lastElementChild

　　　　lastElementChild返回最后一个子元素节点

　　　　lastElementChild有兼容性问题 ，实际开发中我们使用 parentNode.children[0] (第一个子元素节点) parentNode.children[parentNode.children.length-1] (最后一个子元素节点)

　　3.兄弟节点

　　　　1、node.nextSibling

　　　　　　　　node.nextSibling返回当前元素的下一个兄弟节点（包含元素节点 文本节点等）找不到就返回null

　　　　

　　　　2、node.previousSibling

　　　　　　　　node.nextSibling返回当前元素的下一个兄弟节点（包含元素节点 文本节点等）找不到就返回null

　　　　3、node.nextElementSibling

　　　　　　　　node.nextSibling返回当前元素的下一个元素兄弟节点）找不到就返回null

　　　　

　　　　4、node.previousElementSibling

　　　　　　　　node.nextSibling返回当前元素的下一个元素兄弟节点（找不到就返回null

　　　　　　

 　　3和4存在兼容性问题

　　5.4创建节点

　　　　1、document.createElement(‘tagName’)

　　　　　　document.createElement()方法创建由tagName指定的html元素。 因为元素原先不存在，是根据我们需求动态生产的，错误我们也称为动态创建元素节点　

　　　添加节点

　　　　1、node.appendChild(child)

　　　　　　node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里的afret伪元素      node是父级

　　　　2、node.insertBefore(child,指定元素）

　　　　　　将一个节点添加到父节点的指定子节点前面

　　5.5删除节点

　　　　1、node.removeChild(child)

　　　　　　node.removechild()方法从dom中删除一个子节点，返回删除的节点

　　5.6复制节点

　　　　1、node.cloneNode()

　　　　　　node.cloneNode()方法返回调用该方法的节点的一个副本

　　　　　　注意：如果参数为空或者是FALSE，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点

　　5.7三种动态创建元素区别

　　　　document.write()

　　　　element.innerHTML

　　　　document.createElement()

　　　　区别

　　　　　　1、document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

　　　　　　2、innerHTML是将内容写入某个DOM节点不会导致全波重绘。  创建多个元素效率较低，但是采用数组的形式效率更高，结构比较复杂

　　　　　　3、createElement() 创建多个元素效率稍低一点点，但是结构更加清晰