页面交互功能

• web APIs简介 ：页面交互功能
  • DOM ：页面文档对象模型---处理可开展标记语言的标准编程接口
    • DOM树 的对象
      • 文档：一个页面就可以看成一个文档，document表示
      • 元素：所有的标签都可以看成元素，element表示
      • 节点：所有内容：标签、属性、注释，node表示
    • DOM操作：
      • 1、元素获取：
        • getElementById（）获取带有ID元素对象
        • getElementsByName() 获取指定标签名的对象集合
        • getElementByClassName（）获取指定类名的对象集合
        • querySlector（）获取指定选择器的第一个元素对象
        • querySlectorAll（）获取指定选择器的所有元素对象集合
        • document.body获取body标签
        • document.documentElement获取html标签
      • 2、事件
        • 事件源：事件被触发的对象----要获取对象
        • 事件类型：如何触发、什么事件

          

        • 事件处理程序：通过一个函数值的方式完成
      • 3、操作元素
        • 改变元素内容 ：
          • innerText（）--不识别HTML标签、
          • innerHTML（）---保留空格和换行
        • 修改元素属性 ：
          • element.属性
            • img.scr = :修改图片路径
            • img.title = :修改鼠标经过时的文字信息
          • element.getAttribute('属性 ')
        • 修改元素样式：
          • element.style：行内样式操作
          • element.className：类名样式操作
  • BOM：浏览器对象模型
• API：应用程序编程接口，一些预先定义的函数
• web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）