• 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>
  • 相关阅读:
    jQuery each的实现与call方法的详细介绍
    转载Entity Framework 5.0(EF first)中的添加,删除,修改,查询,状态跟踪操作
    转载有个小孩跟我说LINQ(重点讲述Linq中GroupBy的原理及用法)
    luogu P3305 [SDOI2013]费用流
    bzoj 4819: [Sdoi2017]新生舞会
    bzoj4817: [Sdoi2017]树点涂色
    bzoj4816: [Sdoi2017]数字表格
    bzoj 4818: [Sdoi2017]序列计数
    [JSOI2007]重要的城市(x)
    BZOJ 1009 [HNOI2008]GT考试
  • 原文地址:https://www.cnblogs.com/xiao9426926/p/6609783.html
Copyright © 2020-2023  润新知