JS超级进阶——DOM（未完）

• DOM（Document Object Model，文档对象模型）是 JavaScript 操作 HTML 文档的接口，使文档操作变得非常优雅、简便。

• DOM 最大的特点就是将 HTML 文档表示为 “节点树”。

• DOM 元素/节点：就是渲染到页面上的，一个个的 HTML 标签体（标签 + 属性 + 内容）。

1、nodeType

节点的 nodeType 属性可以显示这个节点具体的类型。

document.nodeType; // 9

nodeType值	节点类型
1	元素节点，例如 <p> 和 <div>
3	文字节点
8	注释节点
9	document 节点
10	DTD 节点（文档类型声明）

        //获取节点值判断类型
        console.log(document.nodeType);  //9

2、document

2.1 访问元素节点

• 所谓 “访问” 元素节点，就是指 “得到”、“获取” 页面上的元素节点。

• 对节点进行操作，第一步就是要得到它。

• 访问元素节点主要依靠 document 对象。

  • document 对象是 DOM 中最重要的东西，几乎所有 DOM 的功能都封装在了 document 对象中。
  • document 对象也表示整个 HTML 文档，它是 DOM 节点树的根。
  • document 对象的 nodeType 属性值是 9。

  typeof document;	// object
  document.nodeType;	// 9
  

        //获取标签nodeType(?)
        //getElementsByTagName——根据标签获取元素
        var box = document.getElementsByTagName('div')[0];
        //获取此节点类型
        console.log(box.nodeType);  //nodeType

2.3 访问元素节点的常用方法

注意：以下方法的参数都是字符串类型 ''。

方法	功能	兼容性
document.getElementById()	通过 id 得到元素	IE 6
document.getElementsByTagName()	通过标签名得到元素数组	IE 6
document.getElementsByClassName()	通过类名得到元素数组	IE 9
document.querySelector()	通过选择器得到元素（es6新特性）	IE 8 部分兼容、IE 9 完全兼容
document.querySelectorAll()	通过选择器得到元素数组（es6新特性）	IE 8 部分兼容、IE 9 完全兼容

Element：元素。

query：查询。

Selector：选择器。

        //获取元素的方法
        //getElementById  ——  根据ID获取元素 
        console.log(document.getElementById('box1'));
        //getElementsByClassName   ——  有‘s’，获取的是数组
        console.log(document.getElementsByClassName('box2'));
        //通过选择器来获取querySelector   #—id
        console.log(document.querySelector('#box1'));
        //querySelectorAll   .——class
        console.log(document.querySelectorAll('.box2'));