zoukankan      html  css  js  c++  java
  • DOM

    javascript组成:ESCAscript、BOM、DOM
    BOM:浏览器对象模型
      window:窗口
    Iocation:地址栏
     history:历史记录
     document:文档
    DOM:文档操作模型  document


    定时器:
    /延迟执行

    setTimeout(function(){},时间);
    /间隔执行
    setInterval(function(){},时间);

    清除定时器

    clearInterval(对象);
    clearTimeout(setTimeout对象);

    DOM操作套路
    找到元素   操作元素

    1、找元素   返回元素对象
         document.getElementById();
         document.getElementsByName();
         document.getElementsByTagName();
         document.getElementsByClassName();
    2、操作元素内容
         var obj=document.getElementById();
        非表单元素: obj.innerHTML=123
     表单元素:obj.Value
    3、操作元素属性
        obj.setAttribute("class","btn"); 设置
        obj.getAttribute("id");=>btn   获取
    4、操作元素样式
        obj.style.color  只可以操作行内样式
    5、操作元素事件

       obj.onclick=function(){}
     obj.addEventListener()
     同一个点击事件可以添加多个事件

    1 var btn = document.getElementById('btn')
    2  btn.onclick=function(){
    3  this.style.color="red";
    4  }

    6、创建删除元素

    obj.remove();
    document.createElement('div');//<div></div>

    下面举一堆栗子:

    鼠标移上显示移走消失:

     1 <html>
     2 <head>
     3 <meta charset="utf-8">
     4 <title>无标题文档</title>
     5 <script type="text/javascript" src="dom常识.js"></script>
     6 </head>
     7 
     8 <body>
     9   <button onMouseOver="showdiv()" onMouseOut="hiddendiv()" onClick="alert('薛之谦最帅')">按钮</button>
    10   <div id="dd" style="display: none">薛之谦</div>
    11 <!--<div id="dd2"onMouseOver="showdiv()" onMouseOut="hiddendiv()" >鼠标放上去薛之谦变红</div>  -->
    12 </body>
    13 </html>
    1 function showdiv(){
    2     var div=document.getElementById("dd");
    3     div.style.display = "block";
    4 }
    5 function hiddendiv(){
    6     var div=document.getElementById("dd")
    7     div.style.display="none";
    8 }

    鼠标放上去变高变宽变红,移走恢复原样

     1 function showdiv(){
     2     var div=document.getElementById("dd2");
     3     div.style.background="red";
     4     div.style.height="200px";
     5     div.style.display="block";
     6 }
     7 function hiddendiv(){
     8     var div=document.getElementById("dd2");
     9     div.style.background="white";
    10     div.style.display="block";
    11 }

    介绍方法
    window.onload=function(){}
    介绍两个对象
    Math:数学类
    Date:时间日期类

  • 相关阅读:
    经验谈 论前端架构的重要性
    论 Angular的混乱
    DTW 算法(转)
    软件提高发射功率原理
    (转)LSI SAS 1068E Raid CentOS 5.5 安装实例浪潮NF5220系列 分类: linux
    聚类算法总结
    信号相似性的描述
    python科学计算整理
    一个无线通信类投稿的期刊list
    2012年Elsevier旗下Computer Science期刊最新SCI影响因子排名
  • 原文地址:https://www.cnblogs.com/2734156755z/p/9199242.html
Copyright © 2011-2022 走看看