JS学习笔记（七）-DOM操作元素

最新推荐文章于 2022-10-21 21:42:32 发布

Ludwig1597

最新推荐文章于 2022-10-21 21:42:32 发布

阅读量279

点赞数

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

本文链接：https://blog.csdn.net/Ludwig1957/article/details/112797948

版权

JavaScript 专栏收录该内容

16 篇文章 3 订阅

订阅专栏

2021.1.18

文章目录

JS学习笔记（七）
- DOM
- - 操作元素

JS学习笔记（七）

DOM

操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

改变元素内容

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

<body>
  <button>显示当前系统时间</button>
  <div>某个时间</div>
  <script>
    //当我们点击了按钮，div里面的文字会发生变化
    //1.获取元素
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    //2.注册事件
    btn.onclick = function() {
        div.innerText = '2021-1-17';
    }
  </script>
</body>

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

innerText和innerHTML的区别：

innerText不识别html标签非标准去除空格和换行
innerHTML识别html标签 W3C标准（用的更多）保留空格和换行

 <body>
   <div></div>
   <p>
      我是文字
      <span>123<span>
      var div = document.querySelector('div');
      div.innerText = '<setrong>今天</strong>';//<setrong>今天</strong>
      div.innerHTML = '<setrong>今天</strong>'//加粗的今天
      var p = document.querySelector('p');
      console.log(p.innerText);
      console.log(p.innerHTML);

常用的元素属性操作

innerText、innerHTML改变元素内容
src、href
id、alt、title

<body>
    <button id="bb">坂本</button>
    <button id="zjl">周杰伦</button> <br>
    <img src="https://i.loli.net/2021/01/18/WKE8fyluM1rQGXJ.jpg" alt="" title="坂本龙一">
    <script>
        //修改元素属性 src
        //1.获取元素
        var bb = document.getElementById('bb');
        var zjl = document.getElementById('zjl');
        var img = document.querySelector('img');
        //2.注册事件&处理程序
        zjl.onclick = function() {
            img.src = 'https://i.loli.net/2021/01/18/hBVzYK15xLnJOgp.jpg';
            img.title = '周杰伦';
        }
        bb.onclick = function() {
            img.src = 'https://i.loli.net/2021/01/18/WKE8fyluM1rQGXJ.jpg';
            img.title = '坂本龙一';
        }
    </script>
 </body>

表单元素的属性操作

利用DOM可以操作如下表单元素的属性：
type(类型属性）、value(值属性）、checked、selected、disabled

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

案例：仿京东显示密码，点击按钮将密码框切换为文本框，并可以查看密码明文
案例分析：

核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
一个按钮有两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，flag设置为1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0px;
            outline: none;
        }
        
        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="图片素材/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
    </div>
    <script>
        //1.获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        //2.注册事件&处理程序
        var flag = 0;
        eye.onclick = function() {
            //点击一次之后，flag一定要变化
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = '图片素材/open.png';
                flag = 1;
            } else {
                pwd.type = 'password';
                eye.src = '图片素材/close.png';
                flag = 0;
            }
        }
    </script>
</body>

</html>

样式属性操作

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

element.style 行内样式操作
```
<head>
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
</head>

<body>
    <div></div>
    <script>
    //1.获取元素
    var div = document.querySelector('div');
    //2.注册事件&处理程序
    div.onclick = function() {
    //div.stylel里面的属性采取驼峰命名法
        this.style.backgroundColor = 'purple';
        this.style.width = '250px';
    }
    </script>
</body>
```
Note:
1.JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor
2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比|较高

案例：淘宝点击二维码关闭按钮时关闭二维码
案例分析：
1. 核心思路：利用样式的显示和隐藏完成，display:none隐藏元素，display：block显示元素
2. 点击按钮，就让这个二维码盒子隐藏起来即可
案例：显示隐藏文本框内容
当鼠标点击文本框时，里面的默认文字隐藏，但鼠标离开文本框时，里面的文字显示。
案例分析：
1. 首先表单需要两个新的事件，获得焦点onfocus失去焦点onblur
2. 如果获得焦点，判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容
3. 如果失去焦点，判断表单内容是否为空，如果为空，则表单内容改为默认文字
element.className 类名样式操作
使用element.style获得修改元素样式，如果样式比较少或者功能简单的情况下适用。
这时我们可以通过修改类名样式操作。//适用于样式较多或者功能复杂的情况。
```
<body>
    <div>文本</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.使用element.style将我们当前元素的类名，改为change；
            this.className='change';//.change样式写在css中即可
        }
    </script>
</body>
```
Notes:
1.如果样式修改较多，可以采取操作类名方式更改元素样式。
2.class因为是个保留字，因此使用className来操作元素类名属性
3.className 会直接更改元素的类名，会覆盖原先的类名。
4.如果想要保留原先的类名，我们可以使用多类名选择器。//this.className=‘first change’;

案例：密码框格式提示错误信息
用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息。
案例分析：
1. 首先判断的事件是表单失去焦点 onblur
2. 如果输入正确则提示正确的信息颜色为绿色小图标变化
3. 如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
4. 因为里面变化样式较多，我们采取className修改样式

操作元素小结

操作元素是DOM核心内容
操作元素：

操作元素内容：
- innerText//非标准
- innerHTML//标准，常用
操作元素常见属性：src、href、title、alt等
操作表单元素属性：type、value、disabled等
操作元素样式属性
- element.style
- className

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）
注意顺序不能颠倒，首先干掉其他人，再设置自己

案例：百度换肤
案例分析：

这个案例练习的是给一组元素注册事件
给4个小图片利用循环注册点击事件
当我们点击了这个图片，让我们页面背景改为当前的图片
核心算法：把当前图片的src 路径取过来，给 body 做为背景即可

// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// 2. 循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
    document.body.style.backgroundImage = 'url(' + this.src + ')';
    }
}

案例：表格隔行变色
案例分析：

用到新的鼠标事件鼠标经过onmouseover 鼠标离开onmouseout
核心思路：鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行

自定义属性的操作

获取属性值

element.属性 //获取属性值
element.getAttribute(‘属性’);

 <body>
     <div id="demo" index="1"></div>//index是自定义属性
     <script>
        var div = document.querySelector('div');
       //1.获取元素的属性值
         //（1）element.属性
         console.log(div.id); //demo
         //（2）element.getAttribute('属性') Attribute是属性的意思
         console.log(div.getAttribute('id'));//demo
         console.log(div.getAttribute('index'));//1
     </script>
 </body>

区别：

element.属性 获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性

设置属性值
- element.属性 = ‘值’ //设置内置属性值
```
 div.id='test';
```
- element.setAttribute(‘属性’,‘值’);//主要针对于自定义属性
```
 div.setAttribute('index',2);
 div.setAttribute('class','footer');//class特殊，这里不是className
```
区别：
- element.属性 设置内置属性值
- element.setAttribute(‘属性’); 主要设置自定义的属性（标准）
移除属性
- element.removeAttribute(‘属性’);
```
 div.removeAttribute('index');
```

案例：tab栏切换(重点案例)
当鼠标点击上面相应的选项卡（tab），下面内容跟随变化
案例分析：

Tab栏切换有2个大的模块
上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想）修改类名的方式
下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
核心思路：给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。
当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的内容显示，其余隐藏（排他思想）

H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

<body>
    <div getTime="20"></div>
    <script>
        var div=document.querySelector('div');
        //console.log(div.getTime);//得不到,因为getTime是自定义属性
        console.log(div.getAttribute('getTime'));//20
    </script>
</body>

H5给我们新增了自定义属性：

设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。比如<div data-index=“1”>
或者使用 JS 设置 element.setAttribute(‘data-index’, 2)
获取H5自定义属性
- 兼容性获取 element.getAttribute(‘data-index’);
- H5新增 element.dataset.index 或者 element.dataset[‘index’]。
  ie 11才开始支持//dataset是一个集合，里面存放了所有以data开头的自定义属性。
- 如果自定义属性里面有多个-链接的单词，我们获取的时候采取-驼峰命名法。
- H5新增的获取自定义属性的方法，它只能获取以data-开头的。
```
<div data-list-name="andy"></div>
<script>
    var div = document.querySelector('div');
    console.log(div.dataset.listName);//andy
    console.log(div.dataset['listName']);//andy
</script>
```

Ludwig1597

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS学习笔记（七）-DOM操作元素

2021.1.18文章目录JS学习笔记（七）DOM操作元素改变元素内容常用的元素属性操作表单元素的属性操作样式属性操作操作元素小结排他思想自定义属性的操作H5自定义属性JS学习笔记（七）DOM操作元素JavaScript的DOM操作可以改变网页内容、结构和样式，我们利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。改变元素内容element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。<body> <.
复制链接

扫一扫

专栏目录