6.17笔记

同步和异步

JS语言是单线程语言，只能同时做一件事

• 异步是解决JS语言单线程瓶颈的一个解决方案

同步和异步的区别

• 异步是基于 JS 单线程特点而产生的
  异步不会阻塞代码执行
  同步会阻塞代码执行

异步应用场景

• 网络请求
  定时任务

异步队列中的任务没有固定的执行顺序，所以对于异步任务的执行结果很难把控

• 

web api

1、ECMA 和 W3C 是两个机构，但这两个机构的会员有很大重合

2、ECMA 规定 ECMAScript 的标准，W3C 规定了 Web API 的标准，也就是说 ECMA 负责
3、ECMAScript 脚本语言的研究和发布，W3C 定义了 ECMAScript 能做什么
4、ECMA 262 是基础，与 Web API 结合才能发挥作用

• ECMA 262：由于浏览器之争，大家都希望将自己的脚本语言作为标准，所以网警公司将自己的脚本语言 javascript 提交给 ECMA，ECMA 的技术委员会将其标准化，成为 ECMA 262，所以可以说ECMAScript 就是通过 ECMA 262 标准化的脚本语言

什么是DOM

• 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

DOM 操作

• DOM 本质

  • 要将源代码与 DOM 区别开来

    • 1、源代码是开发者编写的，由浏览器进行解析并渲染成页面，但渲染完成后，无法通过 JS 进行修改
      3、DOM 存在于浏览器的内存中（我自己的理解），通过 JS 可以修改，修改后，浏览器会根据修改后的 DOM 树重新渲染页面

DOM 节点操作

• B/S: Borwer Server 浏览器-服务器(所有的网站都是b/s)
  C/S: Client Server 客户端-服务器(下载安装的是c/s)

• 获取dom元素的方式 （五种）

  • （1）document.getElementById(“id的名字”) 获取的是一个
    （2）document.getElementsByTagName(“标签的名字”) 获取的是数组
    （3）document.getElementsByClassName(“类的名字”) 获取的是数组
    （4）document.querySelector(“标签名或者id或者类名”) 获取的是一个
    （5）document.querySelectorAll(“标签名或者id或者类名”) 获取的是数组

• 节点

  • 父节点 parentNode
    所有子节点 parentNode.childNodes
    子元素节点 parentNode.children
    第一个子节点 parentNode.firstChild
    最后一个子节点 parentNode.lastChild
    第一个子元素节点 parentNode.firstElementChild
    最后一个子元素节点 parentNode.lastElementChild
    子节点 children
    所有兄弟节点 siblings
    下一个兄弟节点 node.nextSibling
    上一个兄弟节点 node.previousSibling

• 删除节点
  节点.remove() 删自身
  父节点.removeChild(子节点) 删子节点

创建节点
document.createElement() 生成网页元素节点
document.createTextNode() 生成文本节点

添加节点
父节点.appendChild(子节点) 添加到制定父节点的子节点列表的末尾
insertBefore(child,指定元素) 将一个节点添加到父元素的指定子节点前面

克隆节点
node.cloneNode() 克隆一个选中的节点

node.innerHTML 设置某个节点的内容 将内容写入某个dom节点

• 自定义属性操作

  • （1）获取属性值
    element.属性 获取属性值 获取内置属性
    element.getAttribute(‘属性’); 获取自定义属性
    （2）设置属性值
    element.属性=‘值’ 设置内置属性
    element.setAttribute(‘属性’,‘值’) 设置自定义属性

移出属性
element.removeAttribute(‘属性’)

• 样式属性操作

  • element.style.color=‘red’ 行内样式操作 元素对象.style.样式属性=‘值’
    element.className=‘blue’ 类名样式操作 元素对象.className=‘值’

• H5自定义属性

  • 设置H5自定义属性
    H5规定自定义属性data-开头作为属性并且赋值
    或者使用 element.setAttribute(‘data-index’,2)

获取H5自定义属性
1、兼容性获取 element.getAttribute(‘data-index’)
2、H5新增 elemment.dataset.index 或者 element.dataset[‘index’] IE11才开始支持

• addEventListener和onClick的区别

  • addEventListener可以为同一个元素绑定相同的事件，而onClick会被覆盖掉，只会执行最后一个

• URL和URI的区别

  • URI包括URL和URN两个类别，URL是URI的子集，所以URL一定是URI，而URI不一定是URL

  • URI = Universal Resource Identifier 统一资源标志符，用来标识抽象或物理资源的一个紧凑字符串。
    URL = Universal Resource Locator 统一资源定位符，一种定位资源的主要访问机制的字符串，一个标准的URL必须包括：protocol、host、port、path、parameter、anchor。
    URN = Universal Resource Name 统一资源名称，通过特定命名空间中的唯一名称或ID来标识资源。

    • URL（Uniform Resource Locator）：统一资源定位符,基本的URL格式为 “协议://IP地址/路径和文件名”，如：localhost:8080/demo/index.html

内置对象

• Math(数学对象)

  • Math.ceil(-1.1)向上求整 -1
    Math.floor(-1.1)向下求整 -2
    Math.round(4.6)四舍五入 5
    Math.random()随机数 [0,1)之间的小数
    求0-99之间的随机数
    Math.floor(Math.random()*100)->[0,99.xxxx]->

• Date(日期对象)

  • var now = new Date();//实例化当前的日期对象
    now.getSeconds();//获取秒
    now.getMinutes();//获取分钟
    now.getHours();//获取小时
    now.getDay();//获取星期，0-6 0：星期天
    now.getDate();//获取日，即当月的第几天
    now.getMonth();//返回月份，注意从0开始计算，这个地方坑爹，0-11
    now.getFullYear();//返回4位的年份 如 2016

标签：URL,6.17,笔记,element,获取,节点,ECMA,属性
来源： https://blog.csdn.net/cjjaixuexi/article/details/118001074