zoukankan      html  css  js  c++  java
  • Web API 中 Dom的概念 1.获取元素 2. 事件 3.操作元素的对象属性

    一、web API的介绍 

    (1)Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

    (2)API 是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现。

    (3)Web API 主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。

    (4)Web API 一般都有输入和输出(函数的传参和返回值),Web API 很多都是方法(函数)。

    (5)API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数。

    二、DOM的概念 

    (1)document object model   文档对象模型

    (2)作用:用来操作页面元素 

    三、查询元素(获取元素)

    (1)根据 id  获取元素对象  : document .getElementByld (id名称);

    (2)根据标签获取元素对象的集合 : document . getElementByTagName (标签名);

      div.getElementByTagName();

    (3)根据类名获取元素对象的集合 :document.getElementsByClassName(类名);

    (4)根据name属性来获取对象的集合 :document.getElementsByName();

    (5)根据选择器获取 :document.querySelector(选择器)获取的是一个对象;

      document.querySelectorAll()获取的是对象的集合;

    事件  

    1、三要素 :(1)事件源 :触发事件的元素对象 ;

          (2)事件类型 :要触发的是什么事件;

          (3)事件处理函数 :触发了事件你要干嘛;

    2、事件类型 :(1)click :点击事件;

           (2)focus :焦点事件;

           (3)blur :失去焦点事件;

           (4)input :表单类容发生改变的事件;

           (5)mouseover :鼠标移入事件;

           (6)mouseout :鼠标移出事件;

    操作元素对象的属性

    1、非表单元素 :(1)element.innerText =‘   ’      设置标签中的文本内容;

            (2)element.innerHTML=‘  ’      设置标签中的内容;

            (3)element.src=‘   ’        设置图片的路径;

            (4)element.title=‘  ’       设置标题     鼠标悬停在图片上显示的提示文本;

            (5)element.href=‘   ’      修改a标签的href属性;

    2、表单元素 :(1)input.value=‘   ’     设置表单中的内容;

           (2)input.type=‘   ’       设置表单的类型;

           (3)input.disabled= true       是否禁用 ;

           (4)input.checked=true        是否选中 ;

    3、样式的操作 :(1)style  属性去设置 :  elenment.style . 属性名 = ‘   ’   这里的属性名是驼峰命名法;

                        特点 :设置数量比较少的样式 ,权重高 ,可以接收变量 ;

            (2)设置类名 :element.className = ‘  ’   会覆盖原来的内容 ;

                    特点 :设置数量比较多的样式 ,权重不高 ,不能接收变量; 

     

    注意 : 获取小时数 :var date =new.Date();

              var h =date .getHours()

     

                                       2019-09-14

     

  • 相关阅读:
    HDU4474 Yet Another Multiple Problem BFS搜索
    HDU4473 Exam 数学分析
    2013ACM多校联合(4)
    POJ1273 网络流...
    HDU4472 Count 递推
    POJ1149 PIGS 网络流
    UVA10881 Piotr's Ants 想法题
    javascript js string.Format()收集
    修改 设置 vs.net 网站 调试 设为 起始页
    【转】HTML5杂谈 概念与现行游戏 割绳子 宝石迷阵
  • 原文地址:https://www.cnblogs.com/piyangtao/p/11518551.html
Copyright © 2011-2022 走看看