当前位置：网站首页>DOM对象能干什么？

DOM对象能干什么？

2022-08-03 10:12:00 【51CTO】

什么是DOM对象？DOM对象其实就是一棵由元素对象组成的大树。另外要特别强调一点，浏览器解析网页的顺序是从上到下的。所以有时要注意js代码与被控制元素对象的前后关系。处理DOM对象时，要确保网页完全加载后再执行，这一点至关重要，因为网页没有加载完的话，那么DOM对象就不会存在，因为它是一棵大树，树还没长成自然就不会有DOM对象啦。拥有DOM对象你可以做以下几件事：

1.获取内容（文件或HTML）

       
       <!doctype html>
       
<html lang="en">
       
        <head>
       
                <meta charset="utf-8">
       
                <title>My First JavaScript</title>
       
        </head>
       
        <body>
       
        <p id="pid">Hello world! I am your master!</p>
       
        <script>
       
                var dom = document.getElementById("pid");
       
                //获取内容
       
                alert(dom.innerHTML);
       
        </script>
       
        </body>
       
</html>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

2.修改内容

       
       <!doctype html>
       
<html lang="en">
       
        <head>
       
                <meta charset="utf-8">
       
                <title>My First JavaScript</title>
       
        </head>
       
        <body>
       
        <p id="pid">Hello world! I am your master!</p>
       
        <script>
       
                var dom = document.getElementById("pid");
       
                //修改元素内容
       
                dom.innerHTML = "<h1>Green world!</h1>";
       
                //获取内容
       
                alert(dom.innerHTML);
       
        </script>
       
        </body>
       
</html>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

3.添加特性

       
       <!doctype html>
       
<html lang="en">
       
        <head>
       
                <meta charset="utf-8">
       
                <title>My First JavaScript</title>
       
        </head>
       
        <style>
       
        .redText{
       
                color:red;
       
        }
       
        </style>
       
        <body>
       
        <p id="pid">Hello world! I am your master!</p>
       
        <script>
       
                var dom = document.getElementById("pid");
       
                //修改元素内容
       
                dom.innerHTML = "<h1>Green world!</h1>";
       
                //给p元素添加一个样式redText
       
                dom.setAttribute("class","redText");
       
                //获取内容
       
                alert(dom.innerHTML);
       
        </script>
       
        </body>
       
</html>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

4.获取特性

       
        <!doctype html>
       
    <html lang="en">
       
            <head>
       
                    <meta charset="utf-8">
       
                    <title>My First JavaScript</title>
       
            </head>
       
            <style>
       
            .redText{
       
                    color:red;
       
            }
       
            </style>
       
            <body>
       
            <p id="pid">Hello world! I am your master!</p>
       
            <script>
       
                    var dom = document.getElementById("pid");
       
                    //修改元素内容
       
                    dom.innerHTML = "<h1>Green world!</h1>";
       
                    //给p元素添加一个样式redText
       
                    dom.setAttribute("class","redText");
       
                    //获取特性
       
                    alert(dom.getAttribute("class" ));
       
            </script>
       
            </body>
       
    </html>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

5.修改特性

修改特性其实就是重新设定。

       
       <!doctype html>
       
<html lang="en">
       
        <head>
       
                <meta charset="utf-8">
       
                <title>My First JavaScript</title>
       
        </head>
       
        <style>
       
        .redText{
       
                color:red;
       
        }
       
        .blueText{
       
                color:blue;
       
        }
       
        </style>
       
        <body>
       
        <p id="pid" onclick="changeColor()">Hello world! I am your master!</p>
       
        <script>
       
                var dom = document.getElementById("pid");
       
                dom.setAttribute("class","redText");
       
                //修改元素内容
       
                dom.innerHTML = "<h1>Green world!</h1>";
       
                //获取内容
       
                alert(dom.innerHTML);
       
                //获取特性
       
                alert(dom.getAttribute("class"));
       
                function changeColor(){
       
                        //修改特性
       
                        this.dom.setAttribute("class","blueText");
       
                }
       
        </script>
       
        </body>
       
</html>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

6.删除特性

       
       <!doctype html>
       
<html lang="en">
       
        <head>
       
                <meta charset="utf-8">
       
                <title>My First JavaScript</title>
       
        </head>
       
        <style>
       
        .redText{
       
                color:red;
       
        }
       
        .blueText{
       
                color:blue;
       
        }
       
        </style>
       
        <body>
       
        <p id="pid" ondblclick="removeAttr()" onclick="changeColor()">Hello world! I am your master!</p>
       
        <script>
       
                var dom = document.getElementById("pid");
       
                dom.setAttribute("class","redText");
       
                //修改元素内容
       
                dom.innerHTML = "<h1>Green world!</h1>";
       
                //获取内容
       
                alert(dom.innerHTML);
       
                //获取特性
       
                alert(dom.getAttribute("class"));
       
                function changeColor(){
       
                        //修改特性
       
                        this.dom.setAttribute("class","blueText");
       
                }
       
                function removeAttr(){
       
                        //删除特性
       
                        this.dom.removeAttribute("class");
       
                }
       
        </script>
       
        </body>
       
</html>
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.