DOM（文档对象模型）

梦樊哥哥

已于 2022-02-19 18:26:42 修改

阅读量2k

点赞数 3

分类专栏： JS详解（从零到一）文章标签： javascript

于 2022-02-15 16:31:55 首次发布

本文链接：https://blog.csdn.net/mengfanshaoxia/article/details/122941376

版权

JS详解（从零到一）专栏收录该内容

25 篇文章 5 订阅

订阅专栏

5.5.3 removeAttibute()

1、DOM是什么

DOM （ Document Object Model ，文档对象模型），是用来呈现以及与任意 HTML 或 XML 文档交互的API （ Application Program Interface ，应用程序接口）。 DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或注释等等）。

DOM 是万维网上使用最为广泛的 API 之一，它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。

DOM 并不是天生就被规范好了的，它是浏览器开始实现 JavaScript 时才出现的。这个传统DOM 有时会被称为 DOM 0 。现在， WHATWG 维护 DOM 现存标准。

2、DOM 树

DOM 树又叫文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个 HTML 页面就是一个文档，使用 document 表示

3、节点

节点是构成网页最基本的组成部分，网页中的所有内容在文档树中都是节点（标签、属性、文本、注释等），使用node 表示

（1）标签节点：也叫元素节点，指网页中的所有标签，使用 element 表示；

（2）属性节点：指元素节点的属性；

（3）文本节点：指元素节点的内容。

4、获取元素

想要对 DOM 进行操作，首先需要获取页面中的元素，在 JavaScript 中，提供了以下几种获取页面元素的方法。

4.1、根据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>

4.2、根据标签名获取

语法格式： var 返回对象集 = document . getElementsByTagName ( ' 标签名称 ' );

作用：根据指定的标称名称返回这些对象。

示例：

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

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

    <ul id="first">
        <li>北京</li>
        <li>天津</li>
        <li>上海</li>
        <li>重庆</li>
    </ul>
    <script>
        // 获取父级元素 
        var ul = document.getElementById('first');
        console.log(ul);
        // 通过父级元素来获取子元素 
        lis = ul.getElementsByTagName('li');
        console.log(lis);
    </script>

4.3、根据 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>

4.4、根据类名来获取

语法格式： var 元素对象集 = document . getElementsByClassName ( ' 类名称 ' );

作用：根据元素的样式名称来获取元素集（也就是元素的 class 属性来获取）。

示例：

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

4.5、根据选择器获取

根据指定选择器获取元素对象有两种方式：一是获取单个，一是获取多个。

获取单个对象： 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>

4.6、获取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>

4.7、获取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>

5、操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，因此可以利用 DOM 操作元素来改变元素里面的内容、属性等。

5.1、改变内容

在 DOM 中改变元素内容通常使用元素的 innerText 和 innerHTML 属性来实现。

示例：

    <div class="box"> 今年是<strong>2022</strong>年第一天 </div>
    <script>
        // 1. 获取元素
        var box = document.querySelector('.box');
        console.log(box);
        // 2. 获取元素的内容 
        // 2.1 innerHTML 
        var content = box.innerHTML;
        console.log(content);
        // 2.2 innerText 
        var content = box.innerText;
        console.log(content);
        // 3. 设置元素内容 
        // 3.1 innerHTML 识别htm标签，同时保留空格和换行
        box.innerHTML = '<font color="red">这是红色的字</font>';
        // 3.2 innerText 不识别html标签，不保留空格和换行
        // box.innerText = '<font color="red">这是红色的字</font>';
    </script>

innerHTML和 innerText相同点：

（1）的 innerHTML 或 innerText 属性可以获取对象的内容；

（2）通过给对象的 innerHTML 或 innerText 属性赋值可以改变对象的内容。

innerHTML和 innerText区别：

（1）innerHTML属性会把内容中的 html 元素解析后再执行，而 innerText 不会解析内容中的 html 元素。

（2）如果 innerText 用于获取对象的内容，当内容中包含有 html 元素时，获取中它会把这个元素给删除了，而innerHTML不会。

（3）如果innerHTML用于设置对象的内容，当内容中包含有 html 元素时，它会把这些元素原封不动的设置给对象（不删除空格和换行），而innerText会删除空格和换行。

5.2、元素属性

在 DOM 中，改变元素属性是通过元素对象 . 属性名的方式来实现的，它同样具有读写功能。元素可操作的常用属性有：src 、 href 、 id 、 alt 、 title 以及自定义属性等。

演示案例：

    <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>

5.3、表单元素

在 Web 开发中，表单是一种常用的元素，利用 DOM 可以操作如下表单元素的属性。

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

演示案例：

    <input type="text" name="name" value="123456"><br>
    <input type="checkbox" name=""><br>
    <select name="">
        <option value="">--请选择--</option> 
        <option value="北京">北京</option> 
        <option value="上海">上海</option>
         <option value="重庆">重庆</option> 
        </select>

    <script>
        var input = document.querySelector('input')
            // 获取type
        console.log(input.type);
        // 设置type 
        //input.type = 'password'; 
        // 获取value 
        console.log(input.value);
        // 设置value 
        input.value = 'jock'
            // 获取disabled 
        console.log(input.disabled);
        // false 
        // 设置 disabled 
        input.disabled = true;
        // 获取元素 
        var ck = document.querySelector('[type="checkbox"]');
        console.log(ck);
        // 获取选中状态 
        console.log(ck.checked); // false 
        // 设置选中状态 
        ck.checked = true;
        // 获取下拉列表
        var sl = document.querySelector('select');
        console.log(sl);
        //console.log(sl[2]);
        var op = sl[2];
        console.log(op.selected);
        // 设置被选中 
        op.selected = true;
    </script>

5.4、样式元素

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

5.4.1、style

示例：

    <style>
        .box {
            width: 150px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>

    <div class="box"></div>
    <script>
        // 通过 JS 来改变 div 的宽和背景颜色 
        var box = document.querySelector('.box')
            //console.log(box); 
            // 通过 style 方式
        box.style.width = '300px';
        box.style.backgroundColor = 'red';
    </script>

注意：如果样式名称中包含有连接符（-），那么连接符要去掉，同时后面的字母要大写。

5.4.2、className属性

示例：

  
<style>
        .box {
            width: 150px;
            height: 100px;
            background-color: blueviolet;
        }
        
        .bg {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
        }
        
        .ft {
            color: white;
        }
    </style>

    <div class="box">这是文字</div>
    <script>
        // 通过 JS 来改变 div 的宽和背景颜色 
        var box = document.querySelector('.box');
        console.log(box.className);
        box.className = 'bg ft'
    </script>

说明：

（1）通过对象.className 的方式可以获取当前对象的样式名称；

（2）通过对象.className='值' 的方式可以给当前对象设置样式。

5.5、操作属性、

对属性的操作也可以设置属性值，也可获取属性值。

5.5.1、setAtrribute()

这个方法可以给元素设置属性。它的语法如下：

对象名称.setAttribute('属性名', '属性值');

示例：

     <style>
        div {
            width: 100px;
            height: 30px;
            border: 1px solid #000000;
        }
        
        .bg {
            background-color: cornflowerblue;
            color: white;
        }
    </style>

  <div title="这是标题">这是内容</div>
    <script>
        var div = document.querySelector('div')
            // 设置属性 
        div.setAttribute('class', 'bg');
        div.setAttribute('title', '我改了标题');
    </script>

5.5.2、getAttribute()

这个方法是用于获取对象中的指定属性名称的值。它的语法如下：

属性值 = 对象 . getAttribute ( ' 属性名 ' ) ;

示例：

    <div title="这是标题">这是内容</div>
    <script>
        var div = document.querySelector('div')
            // 获取title属性 
            //console.log(div.title); 
        var attrValue = div.getAttribute('title');
        console.log(attrValue);
    </script>

5.5.3 removeAttribute()

这个方法是用于删除对象中指定的属性。它的语法为：

对象 . removeAttribute ( ' 属性名 ' );

示例：

    <div title="这是标题">这是内容</div>
    <script>
        var div = document.querySelector('div');
        // 删除title属性
        div.removeAttribute('title');
    </script>

5.5.4、自定义属性

自定义属性目的是为了保存并使用临时数据，这些数据不需要从数据库中获取。自定义属性是通过 setAttribute(' 属性 ', ' 值 ') 来设置，通过 getAttribute(' 属性 ') 来获取。

由于有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，为了解决这种问题，H5 中规定了自定义属性都以 data - 开头来作为属性名。

H5 中规定的属性定义方式可以使用 getAttribute(' 属性 ') 方式来获取，也可以使用 H5 中新增的属性获取方式来获取。

示例：

    <div data-index="1" data-list-name="jock"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('data-index'));
        div.setAttribute('data-title', '标题');
    </script>

6、DOM事件

6.1、什么是事件

所谓事件是指文档或浏览器窗口中发生的一些特定的交互瞬间。 JavaScript 与 HTML 之间的交互就是通过事件来实现的。对于 Web 应用来说，鼠标点击，鼠标移动，按下键盘某个键都是属于事件。而这些相应操作就会触发相应的响应机制来进行事件处理。

6.2、事件的要素

对于事件来说，它包含三个要素：事件源、事件类型和事件处理程序。

（1）事件源：触发事件的元素.

（2）事件类型：触发了哪种类型的事件，如 click 、 mouseover 、 focus 、 keyup 等。

（3）事件处理程序：事件触发后要执行的程序代码，通常是一个函数。

示例：

    <button id="btn">点我会触发事件</button>
    <script>
        // 1. 获取元素
        var btn = document.querySelector('#btn')
            // 1.事件源：这个按钮就是事件源 
            // 2. 事件类型：这个按钮要点击后才会触发，那么它的事件类型就是点击事件 
            // 3. 事件处理程序 
        btn.onclick = function() {
            console.log('你点了我');
        };
    </script>

6.3、常见鼠标事件类型

DOM 事件非常多，而这些事件中使用最多最频繁的就是鼠标事件，常用的鼠标事件如下表所示。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见鼠标事件类型</title>
    <style>
        .box {
            width: 150px;
            height: 100px;
            border: 1px solid #000000;
        }
        .bg {
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
<div class="box"></div>
<input type="text" id="account" value="123456">
<script>
    var box = document.querySelector('.box')
    // 单击事件：onclick
    /*box.onclick = function () {
        console.log('点我干嘛？');
    };
    // 双击事件：ondblclick
    box.ondblclick = function () {
        console.log('别烦我。');
    };
    */

    // 鼠标经过时触发：onmouseover
    box.onmouseover = function () {
        this.className = 'box bg';
    };
    // 鼠标离开时触发:onmouseout
    box.onmouseout = function () {
        this.className = 'box';
    };
    // 鼠标移动时触发:onmousemove
    box.onmousemove = function () {
        console.log('你摸我干嘛');
    };

    var input = document.querySelector('#account')
    // 获取鼠标焦点时触发:onfocus
    input.onfocus = function () {
        //console.log(this.value)
        this.style.backgroundColor = 'cornflowerblue';
    };
    // 失去鼠标焦点时触发:onblur
    input.onblur = function () {
        this.style.backgroundColor = '';
        console.log(this.value);
    };

    // 文本框内容改变时触发:onchange
    input.onchange = function () {
        console.log('内容已经被修改');
    };

    // 文本框内容被选中时触发:onselect
    input.onselect = function () {
        console.log('我不想当干部');
    };
</script>
</body>
</html>

梦樊哥哥

关注

3
点赞
踩
11

收藏

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

1、DOM是什么DOM（Document Object Model，文档对象模型），是用来呈现以及与任意 HTML 或 XML文档交互的API（Application Program Interface，应用程序接口）。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或注释等等）。DOM 是万维网上使用最为广泛的 API 之一，它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改
复制链接

扫一扫