js操作dom方法

DOM节点获取

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s
parentNode（父节点）、nextSibling、nextElementSibling、previousSibling、previousElementSibling（兄弟节点）
firstChild、firstElementChild、lastChild、lastElementChild（子节点）、childNodes（子节点）、chidren（子元素节点）

DOM节点操作

document.createElement("标签名") // 创建标签
父节点.appendChild(新的子节点);
父节点.insertBefore(新的子节点,作为参考的子节点);
父节点.removeChild(子节点); // node1.parentNode.removeChild(node1);
要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。
要复制的节点.cloneNode(true); //既复制节点本身，也复制其所有的子节点

设置节点的属性
（1）获取属性

<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
元素节点.属性;
元素节点[属性];
元素节点.getAttribute("属性名称");
var myNode = document.getElementsByTagName("img")[0];
myNode.className
myNode.getAttribute("class")

（2）设置属性

myNode.src = "images/2.jpg"   //修改src的属性值
myNode.setAttribute("src","images/3.jpg");

（3）删除属性
元素节点.removeAttribute(属性名);