JS学习第十二天（DOM 获取元素）

DOM获取元素

1、通过标签名、类名、id、name

(1) 通过id获取元素 是唯一的
	  var atOP=document.getElementById('top')
(2)通过class名获取元素 一个或多个
	  HTMLCollection 集合 类似于为数组 伪数
	  var aHeader=document.getElementsByClassName('header')
(3)通过标签名获取元素 一个或多个
	   var aText=document.getElementsByName('span')
(4)通过name获取元素 主要用于form表单
	   var aSex=document.getElementsByName('sex')
	   console.log(aSex[1]);
(5)getElementsByNameNS() 获取多种元素
	    console.log(document.getElementsByTagNS('p','span'));
          (6)获得根节点   getRootNode()
	    console.log(document.getRootNode());

2、通过选择器的方式获取

(1)querySelector() 获取一个元素
	     var oTop=document.querySelector('#top')
	     console.log(oTop);
(2)querSelectorAll() 获取多个元素
	     var oHeader=document.querySelectorAll('.header')
	     console.log(oHeader);
(3)getElementsByTagName和querySelectorAll的区别
	    var  aItem=document.getElementsByTagName('li');//动态
	    var aItem1=document.querySelectorAll('li');//静态
	    console.log(aItem);
	    console.log(aItem1)

3.DOM的节点

	nodeType返回节点类型	nodeName返回节点名称	nodeValue返回节点的值
1、元 素 节 点	返回1	返回大写标签名	返回 null
2、属性节点	返回2	返回属性名	返回属性值
3、文本节点	返回3	返回 #text	返回文本内容
4.注释节点	返回8	返回 #comment	返回注释内容
5.document	返回9

• (1)nodeType 返回节点类型 对象.nodeType

	     1`元素节点   返回1
	        console.log(oTop.nodeType);
 
	      2`属性节点   返回2
	        var attrNode=oTop.getAttributeNode('id');
		console.log(attrNode.nodeType);
 
	      3`文本节点   返回3
	  var content=oTop.firstChild;
	  console.log(content.nodeType);
	       4`注释节点   返回8
	          console.log(oList.firstChild.nodeType);
	      5`document  返回9
                  console.log(document.nodeType);  

• (2)nodeName 返回节点名称

 1`元素节点   返回大写标签名
     console.log(oTop.nodeName);		
 2`属性节点   返回属性名
     var attrNode=oTop.getAttributeNode('id');
     console.log(attrNode.nodeName);
 
 3`文本节点   返回#text
      var content=oTop.firstChild;
      console.log(content.nodeName);
  4`注释节点   返回#comment
                       console.log(oList.firstChild.nodeName);

• (3)nodeValue 返回节点值

  1`元素节点   返回null
     cosole.log(oTop.nodeValue);		
  2`属性节点   返回属性值
     var attrNode=oTop.getAttributeNode('id');
     console.log(attrNode.nodeValue);
 
   3`文本节点   返回文本内容
     var content=oTop.firstChild;
     console.log(content.nodeValue);
   4`注释节点    返回注释内容
     console.log(oList.firstChild.nodeValue);

4.DOM的元素属性;

• (1)查：获取元素属性 getAttribute(“属性名”) 返回属性值（行内的属性）
  console.log(oBox.getAttribute(‘id’));
• (2)改：设置属性 setAttribute(“属性名”,“属性值”)
  document.getElementById(‘change’).οnclick=function(){
  oImage.setAttribute(‘src’,‘./2.jpg’)
  }
• (3)删：移除属性 removeAttribute(“属性名”)
  document.getElementById(‘move’).οnclick=function(){
  oBox.removeAttribute(‘style’);
  }
• (4)加：创建属性 creatAttribute(“属性名”) 自定义
  var arr=document.createAttribute(‘abc’);
  arr.value=‘自定义’
  document.getElementById(‘add’).οnclick=function(){
  oBox.setAttributeNode(arr);