JS-20-元素 / 属性 增删改查

一、JavaScript-元素增删改查

1.创建节点
let oSpan = document.createElement("span");

2.添加节点
注意点: appendChild方法会将指定的元素添加到最后;

// let oDiv = document.querySelector("div");
// oDiv.appendChild(oSpan) //将oSpan中的元素添加到oDivd元素的最后；

3.插入节点

    // let oSpan = document.createElement("span");
    // let oDiv = document.querySelector("div");
    // let oH1 = document.querySelector("h1");

oDiv.insertBefore(oSpan, oH1);//将oSpan中的元素加在oH1元素的前面；

4.删除节点
注意点: 在js中如果想要删除某一个元素, 只能通过对应的父元素来删除;

  // oSpan.parentNode.removeChild(oSpan);
 // oDiv.parentNode.removeChild(oDiv);

5.克隆节点
注意点: cloneNode方法默认不会克隆子元素, 如果想克隆子元素需要传递一个true;

  let oDiv = document.querySelector("div");
  // let newDiv =  oDiv.cloneNode();
  let newDiv =  oDiv.cloneNode(true);
  console.log(newDiv);

---

二、JavaScript-元素属性增删改查

<img src="images/1.jpg" alt="我是alt222" title="我是title" nj="666">

无论是通过document创建还是查询出来的标签,系统都会将元素包装成一个对象返回给我们 ，系统在包装这个对象的时候会自动将元素的属性都包装到这个对象中, 所以只要拿到这个对象就可以拿到标签属性,操作标签属性；

1.如何获取元素属性
2.如何修改元素属性
3.如何新增元素属性
4.如何删除元素属性

 // let oImg = document.querySelector("img");
 // let oImg = document.createElement("img");
    console.dir(oImg);

1.如何获取元素属性

 let oImg = document.querySelector("img");
 // console.log(oImg.alt);
 // console.log(oImg.getAttribute("alt"));获取alt的值
 // 注意点: 通过  对象.属性  名称的方式无法获取到自定义属性的取值
 //         通过getAttribute方法可以获取到自定义属性的取值
 console.log(oImg.nj);//无法获取属性nj的值
 console.log(oImg.getAttribute("nj"));//可以获取值
 

2.如何修改元素属性

   let oImg = document.querySelector("img");
   // oImg.title = "新的title";
   // oImg.setAttribute("title", "新的title222");
   // 注意点和获取元素属性一样
   // oImg.nj = "123";
   oImg.setAttribute("nj", "123");
   

3.如何新增元素属性

   let oImg = document.querySelector("img");
   // oImg.it666 = "itzb";
   // 注意点: setAttribute方法如果属性不存在就是新增, 如果属性存在就是修改
   oImg.setAttribute("it666", "itzb");

4.如何删除元素属性

   let oImg = document.querySelector("img");
   // oImg.alt = "";
   // oImg.removeAttribute("alt");
   // 注意点和获取元素属性一样
   // oImg.nj = "";
   oImg.removeAttribute("nj");

---

-End