JS学习笔记之DOM元素节点的操作

获取元素通常使用的两种方式

1、利用DOM提供的方法获取元素

1.document.getElementById();
2.document.getElementByTagName();
3.document.getElementByClassName();
(H5新增)
4.document.querySelector(); // 获取符合条件的第一个元素
5.document.querySelectorAll(); // 获取所有

2、利用节点层次关系获取元素

利用父子兄节点关系获取元素，操作更简单，DOM中节点的都可以通过JS访问，所有HTML元素（节点）都可被修改，创建或删除。
节点：元素节点、属性节点、文本节点
节点属性：至少拥有nodeType(节点类型)、**nodeName(节点名称)和nodeValue(节点值)**这三个基本属性。

• 元素节点：nodeType = 1
• 属性节点：nodeType = 2
• 文本节点：nodeType = 3

3、节点层级操作

节点层级：父子兄层级关系

1、获取父级节点
node.parentNode; // (如果找不到父节点返回null)

2、获取子节点

（1）获取所有子节点，包括元素节点和文本节点。返回一个伪数组；

parentNode.childNodes; // 标准

（2）获取所有子元素节点，返回伪数组。

parentNode.children; // 非标准，但是开发常用

3、获取第一个子元素和最后一个子元素

（1）获取的是子节点（有可能获取上文本节点）：firstChild

parentNode.firstChild;
parentNode.lastChild;

（2） 获取元素节点：firstElementChild

parentNode.firstElementChild;
parentNode.lastElementChild;

以上两种方法存在兼容性问题，IE9以上才支持

（3）通过children角标的形式获取元素节点

parentNode.children[0]; // 获取第一个子元素节点
parentNode.children[parentNode.children.length-1]; // 获取最后一个子元素节点

4、兄弟节点
（1）nextSibling

node.nextSibling; // 获取下一个兄弟节点
node.previousSibling; // 获取上一个兄弟节点

（2）nextElementSibling

node.nextElementSibling; // 获取下一个兄弟元素节点
node.previousElementSibling; // 获取上一个兄弟元素节点

4、创建、添加、删除节点

1、创建节点

document.createElement('tagName');

这个方法创建由tagName指定的HTML元素。因为这些元素本来不存在，是根据需求动态生成的，所以也称之为动态创建元素节点。

2、添加节点
（1）追加节点

node.appendChild(child); //node是父级， child是子级。

var ul = document.createElement('ul');
var li = document.createElement('li');
ul.appendChild(li);

（2）将节点插入至指定节点前面

node.insertBefore(child, 指定元素);

ul = document.querySelector('ul');
var li2 = document.createElement('li');
ul.insertBefore(li2, ul.children[0]);

3、删除节点
node.removeChild(child);