DOM的基本操作与设置

3.1 获取

3.1.1 DOM获取元素

• 通过id名：document.getElementById（“id名”）：具体的实际的标签，获取的时候有就是有，没有就是没有

• 通过TagName:

  • document.getElementsByTagName（“标签名”）:整个文档中，获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签
  • 父元素.getElementsByTagName（“标签名”）:父元素中的,获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签

• 通过ClassName：

  • document.getElementsByClassName（“类名”）:整个文档中，获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签
  • 父元素.getElementsByClassName（“类名”）:父元素中的,获取的是元素集合，使用一定要加下标，动态获取，可以获取到后期添加的标签

• 通过选择器获取（ie8+）

  • document.querySelector(“css选择器”)

  • document.querySelectorAll(“css选择器”)

    //1.通过选择器获取:静态获取，获取的时候有多少就是多少，后期添加都获取不到
    //document.querySelector("选择器"):获取选择器选中标签中的第一个元素
    var oUl = document.querySelector(".list");
    console.log(oUls);
    
    //document.querySelectorAll("选择器"):获取选择器选中的所有标签  节点列表
    var oUls = document.querySelectorAll(".list");
    console.log(oUls);
    console.log(oUls.length);
    
    var oLis = document.querySelectorAll("#list1 li");
    console.log(oLis);
    
    oUl.innerHTML += "<li>吃饭</li>";
    

3.1.2 获取子节点

• 非标准属性：父节点.children（一般用这个）

  //2.获取子节点
  //非标准属性：父节点.children（一般用这个）
  var childs = oUl.children;
  console.log(childs);//HTMLCollection(4)

• 标准属性：父节点.childNodes

  //标准属性：父节点.childNodes
  var childs = oUl.childNodes;
  console.log(childs); //NodeList(9) 

注意：节点并不是单指标签

节点包括：标签节点，文本节点(空格，回车，文字),属性节点–2,注释节点 。。。。。

• 基本属性

  • nodeType：获取节点类型

  • nodeName：获取节点名称

  • nodeValue：操作文本节点内容

    //4.节点属性  nodeType，nodeName，nodeValue
    console.log(childs[0].nodeType); //文本--3
    console.log(childs[1].nodeType); //标签--1
    console.log(childs[3].nodeType); //注释--8
                                     //属性--2
    
    console.log(childs[0].nodeName); //文本--#text
    console.log(childs[1].nodeName); //标签--Li
    console.log(childs[3].nodeName); //注释--#comment
    
    //nodeValue是操作文本节点
    childs[0].nodeValue = "吃饭吗？";
    

3.1.3 获取父元素

• 获取直接父元素：子元素.parentNode

  //2.获取父节点(直接父元素)  子节点.parentNode
  var p = oSpan.parentNode;
  console.log(p);

• 获取定位父元素:子元素.offsetParent,如果没有定位父元素获取到body

   //3.获取定位父节点  子节点.offsetParent，没有定位父元素获取到body
  var oO = oSpan.offsetParent; //
  console.log(oO);

3.1.4 获取兄弟节点

• 首节点：父节点.firstElementChild || 父节点.firstChild
• 尾节点：父节点.lastElementChild || 父节点.lastChild
• 上一个兄弟：参考节点.previousElementSibling ||参考节点.previousSibling
• 下一个兄弟：参考节点.nextElementSibling ||参考节点.nextSibling

3.2 添加节点

3.2.1 创建节点

• 创建标签节点：document.createElement(“标签名”)；

• 创建文本节点：document.createTextNode(“文本内容”)

  //2.创建节点： document.createElement("标签名")
  var cLi = document.createElement("li");
  //cLi.innerHTML = "完成一个项目";
  
  //3.创建文本节点：document.createTextNode("文本内容")
  var text = document.createTextNode("完成两个项目");
  //把文本添加到标签中
  cLi.appendChild(text);

3.2.2 添加节点

• 追加 在父元素的末尾添加 父节点.appendChild(子节点)

  //2.创建节点： document.createElement("标签名")
  var cLi = document.createElement("li");
  cLi.innerHTML = "完成一个项目";
  //1.追加：在父元素的末尾添加  父节点.appendChild(子节点)
  oUl.appendChild(cLi);

• 在某个元素之前添加: 父节点.insertBefore(newChild，refChild)

  //4.在某个元素之前添加: 父节点.insertBefore(newChild，refChild)
  var iLi = document.createElement("li");
  iLi.innerHTML = "不吃饭";
  oUl.insertBefore(iLi,oLi[2]);

注意：添加一个已经存在的标签，发生物理位移

3.3删除节点

• 删除自身：标签.remove（） ie不兼容

• 删除子节点：标签.removeChild(子节点)

   var oUl = document.getElementsByTagName("ul")[0];
  //1.删除标签本身  标签.remove(); 不建议使用，ie不兼容
  //oUl.remove(); 
  
  //2.删除子元素: 父元素.removeChild(子节点)
  oUl.removeChild(oUl.children[2]);

3.4 复制与替换

• 替换：父节点.replaceChilde(newChild，refChild)

  //替换：父节点.replaceChild(newChild,refChild)
  var cDiv = document.createElement("div");
  cDiv.innerHTML = "我是一个小可爱";
  document.body.replaceChild(cDiv,oDiv)

• 复制：被复制的节点.cloneNode(true)

  //复制节点：被复制的节点.cloneNode(boolean)
  //boolean 默认是false:只复制标签没有内容      true：复制标签和内容
  var cloneD = oDiv.cloneNode(true);
  document.body.appendChild(cloneD);

3.5 操作属性节点

• 操作属性

  • 获取：var 变量 = 标签.属性名
  • 设置：标签.属性名 = 属性值

• DOM操作属性节点

  • 获取：标签.getAttribute(“属性名”)
  • 设置：标签.setAttribute(“属性名”,“属性值”)
  • 删除：标签.removeAttribute(“属性名”)

//1.获取id
console.log(oDiv.getAttribute("id"));;
console.log(oDiv.getAttribute("class"));

//2.设置
oDiv.setAttribute("class","active");

//3.删除
oDiv.removeAttribute("id");

//区别：可以获取直接写在行内的自定义属性，删除某个指定的属性
console.log(oDiv.index); //undefined  获取不到直接写在标签上自定义属性
console.log(oDiv.getAttribute("index")); //0