zoukankan      html  css  js  c++  java
  • HTML-★★★★JavaScript的DOM操作★★★★-重点部分

    Window.document 对象

    一、找到元素

      document.getElementById("id"); 根据id找,最多找一个;

      var a = document.getElementById("id"); 将找到的元素放在变量中;

      document.getElementsByName("name"); 根据name找,找出来的是数组;

      document.getElementsByTagName("name"); 根据标签名找,找出来的是数组;

      document.getElementsByClassName("name"); 根据Classname找,找出来的是数组;

    二、操作内容

      1)获取内容:

      alert(a.innerHTML); 标签里的HTML代码和文字都获取了;

      例如:

      body中这么一个div:<div id="me"><b>试试吧</b></div>,在script中使用 innerHTML 获取 div 中的内容:

        var a = document.getElementById("me");

        alert(a.innerHTML);

        

      alert(a.innerText); 只取里面的文字;

        

      alert(a.outHTML); 包括标签本身的内容;(inner不包括外标签,而out包括外标签)

       2)设置内容

      a.innerHTML="<font color='red'>Hello World</font>"; 如果用设置内容代码结果如下,div中内容被替换了:

        

      a.innerText 会将赋值的东西原样呈现

      情况内容:赋值个空字符串;

    2、表单元素:

      1)获取内容,有两种获取方式:

      var t = document.f1.t1; form表单ID为f1里面的ID为t1的input;

      var t = document.getElementById("id"); 直接用id获取;

      alert(t.value); 获取input中的value值;

      alert(t.innerHTML); 获取<textarea>这里的值</textarea>;

      2)设置内容:t.value="内容改变";

    3、一个小知识点:

      <a href="www.baidu.com" onclick="return.flase">转向百度</a>;加了 return.flase 则不会跳转,默认是 return.ture 则会跳转。按钮也一样,如果按钮中设置 return.flase 则不会进行提交,利用这个可以对提交跳转进行控制。

    三、操作属性

      首先利用元素的ID找到该元素,存于一个变量中:

      var a = document.getElementById("id");

      然后可以对该元素的属性进行操作:

      a.setAttribute("属性名","属性值"); 设置一个属性,添加或更改都可以;

      a.getAttribute("属性名"); 获取属性的值;

      a.removeAttribute("属性名"); 移除一个属性;

      例:1:做一个问题,如果输入的答案正确则弹出正确,错误则弹出错误;

      这里在text里面写了一个daan属性,里面存了答案的值,点击检查答案的时候cheak输入的内容和答案是否一样:

    <body>
    <form>
        中华民国成立于哪一年?
        <input type="text" daan="1912年" value="" id="t1" />
        <input type="button" id="t2" value="检查答案" onclick="cheak()" />
    </form>
    </body>
    </html>
    <script>
    function cheak()
    {
        var a = document.getElementById("t1");
        var a1 = a.value;
        var a2 = a.getAttribute("daan");
        if(a1==a2)
        {
            alert("恭喜答对了");
        }
        else
        {
            alert("很遗憾打错了。。。");
        }
    }
    </script>
    View Code

      例子2:同意按钮,倒计时10s,同意按钮变为可提交的,这里用了操作属性:disabled来改变按钮的状态,当disabled="disabled"时按钮不可用。

    <body>
    <form>
        <input type="submit" id="sm" value="同意(10)" disabled="disabled"/>
    </form>
    </body>
    </html>
    <script>
    var a = document.getElementById("sm");
    var s = 10;
    function js()
    {
        s--;
        if(s==0)
        {
            a.value="同意";
            a.removeAttribute("disabled");
        }
        else
        {
            a.value="同意("+s+")";
            window.setTimeout("js()",1000);
        }
    }
    window.setTimeout("js()",1000);
    </script>
    window.setTimeout

        

    四、操作样式

      首先利用元素的ID找到该元素,存于一个变量中:

      var a = document.getElementById("id");

      然后可以对该元素的属性进行操作:

      a.style.样式=""; 操作此ID样式的属性。

      样式为CSS中的样式,所有的样式都可以用代码进行操作。

      document.body.style.backgroundColor="颜色"; 整个窗口的背景色。

      操作样式的class:a.className="样式表中classname" 操作一批样式

      例子:展示图片的手动和自动切换(单独用一篇来做)

  • 相关阅读:
    java对象的四种引用:强引用、软引用、弱引用和虚引用
    css引入的两种方法link和@import的区别和用法
    java注解和自定义注解的简单使用
    java代理:静态代理和动态代理
    java设计模式:面向对象设计的7个原则
    java设计模式:概述与GoF的23种设计模式
    java依赖的斗争:依赖倒置、控制反转和依赖注入
    Official Program for CVPR 2015
    Official Program for CVPR 2015
    2013计算机视觉代码合集一
  • 原文地址:https://www.cnblogs.com/qq450867541/p/6024495.html
Copyright © 2011-2022 走看看