DOM获取元素

1.DOM

DOM：Document Object Model 文档对象模型

节点：node

DOM主要是针对标签的一些操作：获取，添加，修改，删除，替换

1.1 获取

1.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>";
    

1.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 = "吃饭吗？";
    

1.1.3 获取父元素

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

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

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

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

1.1.4 获取兄弟节点

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