zoukankan      html  css  js  c++  java
  • JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等

     

    1.操作元素

    JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的)

    2. 改变元素内容(获取或设置)

    innerText改变元素内容

    <body>
       <button>显示当前系统时间</button>
       <div>某个时间</div>
       <p>1123</p>
       <script>
           // 当我们点击了按钮, div里面的文字会发生变化
           // 1. 获取元素
           var btn = document.querySelector('button');
           var div = document.querySelector('div');
           // 2.注册事件
           btn.onclick = function() {
               // div.innerText = '2019-6-6';
               div.innerHTML = getDate();
          }
           function getDate() {
               var date = new Date();
               // 我们写一个 2019年 5月 1日 星期三
               var year = date.getFullYear();
               var month = date.getMonth() + 1;
               var dates = date.getDate();
               var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
               var day = date.getDay();
               return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day];
          }
       </script>
    </body>

    innerText和innerHTML的区别

    • 获取内容时的区别:

    innerText会去除空格和换行,而innerHTML会保留空格和换行

    • 设置内容时的区别:

    innerText不会识别html,而innerHTML会识别

    案例代码

    <body>
       <div></div>
       <p>
           我是文字
           <span>123</span>
       </p>
       <script>
           // innerText 和 innerHTML的区别
           // 1. innerText 不识别html标签 非标准 去除空格和换行
           var div = document.querySelector('div');
           // div.innerText = '<strong>今天是:</strong> 2019';
           // 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
           div.innerHTML = '<strong>今天是:</strong> 2019';
           // 这两个属性是可读写的 可以获取元素里面的内容
           var p = document.querySelector('p');
           console.log(p.innerText);
           console.log(p.innerHTML);
       </script>
    </body>

    3. 常用元素的属性操作

    1. innerText、 innerhTML 改变元素内容
    2. src、href
    3. 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>

    获取属性的值

    元素对象.属性名

    设置属性的值

    元素对象.属性名 = 值

    表单元素中有一些属性如: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>

    4. 样式属性操作

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

    常用方式

    1. element. style   行内样式操作

    2. element. className  类名样式操作

     

    方式1:通过操作style属性

    元素对象的style属性也是一个对象!

    元素对象.style.样式属性 = 值;

    注意:
    1.JS里面的样式采取驼峰命名法比如fontSize、backgroundColor
    2.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>

    方式2:通过操作className属性

    元素对象.className = 值;

    因为class是关键字,所有使用className。

    主意:
    1.如果样式修改较多,可以采取操作类名方式更改元素样式。


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

    案例代码

    <body>
       <div class="first">文本</div>
       <script>
           // 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
           var test = document.querySelector('div');
           test.onclick = function() {
               // this.style.backgroundColor = 'purple';
               // this.style.color = '#fff';
               // this.style.fontSize = '25px';
               // this.style.marginTop = '100px';

               // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
               // 3. 如果想要保留原先的类名,我们可以这么做 多类名选择器
               // this.className = 'change';
               this.className = 'first change';
          }
       </script>
    </body>

    5. 小结

  • 相关阅读:
    leetcode 279. Perfect Squares
    leetcode 546. Remove Boxes
    leetcode 312. Burst Balloons
    leetcode 160. Intersection of Two Linked Lists
    leetcode 55. Jump Game
    剑指offer 滑动窗口的最大值
    剑指offer 剪绳子
    剑指offer 字符流中第一个不重复的字符
    leetcode 673. Number of Longest Increasing Subsequence
    leetcode 75. Sort Colors (荷兰三色旗问题)
  • 原文地址:https://www.cnblogs.com/llanq123/p/13716354.html
Copyright © 2011-2022 走看看