DOM概念、常用元素操作

最新推荐文章于 2023-05-12 21:25:35 发布

张0x0

最新推荐文章于 2023-05-12 21:25:35 发布

阅读量476

点赞数 1

分类专栏： web前端基础学习 JavaScript学习 html学习文章标签：前端 javascript html dom

本文链接：https://blog.csdn.net/zxn200125/article/details/121447760

版权

web前端基础学习同时被 3 个专栏收录

80 篇文章 3 订阅

订阅专栏

JavaScript学习

37 篇文章 0 订阅

订阅专栏

html学习

12 篇文章 0 订阅

订阅专栏

什么是DOM

DOM全称叫做文档对象模型，是一种可拓展标记语言(HTML或XML)的标准编程接口。利用DOM可以对HTML文档内所有元素进行获取、访问、设置样式等等操作。DOM将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合，它会将web页面和脚本或者程序语言连接，我们可以使用脚本或者程序语言通过DOM来控制或者改变web页面。在DOM中，把一个页面当成一个文档，页面中所有标签都是元素，网页中所有内容在文档树中都是节点。

通过可编程的对象模型，JavaScript能够创建动态的HTML，可以通过JavaScript来调用document和window元素的API来操作文档或者获取文档的信息

总的来说，理解DOM，可以这样来看：从浏览器方面来看，它是根据文档建模出来的一个树形模型，也就是DOM树；从编程语言来看，它提供一套操纵文档的API

DOM常用元素操作

获取元素

获取元素通常有四种方法

1.通过id获取

语法：document.getElementById('idName')

该方法返回一个指定id的元素对象，若未找到返回null，我们知道，id属性名只能定义和使用一次，所以若存在多个指定相同id的元素返回undefined

2.通过标签名获取

语法：

document.getElementsByTagName('tagName')

element.getElementsByTagName('tagName')

相同标签名元素可以存在多个，故该方法返回是一个集合，但是注意是伪数组(无法使用Array中方法)其可以像数组一样使用索引访问元素，但是无法使用Array中的方法

3.通过标签的name属性获取,返回元素对象数组

语法：document.getElementsByName('name')

多个元素可以使用相同的name，返回元素对象数组

4.通过标签的class属性获取

语法：document.getElementsByClassName('className')

class属性名可以多次使用，返回元素对象数组

示例：

    <div id="box1" class="box" name="mingzi"></div>
    <div id="box2" class="box" name="mingzi"></div>
    <div id="box3" class="box" name="mingzi"></div>
    <script>
        //通过id获取
        var id1 = document.getElementById('box1');
        console.log(id1);  
        //通过标签名获取
        var tagN = document.getElementsByTagName('div');
        console.log(tagN); 
        console.log(Array.isArray(tagN));  //false  不是一个数组
        //通过标签的name属性获取
        var na = document.getElementsByName('mingzi');
        console.log(na);
        //通过标签的class属性获取//通过标签的class属性获取
        var class1 = document.getElementsByClassName('box');
        console.log(class1);
    </script>

除了这四种方法，HTML5中还新增了获取方法，但是要考虑浏览器的兼容性

1.querySelector():根据id、class属性、标签名获取单个元素对象(第一个元素对象)

2.querySelectorAll()：选择所有元素

语法：

document.querySelector();

document.querySelectorAll();

操作元素内容

通常使用如下三种方法，都可以用来操作元素内容，它们之间的区别是：

1.innerHTML：使用时保持标签样式和编写格式(包括空格换行等)

2.innerText：去掉所有格式和标签的纯文本内容

3.textContent：去掉标签，保留文本格式

    <div id="box">
        <span>文本内容</span>
        <p>
            <a href="https://www.csdn.net/">CSDN社区</a>
        </p>
    </div>
    <script>
        var a = document.getElementById('box');
        console.log(a.innerHTML);
        console.log(a.innerText);
        console.log(a.textContent);
    </script>

操作元素样式

通常通过两种方法来操作元素样式，一个是操作style属性，一个是操作className属性

1.操作style属性

语法：元素对象.style.样式属性名

样式属性名：对应CSS属性名，将CSS样式名中的'-'去除，将其后的英文首字母大写（驼峰命名）例如：background-color-->backgroundColor

    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        box.style.width = '100px';
        box.style.height = '100px';
        box.style.backgroundColor = 'blue';
        box.style.border = '10px solid red';
        //上述设置相当于在css中如下设置
        /* 
            #box{
                width:100px;
                height:100px;
                background-color:blue;
                border:10px solid red;
            }
         */
    </script>

2.操作className属性

语法：元素对象.className

若元素中有多个类名，可以在className中以空格分隔

我们可以做一个例子

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid greenyellow;
    }
    .before{
        background-color: aqua;
    }
    .after{
        background-color: green;
        color: white;
    }
</style>
<body>
    <!-- 使用className更改元素样式 -->
    <div class="before">文本内容</div>
    <script>
        var change = document.querySelector('div');
        change.onclick = function(){
            this.className = 'after';
        };
    </script>
</body>

上例通过单击div元素改变元素样式，className由'.before'变成'.after'，可以在开发者工具中查看class属性名的变化