js 操作DOM · 要努力

DOM基础 - 获取 DOM节点 1，获取子节点： childNodes nodeType（节点类型）------ children （高版本浏览器） 2，获取父节点： parentNode 3，获取元素在页面上的实际位置: offset Parent 4，获取首尾子节点，有兼容性问题 firstChild、firstElementChild-------lastChild 、lastElementChild 5，获取兄弟节点 , 有兼容性问题 nextSibling、nextElementSibling------previousSibling、previousElementSibling - 操纵元素属性，元素属性操作第一种：oDiv.style.display=“block”; 第二种：oDiv.style[“display”]=“block”; 第三种：Dom方式 - DOM方式操作元素属性获取：getAttribute(名称) 设置：setAttribute(名称, 值) 删除：removeAttribute(名称) - createElement（标签名）—— 创建节点父级.insertBefore（子级，子级位置）—— 可应用于倒序插入父级.appendChild（子级）——应用于尾部插入 ![](https://img.kancloud.cn/04/eb/04ebf33d88da4bad72fbd3d129275f1c_665x353.png) ## 1，DOM节点的获取 ``` var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 var arr1 = document.getElementsByTagName("div1"); //方式二：通过标签名获得标签数组，所以有s var arr2 = document.getElementsByClassName("hehe"); //方式三：通过类名获得标签数组，所以有s ``` ## DOM访问关系的获取通过DOM节点之间的相对关系对它们进行访问节点的访问关系，是以**属性**的方式存在的。JS中的**父子兄**访问关系 ![](https://img.kancloud.cn/f7/4e/f74e6b83d5cf8e3a1ab5b75b0d157d80_479x198.png) ![](https://img.kancloud.cn/79/0c/790c19c32d4631d6d9075f0ab3a22557_748x203.png) ## 2， DOM节点操作节点的**访问关系**都是**属性**；节点的**操作**都是**函数**（方法） ### 创建节点 ~~~ 新的标签(元素节点) = document.createElement("标签名"); ~~~ ### 插入节点 - 方式1：父节点的最后插入一个新的子节点。 ~~~ 父节点.appendChild(新的子节点); ~~~ - 方式2： ~~~ 父节点.insertBefore(新的子节点,作为参考的子节点); ~~~ * 在参考节点前插入一个新的节点。 * 如果参考节点为null，那么他将在父节点最后插入一个子节点 ### 删除节点 - **用父节点删除子节点**。必须要指定是删除哪个子节点。 ~~~ 父节点.removeChild(子节点); ~~~ - 删除自己这个节点 ~~~ node1.parentNode.removeChild(node1); ~~~ ### 复制节点（克隆节点） ~~~ 要复制的节点.cloneNode(); //括号里不带参数和带参数false，效果是一样的。要复制的节点.cloneNode(true); ~~~ * 不带参数/带参数false：只复制节点本身，不复制子节点。 * 带参数true：既复制节点本身，也复制其所有的子节点。 # 3，设置节点的属性 #### 1、获取节点的属性值 ~~~ 元素节点.属性; 元素节点[属性]; ~~~ ``` <body> <img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1"> <script type="text/javascript"> var myNode = document.getElementsByTagName("img")[0]; console.log(myNode.src); console.log(myNode.className); //注意，是className，不是class console.log(myNode.title); console.log("------------"); console.log(myNode["src"]); console.log(myNode["className"]); //注意，是className，不是class console.log(myNode["title"]); </script> </body> ``` #### 2、设置节点的属性值 * 方式1举例：（设置节点的属性值） ~~~ myNode.src = "images/2.jpg" //修改src的属性值 myNode.className = "image2-box"; //修改class的name ~~~ * 方式2：（推荐） ~~~ 元素节点.setAttribute(属性名, 新的属性值); myNode.setAttribute("src","images/3.jpg"); ~~~ #### 3、删除节点的属性 ~~~ 元素节点.removeAttribute(属性名); myNode.removeAttribute("class"); ~~~