节点操作

获取元素通常使用两种方式
1.利用DOM提供的方法获取元素(逻辑性不强，繁琐)
2.利用节点层级关系获取元素(逻辑性强，兼容稍差)

节点概述

网页中所有内容都是节点(标签，属性，文本，注释等)，在DOM中，节点使用node表示

HTML DOM树中的所有节点均通过js进行访问，所有HTML元素(节点)均可被修改，也可以创建或者删除

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

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 (文本节点包括文字，空格，换行等)

我们在实际开发中，节点操作主要操作的是元素节点

父节点


// 获取父节点
  Element.parentNode;

子节点


// 获取所有的子节点 包含元素节点，文本节点等等
  Element.childNodes;

// 获取所有的子元素节点，也是我们实际开发常用的
  Element.children;

// 获取第一个子节点不管是文本节点还是元素节点
  Element.firstchild;

// 获取最后一个子节点不管是文本节点还是元素节点
  Element.lastChild;

// 获取第一个子( 元素 )节点(不包括文本) ie9以上才支持
  Element.firstElementChild;

// 获取最后一个子( 元素 )节点(不包括文本) ie9以上才支持
  Element.lastElementChild;


  Ps: 实际开发中比较常见的写法：
		 获取ul子元素的第一个
		" ul.children[0]"
		获取ul子元素的最后一个
		"ul.children[ul.length - 1]";

兄弟节点


// 下一个兄弟节点 包含元素节点或者 文本节点等等
  Element.nextSibling

// 下一个兄弟节点 包含元素节点或者 文本节点等等
  Element.previousSibling

// 得到下一个兄弟元素节点 ( 不包括文本 )
  Element.nextElementSibling

//  得到上一个兄弟元素节点 ( 不包括文本 )
 Element.previousElementSibling

创建

// 创建元素节点	
  let li = document.createElement( 'li' );  // 创建一个 li 标签 	创建的标签需要附加给父元素

Ps：第一步：我们需要创建一个标签 	
       第二步：把新创建的标签追加给想要添到的父标签里面

插入节点（追加）

插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode：指定追加的节点。


插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode：指定追加的节点。

// 附加标签的语法： 父元素节点.appendChild( 要附加的变量名 );  也就是上面我们创建元素的变量名
  ul.appendChild ( li );

删除


// 删除元素节点	
  Element.removeChild(child);

Ps：第一步： 我们需要获取要删除的元素节点	
       第二步：删除我们获取过来的元素节点

修改

主要修改DOM的元素属性，DOM元素的内容，属性，表单的值等

修改元素的属性：src、href、title等
修改普遍元素的内容：innerHTML、innerText
修改表单元素：value、type、disabled等
修改元素样式：style、className

克隆节点


// 克隆节点
  Element.cloneNode();

Ps：克隆节点分为 浅拷贝和深拷贝
	Element.cloneNode();

深拷贝/浅拷贝：

取决于括号中的值如果括号为空或者里面是false那么只复制标签不复制里面的内容也就是我们统称为 “浅拷贝”。
如果括号里的值为 true ，复制标签复制里面的内容，也就是我们统称为的深拷贝。

DOM 节点操作常用的语句