JavaScript基础（十）：DOM简介

DOM简介

• DOM全称document object model

文档
        整个HTML文件就是一个文档
对象
        HTML文件中的每个节点都在JS中是一个对象
模型
        JS使用模型来表示各个对象之间的关系

• 在网页中浏览器已经为我们提供了document对象，它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。
• DOM中的对象又称为节点对象，共有4种节点分别为：

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

document

• document常用属性：
  • body 该属性封装的是body元素对象的引用
  • documentElement 属性值为HTML元素对象
  • all 属性值为当前页面中的所有元素节点的数组
• 常用方法：
  • getElementById() 通过ID值获取对应的节点
  • getElementsByTagName() 通过标签名获取一组节点
    • 返回值是一个HTMLCollection，与数组相似，不能使用forEach方法，即使只获取到一个节点时，也封装成HTMLCollection返回
  • getElementsByName() 通过name的值获取一组节点
    • 返回值是一个nodelist，与数组相似，可以使用forEach方法，即使只获取到一个节点时，也封装成nodelist返回
  • getElementsByClassName() 通过class属性获取一组节点
    • 返回值是一个HTMLCollection，与数组相似，不能使用forEach方法，即使只获取到一个节点时，也封装成HTMLCollection返回
    • 仅支持IE8以上
  • querySlector() 通过CSS选择器返回一个节点，当能匹配多个节点时，返回满足匹配的第一个节点
    • 仅支持IE7以上
  • querySlectorAll() 通过CSS选择器返回一组节点
    • 返回值是一个nodelist，与数组相似，可以使用forEach方法，即使只获取到一个节点时，也封装成nodelist返回
    • 仅支持IE7以上

元素节点

• 读取元素的属性：
  • 语法：元素.属性名 如：ele.name、ele.id
  • class属性不能采用这种方式，读取class属性时需要使用 元素.className
• 常用方法：
  • getElementById() 通过ID值获取当前元素节点内部对应的节点
  • getElementsByTagName() 通过标签名获取当前元素节点内部的特定标签的元素节点
    • 返回值是一个HTMLCollection，与数组相似，不能使用forEach方法，即使只获取到一个节点时，也封装成HTMLCollection返回
  • getElementsByName() 通过name的值获取当前元素节点内部的一组节点
    • 返回值是一个nodelist，与数组相似，可以使用forEach方法，即使只获取到一个节点时，也封装成nodelist返回
  • getElementsByClassName() 通过class属性获取当前元素节点内部的一组节点
    • 返回值是一个HTMLCollection，与数组相似，不能使用forEach方法，即使只获取到一个节点时，也封装成HTMLCollection返回
    • 仅支持IE8以上
  • querySlector() 通过CSS选择器返回当前元素节点内部的一个节点，当能匹配多个节点时，返回满足匹配的第一个节点
    • 仅支持IE7以上
  • querySlectorAll() 通过CSS选择器返回当前元素节点内部的一组节点
    • 返回值是一个nodelist，与数组相似，可以使用forEach方法，即使只获取到一个节点时，也封装成nodelist返回
    • 仅支持IE7以上
• 常用属性：
  • innerHTML
    获取当前元素节点中的HTML代码
  • innerText
    获取当前元素节点中的文本
  • childNodes
    获取当前元素节点中所有的子节点并以数组形式返回
    • 按照ES标准如果当前元素节点中有空格时也会被当作文本节点包括在内
    • IE8及以下浏览器没有实现这一标准，因此只会获取到内部的元素节点
  • children
    获取当前元素节点中的所有子元素节点
  • firstChild
    获取当前元素节点中的第一个子节点
  • firstElementChild
    获取当前元素节点中的第一个子元素节点, 仅支持IE8以上
  • lastChild
    获取当前元素节点中的最后一个子节点
  • lastElementChild
    获取当前元素节点中的最后一个子元素节点, 仅支持IE8以上
  • parentNode
    获取当前元素节点的父节点
  • previousSibling
    获取当前元素节点的前一个兄弟节点
  • previousElementSibling
    获取当前元素节点的前一个兄弟元素节点, 仅支持IE8以上
  • nextSibling
    获取当前元素节点的后一个兄弟节点
  • nextElementSibling
    获取当前元素节点的后一个兄弟元素节点, 仅支持IE8以上

所有没有声明是元素节点的属性都存在返回空格文本节点的可能。