JavaScript高级(3)

最新推荐文章于 2022-12-22 21:00:00 发布

airar

最新推荐文章于 2022-12-22 21:00:00 发布

阅读量124

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/airar/article/details/120677545

版权

1.JavaScript DOM对象

DOM--Document Object Model[文档对象模型]

当网页被加载时，浏览器会创建页面的文档对象模型

html文件

<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=””>My link</a>
<h1>My header</h1>
</body>
</html>

HTML DOM 模型被构造为对象的树

1. DOM可以完成的功能

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

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

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

4.JavaScript 能够对页面中的所有事件做出反应

2.查找 HTML 元素

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

2.1.getElementById(id属性值);通过 id 查找 HTML 元素

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function testbyid(){
              var pdom = document.getElementById("p1");
              alert(pdom);
              pdom.style.fontSize="40px";
            }
        </script>
    </head>
    <body>
        <p id="p1">getElementById(id属性值);通过 id 查找 HTML 元素</p>
        <p id="p1">getElementById(id属性值);通过 id 查找 HTML 元素</p>
        <input type="button" value="测试getElementById(id属性值)" onclick="testbyid()">
    </body>
</html>

2.2.getElementsByTagName(标签名)通过标签名查找 HTML 元素

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //1.2 document.getElementsByTagName(标签名)通过标签名查找 HTML 元素
            //注意:标签名相同的元素有多个时，会得到一个dom对象数组
            function testTagName(){
                var hdom=document.getElementsByTagName("h4");
                //alert(hdom);
                hdom[0].style.color="red";
                hdom[1].style.color="blue";
            }
        </script>
    </head>
    <body>
        <h4>getElementsByTagName(标签名)通过标签名查找 HTML 元素</h4>
        <h4>getElementsByTagName(标签名)通过标签名查找 HTML 元素</h4>
        <input type="button" value="测试getElementsByTagName(标签名))" onclick="testTagName()"><br>
    </body>
</html>

2.3.getElementsByClassName(class属性值)通过类名找到 HTML 元素

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //1.3 document.getElementsByClassName(class属性值)通过类名class属性名称找到 HTML 元素
            //注意:html元素必须提供class属性
            //注意:class属性值相同的元素有多个时，会得到一个dom对象数组
            function testClassName(){
                var cdom=document.getElementsByClassName("span2");
                //alert(cdom);
                cdom[0].style.color="blue";
                cdom[1].style.fontSize

最低0.47元/天解锁文章

airar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级(3)

1.JavaScriptDOM对象DOM--Document Object Model[文档对象模型]当网页被加载时，浏览器会创建页面的文档对象模型html文件<!DOCTYPE html><html><head><title>My title</title></head><body><a href=””>My link</a><h1>My header&.
复制链接

扫一扫