1.API 和 Web API

1⃣️. API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现

2⃣️. WebAPI 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM 和 DOM).主要针对于浏览器做交互效果；

3⃣️. WebAPI 一般都有输入和输出（函数的传参数和返回值），WebAPI 很多都是方法（函数）

2.DOM

文档对象模型，是W3C 组织推荐的处理可扩展标记语言（HTML 或者 XML）的标准 编程接口

2.1.获取元素

2.11 根据id 获取元素

1⃣️.document.getElementById('time') 返回带有Id 的元素对象

2.12 根据标签名 获取元素

document.getElementsByTagName('li')

1⃣️.返回带有标签名的对象集合，以伪数组的形式存储的

2⃣️.可用遍历的方式打印里面的元素（for 循环）

3⃣️.element.getElementsByTagName('li') 可以得到这个元素里面的某些标签

2.13 H5新增获取元素方式（ie9）

1⃣️.getElementsByclassName（类名） 根据类名返回元素对象集合

2⃣️.querySelector（选择器） 返回指定选择器的第一个元素对象，里面的选择器需要加符号 .box #nav

3⃣️.querySelectorAll（选择器） 返回指定选择器的所有元素对象集合,里面的选择器需要加符号 .box #nav

2.14 获取body 和 html 元素

1⃣️.document.body 返回元素对象

2⃣️.document.documentElement 返回元素对象

3.事件和样式操作及案例

3.1 事件概述

1⃣️.简单理解：触发--响应机制

2⃣️.事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素

  • 事件源 事件被触发的对象 谁 按钮
  • 事件类型 如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过 还是键盘按下
  • 事件处理程序 通过一个函数赋值的方式 完成

3.2 操作元素-修改元素的内容

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

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

3.3 操作元素-修改元素的属性

1⃣️.innerText innerHTML 改变元素内容

2⃣️.src, href

3⃣️.id, alt, title

        
            <button id="ldh">刘德华</button>
            <button id="zxy">张学友</button>
            <img src="imgs/ewm.jpg" alt="" title="我喜欢你">
            <script>
                let l = document.getElementById('ldh')
                let z = document.getElementById('zxy')
                let img =document.querySelector('img')
                l.onclick=function(){
                    img.src='imgs/online.png'
                    img.title='我爱你'
                }
                z.onclick=function(){
                    img.src='imgs/ewm.jpg'
                    img.title='我喜欢你'
                }
            </script>

3.4 操作元素-修改表单的属性

1⃣️.type

2⃣️.value

3⃣️.checked

4⃣️.selected

5⃣️.disabled

3.5 操作元素-样式属性操作

1⃣️.element.style 行内样式操作

2⃣️.element.calssName 类名样式操作

如果原来有类名的话，避免被覆盖，可以这么写

this.className='first change'

4.节点操作

复制节点（克隆节点）

node.cloneNode() 该方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点

注意：

  • 1.如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
  • 2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

5.动态创建表格案例

复制节点（克隆节点）

node.cloneNode() 该方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点

注意：

  • 1.如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
  • 2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。
发布时间：2019-10-12
目录