前端 --- JavaScript WebAPI

文章目录

• 1. WebAPI 背景知识
• • 1.1 什么是 WebAPI
  • 1.2 DOM 基本概念
  • • 什么是 DOM
    • DOM 树
    • 重要概念:
• 2. 获取元素
• • 2.1 querySelector
  • 2.2 querySelectorAll
• 3. 操作元素
• • 3.1 获取/修改元素内容
  • • 1. innerText
    • 2. innerHTML
  • 3.2 获取/修改元素属性
  • 3.3 获取/修改表单元素属性
  • • 代码示例1: 播放 暂停的转换.
    • 代码示例2: 计数
    • 代码示例3: 全选/取消全选按钮
  • 3.4 获取/修改样式属性
  • • 1. 行内样式操作
    • • 代码示例: 字体变大
    • 2. 类名样式操作
    • • 代码示例: 背景颜色变化
• 4. 操作节点
• • 4.1 新增节点
  • • 代码示例:
    • 代码示例: 当一个节点插入两次,相当于移动.
  • 4.2 删除节点
  • • 代码示例:
• 5. 实现几个案例
• • 5.1 猜数字
  • 5.2 表白墙
  • 5.3 待办事项

1. WebAPI 背景知识 1.1 什么是 WebAPI

JS 分成三个大的部分:

• ECMAScript: 基础语法部分
• DOM API: 操作页面结构
• BOM API: 操作浏览器

WebAPI 就包含了 DOM + BOM.

1.2 DOM 基本概念 什么是 DOM

DOM 全称为 Document Object Model.

W3C 标准给我们提供了一系列的函数, 让我们可以操作:

1. 网页内容
2. 网页结构
3. 网页样式

DOM 树

一个页面的结构是一个树形结构, 称为 DOM 树.

重要概念:

• 文档: 一个页面就是一个 文档, 使用 document 表示.
• 元素: 页面中所有的标签都称为 元素. 使用 element 表示.
• 节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node表示.

2. 获取元素 2.1 querySelector

使用 querySelector 能够完全复用前面学过的 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象

语法格式:

let element = document.querySelector(selectirs);

• selectors 填一个或者多个选择器

使用示例:

    
 abc 
    
 def 
    

    

运行截图

2.2 querySelectorAll

如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()

使用示例:

    
123
    
456
    

运行截图

3. 操作元素 3.1 获取/修改元素内容 1. innerText

Element.innerText 属性表示一个节点及其后代的“渲染”文本内容

注: 不识别 html 标签. 是非标准的(IE发起的). 读取结果不保留html源码中的 换行和空格.

使用示例:

    
hello world
    
hello world
    

运行截图:

通过 innerText 无法获取到 div 内部的 html 结构, 只能得到文本内容.

2. innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代
注意:

• 识别 html 标签. W3C 标准的. 读取结果保留html源码中的 换行 和 空格

代码示例:

    
hello world
    
hello world
    

运行截图:

innerHTML 不光能获取到页面的 html 结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行

3.2 获取/修改元素属性

注: 通过 element.属性来获取属性
代码示例:

运行结果:

3.3 获取/修改表单元素属性 代码示例1: 播放 暂停的转换.

运行截图:

代码示例2: 计数

代码示例3: 全选/取消全选按钮

    
选择你喜欢玩的游戏
    王者荣耀

    和平精英

    开心消消乐

    我的世界

    全选
    

运行截图

3.4 获取/修改样式属性

CSS 中指定给元素的属性, 都可以通过 JS 来修改

style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的.
例如: font-size => fontSize, background-color => backgroundColor 等

1. 行内样式操作

element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];

代码示例: 字体变大

    
你好
    

运行截图:

2. 类名样式操作

element.className = [CSS 类名];

代码示例: 背景颜色变化

    
    

        你好!
    
    

运行截图:

4. 操作节点 4.1 新增节点

分为两个步骤:

1. 创建元素节点
   ① createElement 创建元素节点.
   ② createTextNode 创建文本节点
   ③ createComment 创建注释节点
   ④ createAttribute 创建属性节点
2. 插入节点到 dom 树中
   ① 使用 appendChild 将节点插入到指定节点的最后一个孩子之后
   ②使用insertBefore将节点插入到指定节点之前

代码示例:

运行截图:

代码示例: 当一个节点插入两次,相当于移动.

    

        
1
        
2
        
3
        
4
    

    

运行结果:

4.2 删除节点

使用 removeChild 删除子节点

oldChild = element.removeChild(child);

注: 如果 child 不是 element 的子节点,会抛异常

代码示例:

    

        
1
        
2
        
3
    
    

运行结果:

5. 实现几个案例 5.1 猜数字

    
    
    
    


    

        

        

            请输入要猜的数字:  
        
        

            已经猜的次数: class="count">0
        
        

            结果: class="result">
        
    
    

运行截图:

5.2 表白墙

    
    
    
    


    

        
表白墙
        
输入后点击提交,会将信息显示在表格中
        
class="two">谁:
        
class="two">对谁:
        
class="two">说什么:
        

    
    
    
    

运行截图:

5.3 待办事项

    
    
    
    


    

        

            
        
        

            

                
未完成
            


            

                
已完成
            
        
    
    
    

运行截图: