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);
}