DoM文档对象模型

Q53100

于 2022-09-22 22:45:49 发布

阅读量90

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/q53100/article/details/127000794

版权

DOM全称Document Object Model（文档对象模型）
JavaScript中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲操作web页面
文档：文档表示的就是整个HTML网页文档
对象：对象表示将网页中的每一个部分都转换为了一个对象
模型：使用模型来表示对象之间的关系，方便获取对象
DOM是一种处理HTML文档的应用程序接口，在W3C制定的DOM规范中，DOM主要包括Core DOM、XML DOM和HTML DOM。JavaScript中DOM一般指HTML DOM
每创建一个网页，DOM就会根据这个网页创建一个文档对象，DOM就是这个文档对象的模型，这个模型表示为树状模型。在这个树状模型中，网页中的元素与内容表现为一个个相互连接的节点，所以说一个网页实际上就是一个文档对象
浏览器已经提供文档节点对象，这个对象是window对象属性，可以在页面中直接使用，文档节点代表的是整个网页

DOM将网页表示为一颗树，该树的节点类型有多种。

元素节点——html标签

文本节点——文本

属性节点——属性总是被包含在标签里，所以属性节点总是被包含在元素节点当中。（元素节点（属性节点，文本节点））

通常可以通过开发者工具（如firebug）查看dom结构，但是要说明一点，开发者工具中的DOM并不完整，因为有些元素存在于DOM中，但是不会被开发者工具显示。比如回车会被当做一个文本节点。

常用的DOM节点类型
节点类型 ID   说明
Element 1   元素节点，HTML标签对，如<head><body><p>
Attribute 2   元素节点的属性，如<a>标签的href="xxx"属性
Text 3   文本节点，指的是元素节点中的内容，如“p”节点中的“文档段落”
Comment 4   注释节点，表示文档中的注释
Document 5   文档节点，表示整个文档对象

DocumentType 6 文档类型定义

获取元素有以下几种：

根据ID获取：

语法格式： var 元素对象 = document . getElementById ( "id 属性名称 " );
作用：通过页面中某个元素的 id 属性来获取这个元素对象。
返回值：这个方法执行后会有一个返回值，如果获取到则返回当前对象，否则返回 null 。

    <div id="box">这是一个块</div>
    <script>
        var box = document.getElementById('box');
        console.log(box);
        console.log(typeof box);
    </script>

根据标签名获取：

语法格式： var 返回对象集 = document . getElementsByTagName ( ' 标签名称 ' );
作用：根据指定的标称名称返回这些对象。

    <ul>
        <li>北京</li>
        <li>天津</li>
        <li>上海</li>
</ul>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);
    </script>

除了可以使用 document 来引用这个方法外，还可以使用它父组对象来引用这个方法。

// 获取父级元素 
        var ul = document.getElementById('first');
        console.log(ul);
        // 通过父级元素来获取子元素 
        lis = ul.getElementsByTagName('li');
        console.log(lis);

根据name属性获取：

语法格式： var 元素对象集 = document . getElementsByName ( 'name 属性名 ' )
作用：根据 name 属性来获取元素对象的集合。

 
    <p> <input type="checkbox" name="hobby" value="音乐">音乐
        <input type="checkbox" name="hobby" value="游戏">游戏
    </p>
    <script>
        var hobbies = document.getElementsByName('hobby');
        console.log(hobbies);
    </script>

根据类名来获取：

语法格式： var 元素对象集 = document . getElementsByClassName ( ' 类名称 ' );
作用：根据元素的样式名称来获取元素集（也就是元素的 class 属性来获取）。

    <div class="box">div1</div>
    <div class="box">div2</div>
    <script>
        var divs = document.getElementsByClassName('box');
        console.log(divs);
    </script>

根据选择器获取：

根据指定选择器获取元素对象有两种方式：一是获取单个，一是获取多个。
获取单个对象： var 元素对象 = document . querySelector ( ' 选择器名称 ' );
获取多个对象： var 元素对象 = document . querySelectorAll ( ' 选择器名称 ' );

    <div id="box1">有id的div</div>
    <div class="box2">有类样式的div</div>
    <div class="box2">有类样式的div</div>
    <p> <input type="text" name="account" value="xian">
        <input type="radio" name="gender" value="男">男
        <input type="radio" name="gender" value="女">女 </p>
    <script>
        // 根据标签获取 
        var div = document.querySelector('div');
        console.log(div);
        var divs = document.querySelectorAll('div');
        console.log(divs);
        // 根据id获取
        div = document.querySelector('#box1');
        console.log(div);
        // 根据类样式 
        divs = document.querySelectorAll('.box2');
        console.log(divs);
        // 根据属性选择器来获取 
        var gender = document.querySelectorAll('input[type="radio"]');
        console.log(gender);
    </script>

获取body元素：

语法格式： document . body ;
作用：获取 body 中的所有元素

 
    <div class="box"></div>
    <input type="text" name="" id="">
    <h1>h1</h1>
    <script> 
        var body = document.body;
        console.log(body);
    </script>

获取Html元素：

语法格式： document . documentElement ;
作用：获取整个 html 元素。

   <div class="box"></div>
    <input type="text" name="" id="">
    <h1>h1</h1>
    <script>
        var html = document.documentElement;
        console.log(html);
    </script>

元素属性

语法	说明
元素对象.属性名	获取元素指定属性的值
元素对象.属性名=值	设置元素指定属性的值

    <img src="1.jpeg">
    <script>
        var img = document.querySelector('img')
            // 获取src属性 
        console.log(img.src);
        // 修改src属性 
        img.src = '2.jpeg';
        // 添加属性 
        img.alt = '图片';
        img.title = '提示';
        console.log(img);
    </script>

表单属性

属性	说明
type	表单元素类型
value	表单元素值
checked	表单元素选中zhuanzhuan状态
selected	表单元素选择状态
disbled	表单元素禁用开关

这些属性都具有读写操作，通过元素对象.属性名来获取元素属性值，通过元素对象.属性名= 值来设置元素属性值。而 checked、selected和disabled 元素属性的值是布尔类型。

样式元素

在 DOM 中可以通过 JavaScript 来修改元素的大小、颜色和位置等样式。常用方式有：

属性	使用	说明
style	element.style	操作行内样式
className	element.className	操作类名样式

Q53100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DoM文档对象模型

这些属性都具有读写操作，通过元素对象.属性名来获取元素属性值，通过元素对象.属性名= 值来设置元素属性值。属性节点——属性总是被包含在标签里，所以属性节点总是被包含在元素节点当中。获取多个对象： var 元素对象 = document . querySelectorAll ( ' 选择器名称 ' );获取单个对象： var 元素对象 = document . querySelector ( ' 选择器名称 ' );作用：根据元素的样式名称来获取元素集（也就是元素的 class 属性来获取）。
复制链接

扫一扫