• JavaScript学习笔记之二（DOM API）

    目录

    1. 获取元素（querySelector）

    2. 事件(onclick)

    3. 操作元素

    3.1 获取/修改元素内容(innerHTML)

    3.2 获取/修改元素属性(.属性名)

    3.3 获取/修改元素表单属性

    3.4 获取/修改样式(style className)

    4. 操作结点

    4.1 新增结点(createElement)

    4.2 删除结点(removeChild)

    JS 分成三个大的部分
    （1）ECMAScript: 基础语法部分
    （2）DOM API: 操作页面结构
    浏览器给JS提供的原生接口，基于这样的接口，就可以针对页面上的元素进行操作了
    DOM=》文档对象模型（html中，会把每个html标签，视为是js中可以操作的对象，这个操作的对象就可以影响到界面的显示）
    （3）BOM API: 操作浏览器
    WebAPI 就包含了 DOM + BOM.

    DOM基本概念

    1. 获取元素（querySelector）

    要想操作页面上的元素，就需要先拿到对应的JS对象
    DOM中提供了一组API能够获取到网页的元素，比如querySelector，querySelectorAll
    这是一个document（页面中的全局对象，一个页面加载完成，就会自动生成一个全局变量，就叫做document，这里面就有一些属性和方法，让我们来操作页面的内容）
    这样的对象的属性

     

     可以看到只选中了，第一个元素

     所以要想全部选中，就要使用querySelectorAll，querySelectorAll返回的是一个数组，就包含了所有被选中的元素

    实际上是querySelectorAll返回的不是一个真正的原生数组，而是一个对象，只不过这个对象，有length，也能够通过下标的方式来访问内部元素，使用起来和数组没啥区别，这种就叫“伪数组”

    2. 事件(onclick)

    JS中很多代码，都是通过“事件”来触发的

    事件就是浏览器对于用户的操作行为进行了一个“统称”

    （实际上，事件也不一定全是用户操作产生的，但绝大部分是）

    事件的三要素：

    a）事件源：哪个html元素产生的事件

    b）事件类型：鼠标移动、鼠标点击、键盘事件、窗口大小改变事件...

    c）事件的处理程序：当事件产生之后，执行什么样的JS代码（回调函数，函数不会立刻调用，而是在合适的时机，被浏览器调用）

    这种写法也可以

    类似的还有这些

    3. 操作元素

    3.1 获取/修改元素内容(innerHTML)

    （1）通过对象里面的一个属性innerHTML来实现（元素里面包含的html代码是啥样的）

    onclick作用是捕获鼠标点击事件

     

    1. <body>
    2.     <div id="screen">
    3.         <ul>
    4.             <li>aaali>
    5.             <li>aaali>
    6.             <li>aaali>
    7.         ul>
    8.     div>
    9.     <button id="btn">这是获取内容的按钮button>
    10.     <button id="btn2">这是修改内容的按钮button>
    11.  
    12.     <script>
    13.         let btn = document.querySelector('#btn');
    14.         btn.onclick = function() {
    15.             let screen = document.querySelector('#screen');
    16.             console.log(screen.innerHTML);
    17.         }
    18.         let btn2 = document.querySelector('#btn2');
    19.         btn2.onclick = function() {
    20.             let screen = document.querySelector("#screen");
    21.             screen.innerHTML = '
      修改后的内容
      '      ;
    22.         }
    23.     script>
    24. body>

    java中的parselnt，是interger类的成员方法 

    这里JS中的parselnt相当于一个全局的函数（由于JS是动态类型，转为数字之后，仍然可以赋值给val）

     

     

    3.2 获取/修改元素属性(.属性名)

    通过DOM对象，.属性名   就可以进行操作了

    比如搞一个图片点击切换图片的功能

    1. <body>
    2.     <img src="111.jpg" alt="">
    3.  
    4.     <script>
    5.         let img = document.querySelector('img');
    6.         img.onclick = function() {
    7.             console.log(img.src);
    8.             if(img.src.indexOf('111.jpg') >= 0) {
    9.                 img.src = '222.jpg';
    10.             } else if (img.src.indexOf('222.jpg' >= 0)) {
    11.                 img.src = '111.jpg'
    12.             }
    13.         }
    14.     script>
    15. body>

    可以通过console.dir这个方法，打印出一个dom对象的全部属性和值 

    3.3 获取/修改元素表单属性

    表单 ( 主要是指 input 标签 ) 的以下属性都可以通过 DOM 来修改
    value:input的值
    disabled:禁用
    checked:复选框使用
    selected:下拉框使用
    type:input的类型（文本、密码、按钮、文件等）

    实现一个按钮切换的功能

    1. <body>
    2.     <input type="button" value="播放">
    3.  
    4.     <script>
    5.         let input = document.querySelector('input');
    6.         input.onclick = function() {
    7.             if(input.value == '播放') {
    8.                 input.value = '暂停';
    9.             } else if(input.value == '暂停') {
    10.                 input.value = '播放';
    11.             }
    12.         }
    13.     script>
    14. body>

    全选/取消全选按钮

    1. <body>
    2.     <input type="checkbox" id="all"> 全选 <br>
    3.     <input type="checkbox" class="girl"> 貂蝉 <br>
    4.     <input type="checkbox" class="girl"> 关羽 <br>
    5.     <input type="checkbox" class="girl"> 马超 <br>
    6.     <input type="checkbox" class="girl"> 孙尚香 <br>
    7.  
    8.     <script>
    9.         //1. 先获取元素
    10.         let all = document.querySelector('#all');
    11.         let girls = document.querySelectorAll('.girl');
    12.  
    13.         //2. 给 all 注册点击事件
    14.         all.onclick = function() {
    15.             for(let i = 0; i < girls.length; i++) {
    16.                 // all.checked 就是 all 这个复选框的选中状态
    17.                 girls[i].checked = all.checked;
    18.             }
    19.         }
    20.  
    21.         //3. 针对每个girl注册点击事件，实现对于 all 的取消操作
    22.         for(let i = 0; i < girls.length; i++) {
    23.             girls[i].onclick = function() {
    24.                 all.checked = checkGirls(girls);
    25.             }
    26.         }
    27.  
    28.         function checkGirls(girls) {
    29.             //判断是不是所有的girl都被选中了
    30.             for(let i = 0; i < girls.length; i++) {
    31.                 if(!girls[i].checked) {
    32.                     return '';
    33.                 }
    34.             }
    35.             //遍历完发现，所有都被选中着，就让 all 也是选择状态
    36.             return 'checked';
    37.         }
    38.     script>
    39. body>

    3.4 获取/修改样式(style className)

    1.style 对应 行内样式（直接把样式写到style里面）

    2.className / classList 对应 内部样式/外部样式，应用了一个/一组css类名

    在HTML中，表示类名的属性，就是class

    在JS中，属性名就变成了 className/classList 

    因为JS中 class也是一个关键字（JS ES6版本以上，也引入了类这个概念）

    实现 点击文字放大字体的操作

    parseInt进行数字字符，转数字操作时，是从前往后开始转换，如果遇到非数字字符，就转换停止

    当修改CSS属性值的时候，一定要注意单位，不写单位就会失效

    1. <body>
    2.     <div style="font-size:20px;">这是一个文本div>
    3.     <script>
    4.         let div = document.querySelector('div');
    5.         div.onclick = function() {
    6.             //1. 先获取当前字体的大小(要进行字符串转数字操作)
    7.             console.log(parseInt(div.style.fontSize)); 
    8.             let fontSize = parseInt(div.style.fontSize);
    9.             //2. 在当前字体大小的基础上， 多增加 5px
    10.             fontSize += 5;
    11.             div.style.fontSize = fontSize + 'px';
    12.         }
    13.     script>
    14. body>

     如果要修改的样式比较多，通过style来修改就比较麻烦

    可以直接借助CSS类来修改

    修改元素的 CSS 类名. 适用于要修改的样式很多的情况.

    实现一个 开启夜间模式 

    1. <body>
    2.     <style>
    3.         .light {
    4.             background-color: #fff;
    5.             color: black;
    6.         }
    7.  
    8.         .dark {
    9.             background-color: black;
    10.             color: #fff;
    11.         } 
    12.     style>
    13.  
    14.     <div class="light" style="height: 500px;">这是一段话div>
    15.     <button>夜间模式button>
    16.  
    17.     <script>
    18.         let div = document.querySelector('div');
    19.         let button = document.querySelector('button');
    20.         button.onclick = function() {
    21.             if(div.className == 'light') {
    22.                 div.className = 'dark';
    23.                 button.innerHTML = '白天模式';
    24.             }else if(div.className == 'dark') {
    25.                 div.className = 'light';
    26.                 button.innerHTML = '夜间模式';
    27.             }
    28.         }
    29.     script>
    30. body>

    4. 操作结点

    4.1 新增结点(createElement)

    1. 创建新结点

    var element = document.createElement(tagName[, options])
    createTextNode 创建文本节点
    createComment 创建注释节点
    createAttribute 创建属性节点

    2. 把结点挂在dom树上

    element.appendChild(aChild)

    （1）创建新结点

     此处创建的结点，并没有被挂在dom树上

    所以在浏览器页面上，是显示不出来的

    （2）把结点挂在dom树上

    使用appendChild把节点插入到某个结点的子元素中

    1. <body>
    2.     <div class="containor">
    3.     div>
    4.  
    5.     <script>
    6.         let newDiv = document.createElement('div');
    7.         newDiv.id = 'newDiv';
    8.         newDiv.className = 'one';
    9.         newDiv.innerHTML = 'hello';
    10.         console.log(newDiv);
    11.  
    12.         let containor = document.querySelector('.containor');
    13.         containor.appendChild(newDiv);
    14.     script>
    15. body>

    4.2 删除结点(removeChild)

    使用 removeChild 删除子节点 
    oldChild = element.removeChild(child);
    child 为待删除节点
    element 为 child 的父节点
    返回值为该被删除节点
    被删除节点只是从 dom 树被删除了, 但是仍然在内存中, 可以随时加入到 dom 树的其他位
    置.
    如果上例中的 child 节点 不是 element 节点的子节点 , 则该方法会抛出异常 
    1. <body>
    2.     <div class="containor">
    3.     div>
    4.  
    5.     <button>删除 divbutton>
    6.     <script>
    7.         let newDiv = document.createElement('div');
    8.         newDiv.id = 'newDiv';
    9.         newDiv.className = 'one';
    10.         newDiv.innerHTML = 'hello';
    11.         console.log(newDiv);
    12.  
    13.         let containor = document.querySelector('.containor');
    14.         containor.appendChild(newDiv);
    15.  
    16.         let button = document.querySelector('button');
    17.         button.onclick = function() {
    18.             containor.removeChild(newDiv);
    19.         }
    20.     script>
    21. body>
  • 相关阅读:
    澳大利亚博士后招聘|皇家墨尔本理工学院材料科学
    港联证券：“火箭蛋”来袭 蛋价涨势能否延续？
    阿里云刘洋：基于eBPF的Kubernetes可观测最佳实践
    【软件工程】介绍
    Visual Studio部署matplotlib绘图库的C++版本
    leetcode(力扣) 452. 用最少数量的箭引爆气球 & 435. 无重叠区间 (贪心)
    25期代码随想录算法训练营第一天 | 704. 二分查找，27. 移除元素
    两台笔记本之间快速传输文件，电脑对电脑怎么传送数据
    图片的可视化呈现有效增强大屏吸引力
    TypeScript 面向对象编程
  • 原文地址：https://blog.csdn.net/m0_58761900/article/details/126978458