DOM节点获取
var div1 = document.getElementById(\"box1\"); //方式一:通过id获取单个标签var arr1 = document.getElementsByTagName(\"div1\"); //方式二:通过 标签名 获得 标签数组,所以有svar arr2 = document.getElementsByClassName(\"hehe\"); //方式三:通过 类名 获得 标签数组,所以有sparentNode(父节点)、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.classNamemyNode.getAttribute(\"class\")
(2)设置属性
myNode.src = \"images/2.jpg\" //修改src的属性值myNode.setAttribute(\"src\",\"images/3.jpg\");
(3)删除属性
元素节点.removeAttribute(属性名);