JavaScript_HTML DEMO_1

JavaScript_HTML DEMO_1_概念

xiao9426926 2021-12-09 原文

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 = "通过标签名找到对应ＨＴＭＬ元素";

        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>