DOM和DOM如何获取元素

最新推荐文章于 2024-04-11 16:16:12 发布

weixin_41387874

最新推荐文章于 2024-04-11 16:16:12 发布

阅读量113

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41387874/article/details/116063182

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

写在之前

什么是对象？
- 说到对象就不得不提到类的概念，类是对真实世界的抽象，类中具有属性、方法，如：人类就是一个类，这个类中具有如身高等属性，以及吃饭、喝水等方法。
- 对象就是对类的实例化，如：对于人类这个类，一个具体的人就是这个类的实例化，也就是所说的对象。

DOM

什么是DOM？
- DOM是指文档对象模型(Document Object Model)，DOM提供了动态添加或删除元素的方法。
- DOM把每一个元素都看成是一个对象，如果想要操作某一个元素，那么需要利用这个对象的属性和方法来进行操作。
DOM的结构
- DOM采用的是树形结构，一个页面一个DOM树，DOM使用结点表示每一个元素(父元素就是父结点，子元素就是子结点。)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
        </script>
    </head>
    <body>
        <h1></h1>
        <p></p>
    </body>
</html>

对于上面的页面，这个页面的DOM树结构是：

如何操作元素？

为了操作指定的元素，我们必须首先获取该元素，我们有六种方法获取元素：

getElementById()方法
getElementsByTagName()方法
getElementsByClassName()方法
querySelector()和querySelectAll()方法
getElementsByName()方法
document.title和document.body

getElementById()方法

getElementById()方法使用id获取目标元素。

由于浏览器对页面的解析渲染是从上到下依次进行的，如果不加上window.load，那么在执行getElementById()之前，id是"id_1"的元素还没有被创建出来。
也可以把script元素放到body之后，这样还可以提高网页加载速度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            window.onload = function() //使用window.onload表示等页面加载完成再运行这个匿名函数。
            {
                var Obj1 = document.getElementById("id_1")
                Obj1.style.fontWeight = "bold";
            }
        </script>
    </head>
    <body>
        <p id="id_1">aaaa</p>
    </body>
</html>

getElementsByTagName()方法

getElementsByTagName()方法通过标签名来选中指定元素。
getElementsByTagName()方法返回一个类数组。
类数组和数组的区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            window.onload = function()
            {
                var odiv1 = document.getElementById("id_1");
                var oObjp = document.getElementsByTagName("p"); //获取了整个页面下所有p元素。
                oObjp[0].style.color = "red";
            }
        </script>
    </head>
    <body>
        <p>不在div内第一个p元素</p>
        <div id="id_1">
            <p>在div内第一个p元素</p>
            <p>在div内第二个p元素</p>
        </div>
    </body>
</html>

当使用document.getElementByTagName()时，获取的是整个页面中所有的指定元素。
我们也可以获取某一个元素下所有的指定元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            window.onload = function()
            {
                var odiv1 = document.getElementById("id_1");
                var oObjp = odiv1.getElementsByTagName("p");  //获取了id是id_1的元素下所有的p元素
                oObjp[0].style.color = "red"; //获取id是id_1的元素下所有p元素组成的类数组中的第一个p元素。
            }
        </script>
    </head>
    <body>
        <p>不在div内第一个p元素</p>
        <div id="id_1">
            <p>在div内第一个p元素</p>
            <p>在div内第二个p元素</p>
        </div>
    </body>
</html>

getElementsByClassName()方法

getElementsByClassName()方法使用class名获取元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            window.onload = function()
            {
                var Obj1 = document.getElementsByClassName("class1");
                Obj1[0].style.color = "red";//必须使用下标
            }
        </script>
    </head>
    <body>
        <p>不在div内第一个p元素</p>
        <div id="id_1">
            <p class="class1">在div内第一个p元素</p>
            <p>在div内第二个p元素</p>
        </div>
    </body>
</html>