• JavaScript_HTML DEMO_1_概念


    HTML DOM - 文档对象模型

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

    1. 通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。

        JavaScript 能够改变页面中的所有HTML 元素

        JavaScript 能够改变页面中的所有HTML属性

        JavaScript 能够改变页面中的所有CSS样式

        JavaScript 能够对页面中的所有事件作出反应

    2. 查找HTML元素,有三种方法:

        a. 通过id找到HTML元素               getElementById

        b. 通过标签名找到HTML元素         getElementsByTagName

        c. 通过类名找到HTML元素   在IE5,6,7,8中无效  不推荐

    3. 改变HTML内容   innerHTML

        改变HTML属性   document.getElementById(id).attribute=new value

       改变HTML元素的样式 document.getElementById(id).style.property=new value

    <body>
    
        <p id="d1">第一段落</p>
        <p id="d2">第二段落</p>
        <div>第三段落</div>
        <div>第四段落</div>
        <img id="image" src="img/lightoff.jpg" />"
        <button type="button" onclick="document.getElementById('d2').style.color='yellow'">点击这里</button>
    
        <script>
            var x = document.getElementById("d1"); //通过id找到HTML元素
            x.innerHTML="id是d1的段落"; //改变HTML元素内容,用innerHTML
            var y = document.getElementsByTagName("div"); //通过签名找到HTML元素
            y[1].innerHTML = "通过标签名找到对应HTML元素";
    
            var z = document.getElementById("image");
            z.src = "img/lighton.jpg"; //改变HTML元素的属性
    
            //改变HTML元素的样式
            document.getElementById("d2").style.color = "Blue";
            document.getElementById("d2").style.fontFamily = "Arial";
            document.getElementById("d2").style.fontSize = "larger";
        </script>
    
    </body>
  • 相关阅读:
    LightOJ 1300 边双联通分量+交错路染色
    HDU 6143 快速幂,组合数
    windows 下fc工具
    HDU 6136 模拟
    HDU 6129 暴力,规律
    UVA Live 7770 模拟
    1096: [ZJOI2007]仓库建设
    1191: [HNOI2006]超级英雄Hero
    3224: Tyvj 1728 普通平衡树
    1208: [HNOI2004]宠物收养所
  • 原文地址:https://www.cnblogs.com/xiao9426926/p/6609783.html
Copyright © 2020-2023  润新知