js元素获取（增删改查）

获取元素

1. 获取父元素(离子元素最近的父亲)

1. 子元素.parentNode

1. 获取子元素

获取全部子元素

1. parentNode.childNodes(标准，若要获得元素节点 需要专门处理 很麻烦)
2. parentNode.children(非标准、兼容性有要求 推荐使用)
     获取第一个和最后一个子元素

获取第一个

1. parentNode.firstElementChild

获取最后一个

1. parentNode.lastElementChild

实际开发写法

1. parentNode.children[0]

1. 获取兄弟节点

1. node.nextElementSibling(返回下一个兄弟节点)
2. node.previousElementSibling(返回上一个兄弟节点)

1. 创建节点

1. Document.createElement(‘tagName’)

5.添加节点

1. node.appendChild(child) 后面追加元素

Node （父级） child（子级）

1. Node.inserBefore(child,指定元素)

 ol.insertBefore(lili, ol.children[0])

页面中要添加一个元素

首先要 1.创建一个元素 2.然后添加！

6.删除节点

Node.removeChild(child)

ol.removeChild(ol.children[0])

 this.disabled = true;//禁用条件

7.复制节点

Node.cloneNode()

括号里面 如果为空或者为false 是浅拷贝，不复制里面内容

如果括号里为true 则是深拷贝 复制里面的内容

1. 三种动态创建元素区别

1. Document.write() 在文本中写入一个标签 （用的较少） 创建元素

1.直接将内容写入页面的内容流，但是文档执行完毕，会导致页面重绘，重新开启新的页面

1. Element.innerHTML  创建元素
2. Document.createElement()

InnerHTML和createElement(‘a’)区别

区别在于执行时间不同

拼接字符串用的时间较长

1. innerHTML是讲内容写入某个DOM节点，不会导致页面全部重绘
2. InnerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

采用数组的形式

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