DOM基础

最新推荐文章于 2023-04-18 14:49:28 发布

迪卢克的现任

最新推荐文章于 2023-04-18 14:49:28 发布

阅读量616

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_53644435/article/details/121519478

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、初识Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。

二、DOM树

DOM是文档对象模型利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式设置等操作；

DOM中将HTML文档视为树结构，被称之为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

接下来针对DOM中个节点的专有名词解释如下：

文档（document）：可以把一个页面当成一个文档
元素（element）：页面中的所有标签都是元素
节点（node）：网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），在DOM中会把所有的节点都看作是对象，这些对象拥有自己的属性和方法

三、获取元素

1.利用DOM 获取元素

根据id获取元素	document.getElementById('id')
根据标签获取元素	document.getElementsByTagName('标签名');
根据name获取元素	document.getElementsByName('name名');

HTML5中为document新增了以下几个方法

document.getElementsByClassName()方法，用于通过类名来获得某些元素集合。

querySelector()和querySelectorAll()

querySelector()方法用于返回指定选择器的第一个元素对象。
querySelectorAll()方法返回指定选择器的所有元素对象集合。

2.获取特殊元素

方法	作用
document.body	返回文档的body元素
document.title	返回文档的title元素
document.documentElement	返回文档的html元素
document.forms	返回对文档中所有Form对象引用
document.images	返回对文档中所有Image对象引用

四、事件基础

1.事件三要素

事件源：触发事件的元素（谁触发了事件）
事件类型：如 click 单击事件（触发了什么事件）
事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数（触发事件以后要做什么）

案例演示：为按钮绑定单击事件，触发按钮事件后，会弹出一个信息。

<input type="text" id="userName">
    <button id="btn" onclick="f1()">单击按钮</button>
    <div id="dt"></div>
    <script>
        //获取按钮
        var btn = document.getElementById('btn');
        //给按钮注册事件及事件处理程序
        btn.onclick = function(){
            alert('你单击了按钮')
        }
        function f1(){
            alert('你单击了按钮')
        }
       
    </script>

2.常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标左键按下
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

五、操作元素

利用DOM提供的属性实现对元素内容的操作

1.操作元素的内容

方法	作用
element.innerHTML	设置或返回元素开始和结束标签之间HTML。包括HTML标签，同时保留空格和换行
element.innerText	设置或返回元素的文本内容，在返回的时候会去除HTML标签和多余的空格、换行，在设置的时候会进行特殊字符转义
element.textContent	设置或者返回指定节点的文本内容，同时保留空格和换行

利用innerHTML、innerText、textContent在控制台输出一段HTML文本。

<body>
    <div id="box">
        西安邮电大学
        <p>
            西北政法大学
            <a href="https://www.baidu.com">去百度</a>
        </p>
    </div>
    <script>
        var box = document.getElementById('box');
        console.log("innerHTML:",box.innerHTML);
        console.log("innerText:",box.innerText)
        console.log("textContent:",box.textContent)
    </script>

打印结果如下

可以看到三种方法得到的结果不相同事实上：

innerHTML在使用时会保持编写的格式以及标签样式
innerText去掉所有格式以及标签的纯文本内容
textContent属性在去掉标签后会保留文本格式

2、常用元素的属性操作

在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性，例如，对于一个img图片元素来说，可以操作它的src、title属性等，或者对于input元素来说，可以操作它的disabled、checked、selected属性等。

<button id="flower">鲜花</button>
    <button id="grass">四叶草</button>
    <br><br>
    <img src="../images/flower.png" alt="" title="鲜花">

    <script>
        //获取页面元素
        var flower = document.getElementById('flower');
        var grass = document.getElementById('grass');
        var img = document.querySelector('img');
        //使用事件处理程序
        flower.onclick = function(){
            img.src = '../images/flower.png';
            img.title = '鲜花'
        }
        grass.onclick = function(){
            img.src = '../images/grass.png';
            img.title = '四叶草'
        }

        img.onmouseover = function(){ //鼠标光标进入img时
            img.src = '../images/grass.png';
            img.title = '四叶草'
        }
        img.onmouseout = function(){ //鼠标光标离开img时
            img.src = '../images/flower.png';
            img.title = '鲜花'
        }
    </script>

显示效果如下：

3.样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

如果需要修改的样式较少可以通过element.style修改某个属性值

如果样式修改较多，可以采取操作类名方式更改元素样式：

class因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名。

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
    .change{
        background-color: purple;
        color: #fff;
        font-size: 25px;
        margin-top: 100px;
    }
</style>
<body>
    <div class="first">西安</div>
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        //2.注册事件
        div.onclick = function(){
            this.style.height = '200px'
            this.className = 'first change'
        } 
    </script>

可以看到在执行点击时间后div的样式发生了改变；

迪卢克的现任

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础

一、初识Web APIWeb API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。...
复制链接

扫一扫

专栏目录