JS基础之DOM

DOM:Document Object Model文档对象模型

1. 浏览器已经为我们提供 文档节点 对象这个对象是window属性
   可以在页面中直接使用，文档节点代表的是整个网页
2. 我们可以在事件对应的属性中设置一些js代码，
   这样当事件被触发时，这些代码将会执行
   这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
3. 可以为按钮的对应事件绑定处理函数的形式来响应事件
   这样当事件被触发时，其对应的函数将会被调用
4. 为单击事件绑定的函数，我们称为单击响应函数
5. 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
   读取到一行就运行一行,如果将script标签写到页面的上边，
   在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
   会导致无法获取到DOM对象
   onload事件会在整个页面加载完成之后才触发
   为window绑定一个onload事件
   该事件对应的响应函数将会在页面加载完成之后执行，
   这样可以确保我们的代码执行时所有的DOM对象已经加载完毕
6. innerHTML用于获取元素内部的HTML代码的
   对于自结束标签，这个属性没有意义
   如果需要读取元素节点属性，
   直接使用 元素.属性名
   例子：元素.id 元素.name 元素.value
   注意：class属性不能采用这种方式，
   读取class属性时需要使用 元素.className
7. childNodes属性会获取包括文本节点在呢的所有节点
   根据DOM标签标签间空白也会当成文本节点
   注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
8. children属性可以获取当前元素的所有子元素
   9.节点：Node——构成HTML文档最基本的单元。
   常用节点分为四类
   文档节点：整个HTML文档
   元素节点：HTML文档中的HTML标签
   属性节点：元素的属性
   文本节点：HTML标签中的文本内容
9. 获取元素节点 • 通过document对象调用
   getElementById() – 通过id属性获取一个元素节点对象
   getElementsByTagName() – 通过标签名获取一组元素节点对象
   getElementsByName() – 通过name属性获取一组元素节点对象
10. 获取元素节点的子节点
    通过具体的元素节点调用
    getElementsByTagName()
    方法，返回当前节点的指定标签名后代节点
    childNodes
    属性，表示当前节点的所有子节点
    .firstChild
    属性，表示当前节点的第一个子节点
    lastChild
    属性，表示当前节点的最后一个子节点
11. 获取父节点和兄弟节点:通过具体的节点调用
    parentNode
    属性，表示当前节点的父节点
    . previousSibling
    属性，表示当前节点的前一个兄弟节点
    nextSibling
    属性，表示当前节点的后一个兄弟节点
12. 定义一个函数，专门用来为指定元素绑定单击响应函数
    参数：
    idStr 要绑定单击响应函数的对象的id属性值
    fun 事件的回调函数，当单击元素时，该函数将会被触发
13. firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
    firstElementChild不支持IE8及以下的浏览器
14. innerText
    该属性可以获取到元素内部的文本内容
    它和innerHTML类似，不同的是它会自动将html去除