js 中操作dom

JavaScript的三个主要组成部分是：ECMAScript(核心)，DOM（文档对象模型），BOM（浏览器对象模型）。

DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。
属性节点和文本节点都属于元素节点的子节点。 因此操作时，需先选中元素节点，再修改属性和文本。

具体的HTML代码如下图

HTML参照图片

DOM元素节点操作

1. 使用getElement系列方法：

//通过ID来查看元素属性 
var li = document.getElementById("first");  
//通过类名来查看元素属性
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性
var lis3 = document.getElementsByTagName("li");

注意事项：

• ID不能重名，如果ID重复，只能取到第一个。
• 获取元素节点时，必须等到DOM树加载完成后才能获取。两种处理方式： a.将JS写在文档最后； b.将代码写入window.onload函数中；
• 通过getElements系列取到的为数组格式，操作时必须取到其中的每一个元素，才能进行操作，而不能直接对数组进行操作。
  document.getElementsByTagName("li")[0].click = function(){}
• 这一系列方法，也可以先选中一个DOM节点，在从选中的DOM节点中，选择需要的节点：document.getElementById("div1").getElementsByTagName("li");

2. 通过querySelector系列方法

// 传入一个选择器名称，返回第一个找到的元素。 通常用于查找ID：
var dq1 = document.querySelector("#id");
// 传入一个选择器名称，以数组格式返回所有元素，这种方法比较全能。
var dqs1 = document.querySelectorAll("#div1 li");

3. 层次节点操作

document.body.childNodes // 获取当前节点body的所有子节点（包括元素节点和文本节点）。
document.body.children //获取当前节点的所有元素子节点（不包含文本节点）。
document.body.parentNode // 获取当前节点的父节点。
firstChild //获取第一个子节点，包括回车等文本节点；
firstElementChild //获取第一个元素节点。 (不含文本节点)；
lastChild： //获取最后一个子节点，包括回车等文本节点；
lastElementChild // 获取最后一个子节点，(不含文本节点)；
previousSibling // 获取当前节点的前一个兄弟节点，包括文本节点；
previousElementSibling // 获取当前节点的前一个元素兄弟节点；
nextSibling //获取当前节点的后一个兄弟节点，包括文本节点；
nextElementSibling //获取当前节点的后一个元素兄弟节点；
.attributes  //获取当前节点的所有属性节点。 返回数组格式。

//【创建并新增节点】
document.createElement("标签名")：// 创建一个新节点，并将创建的新节点返回。
需要配合.setAttribute() // 为新节点设置属性。 
父节点.insertBefore(新节点,目标节点)： // 在父节点中，将新节点插入到目标节点之前。
父节点.appendChild(新节点)：// 在父节点的内部最后，插入一个新节点。 
源节点.cloneNode(true)： // 克隆一个节点。
//传入true表示克隆源节点以及源节点的所有子节点；
//传入false或不传，表示只克隆当前节点，而不克隆子节点。

//【删除、替换节点】
父节点.removeChild(子节点)： //从父节点中，删除指定子节点。
 父节点.replaceChild(新节点,老节点)： //从父节点中，用新节点替换老节点。