DOM选择器，节点类型

Document Object Model
DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

一.对节点的增删改查

A.查

a.查看元素节点

1. document代表整个文档
2. document.getElementById()//元素id在Ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素
3. .getElementsByTagName()//标签名
   取出的元素都放在类数组中
4. getElementByName();//需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
5. .getElementsByClassName();//类名->ie8及以下的ie版本中没有，可以多个class一起
6. .querySelector()//css选择器 在ie7及以下的版本中没有，且非实时操作，在用法上受局限，（不是通过自己选择的元素进行修改，是无法修改的）。

//html

  

    
          123
    
  


//javascript

选出的是单独元素

7. .querySelectorAll()//css选择器 在ie7及以下的版本中没有
   选出的是数组

二.节点树

1. 遍历节点树

• parentNode->父节点（最顶端的parentNode为#document）；
• childNodes -> 子节点们（所有的节点类型都要算进去）
  例1

//html

    123
    
    
    


//js
var div = document.getElementByTagName('div')[0];

此时，div.childNodes为[text, comment, text, strong, text, span, text]

• firstChild -> 第一个子节点
• lastChild -> 最后一个子节点
• nextSibling -> 后一个兄弟节点

//html

    123
    
    
    


//js
var strong = document.getElementByTagName('strong')[0];

此时，strong.nextSibling为text

• previousSibling->前一个兄弟节点

2. 基于元素节点树的遍历

• parentElement -> 返回当前元素的父元素节点（IE不兼容）
  document非元素，所以并不是最顶端的父元素节点
• children-> 只返回当前元素的元素子节点

//html

    123
    
    
    


//js
var div = document.getElementByTagName('div')[0];

此时，div.children为[strong, span]

• node.childElementCount === node.children.length当前元素节点的子元素节点个数（IE不兼容）
• firstElementChild->返回的是第一个元素节点（IE不兼容）
• lastElementChild->返回的是最后一个元素节点（IE不兼容）
• nextElementSibling/previousElementSibling->返回后一个/前一个兄弟元素节点（IE不兼容）

三.节点的类型

• 元素节点----1
• 属性节点----2
• 文本节点----3
• 注释节点----8
• document----9
• DocumentFragment----11
• 获取节点类型 nodeType

四.节点的四个属性

1. nodeName
   元素的标签名，以大写形式表示，只读
2. nodeValue
   Text节点或Comment节点的文本内容，可读写
3. nodeType
   该节点的类型，只读
   根据上方节点类型返回数字而判断

document.nodeType;//返回9

    123
    
    
    


div.childNodes[1].nodeType;//注释节点返回8

4. attributes
   Elements节点的属性集合

//html

//js
var div = document.getElementByTagName('div')[0];

上例中
div.attributes;
->NameNodeMap{0:id, 1:class, length:2}//attributes将div节点中的属性，以类数组的形式存储
div.attributes[0];
->id = "only"
div.attributes[0].nodeType;
->2//属性节点返回值为2

五.节点的一个方法 Node.hasChildNodes();

是否有子节点，返回true或false，（包含非元素节点）