• JavaScript-DOM

    DOM

    全称：DOM(Document Object Model--文档对象类型) 

    作用：用来操控网页类容的功能，开发网页特效和实现用户交互

    DOM 结构

    将HTML文档以树形结构表现出来称之为DOM树

    获取DOM 

    语法：document.querySelector('css选择器')

    参数：包含一个或多个css选择器字符串

    返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象

    1.   <div class="box">
    2.     1
    3.   div>
    4.   <div>2div>
    5.  
    6.   <script>
    7.     const box= document.querySelector('div');
    8.    console.log(box);
    9.   script>

    如果没有指明获取的是第几个div，那么默认为第一个 

     

    修改DOM元素内容

    想要修改DOM元素里面的内容，可以用以下两种元素属性来修改：

    • 对象名.innerText
    • 对象名.innerHTML 

    元素innerText属性 

        作用：

    • 将文本内容增添/更新到标签的位置
    • 显示文本内容，并不解析标签
    1. <div>1div>
    2. <div>2div>
    3.  
    4.   <script>
    5.     const box= document.querySelector('div');
    6.    console.log(box.innerText);
    7.   script>

    显示第一个标签div的文本内容

    更新标签文本的内容 

    1. <body>
    2. <div>1div>
    3. <div>2div>
    4.  
    5.   <script>
    6.     const box= document.querySelector('div');
    7.    console.log(box.innerText);
    8.    box.innerText='first';
    9.    console.log(box.innerText);
    10.   script>
    11. body>

     元素innerHTML属性

        作用：

    • 将文本内容增添/更新到标签的位置
    • 显示文本内容，会解析标签

    将元素innerText和元素innerHTML做对比 

    1. <body>
    2. <div class="a">1div>
    3. <div class="b">div>
    4.  
    5.   <script>
    6.     const box= document.querySelector('.a');
    7.     const box1= document.querySelector('.b');
    8.    box.innerText='first';
    9.    box1.innerHTML='first';
    10.   script>
    11. body>

    我们发现innerText只会显示将标签显示为文本内容，而innerHTML会解析标签 

    修改DOM元素属性

    我们可以同js来修改标签元素属性

    常见的属性：href，title，src等

    语法：对象名.属性=值 

    1. ​
    2.  
    3. <body>
    4. <img src="" alt="">
    5.   <script>
    6.   const img=document.querySelector('img');
    7.   img.src='./img/durant.jpg'
    8.   
    9.   script>
    10. body>
    11.  
    12. ​

    修改元素样式属性

    可以通过js来修改标签元素的样式属性

    比如修改标签div的宽和高，更换背景颜色

     通过style修改样式

    语法：对象名.style.属性名='值' 

    1. <body>
    2. <div>div>
    3.   <script>
    4.   const box=document.querySelector('div');
    5.   box.style.width='200px';
    6.   box.style.height='200px';
    7.   box.style.backgroundColor='black';
    8.   box.style.border='2px solid red '
    9.   
    10.   script>
    11. body>

    通过类名(className)修改样式

    如果修改的样式较多，可以用类名来修改

    由于关键字是class，所以用className

    语法：对象名.className='类名'

    用className赋值时会用新值覆盖之前的值

    1. <body>
    2. <div class="b">div>
    3.   <script>
    4.   const box=document.querySelector('.b');
    5.   box.className='box1';
    6.  
    7.  
    8.   script>
    9. body>

    标签div的类名被修改为了box1 

     

    通过classList来修改样式

    由于className会覆盖掉原先的类名，所以HTML5新增了一个classList来增删类名

       语法：

    • 对象名.classList.add('类名')          ----增加一个类名
    •  对象名.classList.remove('类名')              ---删除一个类名
    • 对象名.classList.toggle('类名')                 ---切换一个类名，有就删除，没有就加上

    追加一个类名，使这个元素拥有这个类名同样的效果 

    1.   <style>
    2.     div{
    3.       width: 200px;
    4.       height: 200px;
    5.     }
    6.     .red{
    7.       background-color: red;
    8.     }
    9.   style>
    10. head>
    11. <body>
    12. <div >div>
    13.   <script>
    14.   const box=document.querySelector('div');
    15.   box.classList.add('red');
    16.  
    17.  
    18.   script>
    19. body>

    标签div拥有两个类名 

    操作表单元素属性

    获取表单值：DOM对象.属性名

    设置表单值:   DOM对象.属性名=值

    将表单的文本类型转换为密码类型，将隐藏其内容 

    1. <body>
    2. <input type="text" value="durant">
    3.   <script>
    4.   const word=document.querySelector('input')
    5.   word.type='password';
    6.  
    7.   script>
    8. body>

     

    表单中用布尔值表示了增删属性

    true表示添加了该属性

    false表示移除了该属性 

    如：disabled ， checked ,selected

    1. <body>
    2. <input type="checkbox">
    3.   <script>
    4.   const check=document.querySelector('input')
    5.   check.checked=true;
    6.   script>
    7. body>

    当checked为true时，就表示勾选，为false就取消勾选 

    按钮的属性disabled，默认状态是不禁用为'false'

    1. <body>
    2. <button>按钮button>
    3.   <script>
    4.   const btn=document.querySelector('button')
    5.   btn.disabled='true';
    6.   script>
    7. body>

    按钮禁用之后变灰且按钮不能按 

    自定义属性

    标签有自带的属性，也有自定义属性

    一个标签可以设置多个自定义属性

    语法：

    获取值的语法：对象名.dataset.自定义属性名

    1. <body>
    2.   <div data-numbers="1" data-id="one">1div>
    3.   <script>
    4.    const num=document.querySelector('div');
    5.    console.log(num.dataset.id);
    6.    console.log(num.dataset);
    7.   script>
    8. body>

    全部获取可以直接写对象名.dataset 

     

     

  • 相关阅读:
    go 内存泄露
    Docker常见面试题集锦
    2022年03月 C/C++（五级）真题解析#中国电子学会#全国青少年软件编程等级考试
    【Vue.js】vue-cli搭建SPA项目并实现路由与嵌套路由---详细讲解
    音视频转换器 Permute 3 for mac中文
    深入理解MyBatis一级缓存和二级缓存【超详细源码解析】
    【Android笔记18】Android中的Intent对象介绍及常见属性的使用
    MyBatis之SessionFactory与Session简介说明
    基于Python实现的心脏衰竭致死相关因素研究
    [C++] 布隆过滤器的模拟实现
  • 原文地址：https://blog.csdn.net/Kevin7_35Durant/article/details/139388920