41-DOM节点

DOM中的节点

• dom就是书写html的每一个标签 也叫文档对象模型 其目的就是为了通过js对html的一些元素
  进行操作修改
• 解析的过程：
  在html加载完毕后 渲染引擎会自动生成一个DOM树 就是有一个个的标签(dom)组成的 我们可以通过特定的
  指令来获取dom(标签) 才能对其进行一些列的操作

在每一个dom中又存在三个节点：

1. 元素节点: （HTML标签）
2. 文本节点: （在标签之间的文字）
3. 属性节点: （标签的属性）

节点的操作

1. 创建一个新的节点：
 var 变量名 = document.createElement("新增标签");
//在html创建出一个标签

2. 插入子节点
 1. 父节点dom.appendChild("新增标签")//在末尾插入
 2. 父节点dom.insertBefore("新增标签")//在前面插入  

3. 移除子节点
 父节点dom.removeChild(父节点dom.childNodes[0]);
 //删除父节点下面的某个子节点 需要搭配事件使用
4. 获取父节点
子节点.parentNode
// 获取包含他的父元素节点

5. 获取相邻的兄弟节点
 节点自己.parentNode.children[index]
 //获取自己相邻的兄弟节点

 6. 获取所有的子节点
 父节点.childNodes;//标签和内容都能同时获取
 父节点.children//获取父元素下面的所有子节点得到的是一个集合 可以通过索引获取
//获取父元素下面的所有子元素节点得到的是数组的形式

7. 插入节点
父节点.appendChild(新的子节点);//在父节点的最后插入一个新的节点 如相同则替换
父节点.insertBefore(新的子节点,作为参考的子节点);
//在参考节点前插入一个新的节点。如果参考节点为null，那么他将在父节点最后插入一个子节点。

8. 删除节点
  父节点.removeChild(子节点);
//移除指定的节点

9. 复制节点
 要复制的节点.cloneNode()
 //这是一个方法直接函数执行需要复制的节点写在前面就好了
 //默认参数是false不复制标签里面的节点 参数为true是赋值所有的节点标签里面的所有内容

10. 删除节点的属性
  元素节点.removeAttribute(属性名);

关于节点属性的方法

1. 获取节点的属性值

语法格式1：
    元素节点.属性;
    元素节点[属性];

语法格式2：（推荐）
素节点.getAttribute("属性名称");
例子：
    console.log(myNode.getAttribute("class"));   //注意是class，不是className
    console.log(myNode.getAttribute("title"));
方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为DOM节点。推荐方式2。

3. 设置节点的属性值

方式1举例：（设置节点的属性值）
   myNode.src = "images/2.jpg"   //修改src的属性值
   myNode.className = "image2-box";  //修改class的name

方式2：（推荐）
元素节点.setAttribute(属性名, 新的属性值);

举例：（设置节点的属性值）
   myNode.setAttribute("src","images/3.jpg");
   myNode.setAttribute("class","image3-box");
   myNode.setAttribute("id","你好");

3. 删除节点的属性

语法格式：
    元素节点.removeAttribute(属性名);

举例：（删除节点的属性）
    myNode.removeAttribute("class");
    myNode.removeAttribute("id");
名);

举例：（删除节点的属性）
    myNode.removeAttribute("class");
    myNode.removeAttribute("id");