JavaScript--【JS】DOM学习_js中如何写入左右尖括号-CSDN博客

本文链接：https://blog.csdn.net/ZJie0/article/details/111407904

这篇博客介绍了DOM的基本概念，包括文档对象模型的结构和内容，以及如何通过DOM接口获取和操作HTML元素。文中详细讲解了根据ID、标签名、类名和选择器获取元素的方法，并展示了如何使用JavaScript改变元素内容、样式和属性。此外，还探讨了事件处理，包括事件的概念、类型和处理程序，以及常见的鼠标事件。最后，文章演示了如何通过DOM来动态改变网页的样式和内容，实现与用户的交互。

摘要由CSDN通过智能技术生成

DOM学习

什么是DOM

DOM——文档对象模型

文档对象模型，是由W3C组织推荐的一种处理可扩展标记语言(xml)的标准编程接口。

XML和HTML：

XML：可扩展标记语言，主要是通过自定义标签进行对数据保存处理

HTML：超文本标记语言，是一些已经规定好的一套标签

W3C已经定义好了一系列的DOM接口，我们目前主要通过这些DOM接口进行改变网页内容、结构和样式

DOM的内容

DOM中最大最原始的对象是文档对象

DOM的结构其实就是一个HTML的标准文档结构

文档-HTML：根元素

head元素
1. title元素
2. mate元素
3. …
body元素
1. h1-h6
2. div
3. …

文档：一个页面就是一个文档，一个文档在DOM中使用document表示

节点：网页中的所有内容，在文档中所有的节点(标签、属性、文本、注释等)，使用node表示

标签节点：网页中所有的标签，通常称为元素节点，也叫作元素，用element表示

总结：以上的所有内容在DOM中都是以对象的方式表示

获取元素

为什么要获取元素？

例如：我们想要操作页面上的某部分（显示/隐藏，动画），需要先获取到该部分对应的元素，再对其进行操作。

根据ID获取元素，ID指的是给元素的ID属性值

var a=document.getElementById("ol1");

返回值是元素对象，（如果id不存在，返回null）

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer =    document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

根据标签名称获取元素，名称指的是元素的标签名

document.getElementsByTagName("li");
element.getElementsByTagName("li");

<body>
    <ul>
        <li>知否知否，应是等你好久11</li>
        <li>知否知否，应是等你好久22</li>
        <li>知否知否，应是等你好久33</li>
        <li>知否知否，应是等你好久44</li>
        <li>知否知否，应是等你好久55</li>
    </ul>
    <ul id="nav">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

根据标签名在指定的对象中寻找元素

返回值是元素对象集合(伪数组)

注意：

因为获取元素的最终结果是一个伪数组，因此在使用元素的时候需要遍历

而且得到的元素对象是动态的，当页面里面增加了标签，集合中的元素也会增加

H5新增获取元素方式
1. 根据类名进行获取
```
var a=document.getElementsByClassName("like");
```
2. 根据选择器进行获取
```
var a=document.querySelector(".like");
```
  只会找到和选择器匹配的第一个元素
3. 根据选择器进行获取
```
var a=document.querySelectorAll(".like");
```
  会找到所有的和选择器匹配的元素，并返回一个元素列表NodeList
  
  注意：
  
  querSelector和querySelectorAll里面的选择器需要加引号，比如：document.querSelector(’#nav’)

获取特殊元素(html,body)

var a=document.body;//获取body元素,返回body元素对象

var a=document.documentElement;//获取html元素，返回html元素对象

事件的使用

事件的概念

简单理解为：需要进行触发，触发之后会进行一些响应工作

JS中帮助我们创建动态页面，或者对页面中的内容起到侦测的行为。基本上每个元素都有一些事件操作，当我们触发了事件的机制，那么就可以进行一些其他操作

事件的条件

主角(事件源)：触发事件的元素
发生什么事(事件类型)：比如单击click

做了什么(事件处理程序)：事件触发后执行的代码(函数)。这个函数就是在这格元素被触发了对应的事件后自己执行的函数。

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
</body>

执行事件的步骤

获取事件源
绑定事件
添加事件的处理程序
运行并触发事件

    <div id="mydiv">
        这是一个div
    </div>

    <script>
        window.onload=function(){
            // 获取事件源
            var mydiv=document.querySelector("#mydiv");
            // 绑定事件
            mydiv.onclick=function(){
                // 添加程序
                alert("你好");
            }
        }

常用的鼠标事件

onclick：鼠标点击左键触发
onmouseover：鼠标经过时触发
onmouseout：当鼠标离开时触发
onmousemove：当鼠标移动时触发
onmousedown：当鼠标按下时触发
onmouseup：当鼠标弹起时触发
onfocus：当获取到鼠标焦点时触发
onblur：当失去鼠标焦点时触发

操作元素

JS中的DOM操作主要可以改变网页的内容、结构(标签)、样式。可以使用DOM操作元素来改变元素里面的内容、属性等，同样这些操作针对于DOM而言也是通过操作对象的属性来实现的

改变元素里的内容

element.innerText:从起始位置到终止位置的内容，但它除去html标签，同时空格和换行也会去掉。

element.innerHTML:起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。

    <input type="text" value="请输入一个内容" id="txt">
    <h3 id="myh3"><u>改变之前的内容</u></h3>
    <h2 id="myh2"><u>改变之前的内容</u></h2>
    <b id="myb">a</b>
    <script>
        window.onload=function(){
            var txt=document.getElementById("txt");
            txt.onmousedown=function(){
                txt.value="改变之后";
            }

            var h3=document.querySelector("#myh3");
            h3.onmousedown=function(){
                h3.innerText="改变之后";
            }

            var h2=document.querySelector("#myh2");
            h2.onmousedown=function(){
                h2.innerHTML="改变之后";
            }

            var b=document.getElementById("myb");
            b.onmousedown=function(){
                b.innerHTML="<u>这是下划线</u>";（识别标签，出现下划线）
                //b.innerHTML="<u>这是下划线</u>";（不会识别标签，连同标签名一起显示）
            }
        }
    </script>

对于文本框而言，其内容属于value属性的值
对于其他标签内容指的是写在两个标签之间的内容部分，所以无法使用value属性实现
解决这个问题使用两个节点对象属性
1. 元素的innerText属性
2. 元素的innerHTML属性
这两个属性都可以修改一个节点之间的内容，对于HTML文件而言能够识别"<>"，如果内容里面有"<>"，则对于HTML文件而言可能会将这个内容字符串里面的"<>"当成标签处理。

标签是指：以"<“开头，并且以字母或者”/“作为尖括号内部内容开头，以”>"结束的组合称为标签。而在HTML文件中对于标签如果是标准的html标签则按照html作用实现，如果不是则只显示其标签之内的文本，不显示标签。

两者区别
1. innerText
  
  在获取内容操作时，不会将内部的标签进行字符串处理，不会获取标签
  
  在设置内容时，会将字符串直接输出到页面不会解析内容中的"<>"，并且会保留字符串内的空格及换行。
2. innerHTML
  
  在获取内容操作时，会将其内部的所有标签及内容全部进行字符串处理并返回
  
  在设置内容时，会将字符串里面的"<>"进行解析然后再体现到页面中，不会会保留字符串内的空格及换行。

常用元素属性操作

innerText、innerHTML：改变元素之间的内容
src：改变元素的资源路径，将资源直接下载并加载到这个界面中
href：改变元素的链接资源，直接跟随这个路径找到资源
id、alt、title

获取元素属性：元素.属性名

设置元素属性：元素.属性名=属性值

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button> <br>
    <img src="images/ldh.jpg" alt="" title="刘德华">
    <script>
        // 修改元素属性  src
        // 1. 获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img');
        // 2. 注册事件  处理程序
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg';
            img.title = '张学友思密达';
        }
        ldh.onclick = function() {
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>
</body>

表单元素的属性操作

利用DOM操作进行对页面内的表单元素的属性进行操作

例如：value、type、checked、selected、disabled

获取元素属性：元素对象.属性名

设置元素属性：元素对象.属性名=属性值

注意：在设置这些属性的时候disabled、checked、selected属性的值是布尔类型

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

操作样式

可以用DOM操作获取到元素对象之后，同时可以使用JS对元素的样式(大小、颜色、位置等)进行操作

常用方式

element.style开始对style(样式)的内容进行操作
element.className 通过对类名进行样式操作

通过style属性操作样式

元素对象的style属性也是一个对象
通过对元素的style进行样式属性=值
JS里面样式命名方式采取的是驼峰命名法：backgroundColor

JS修改style样式操作，产生的是行内样式，CSS权重这里的高

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

通过操作className属性

元素对象.className=值，使用className并非class，因为JS里面的class是特殊关键字
如果样式修改的比较多，利用这种方式修改更为方便
className会直接更改元素的class属性的内容，会覆盖原始的class值，如果不想覆盖则使用多类名

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>