怎样在微信H5中点击直接跳转到公众号
摘要：第一步: 打开微信公众号, 随便找一篇公众号文章, 将它发送给你的某个好友. 第二步: 使用默认浏览器打开这个分享的文章链接, 然后复制链接里面的biz字段到下面这个URL中替换 第三步: 在html中将构建好的这个url 第四步: 在手机/PC微信和PC浏览器中预览测试 1. PC微信 2. 手机
阅读全文
posted @ 2019-09-28 23:14
09 2019 档案
怎样启动和关闭nginx服务器
摘要：启动: 直接使用命令: nginx 关闭1: 快速停止 关闭2: 完整有序停止 重启: 如下
阅读全文
posted @ 2019-09-27 13:57
怎样测试nginx.conf配置文件的正确性
摘要：方法: 使用 nginx -t 命令 如果一切正常, 则会显示:
阅读全文
posted @ 2019-09-27 13:23
怎样查找/搜索文件
摘要：方法: 使用: find 命令. 比如我想搜索 nginx.conf 文件所在的位置, 只需要这样写: 注意: 1. "/" 表示从根目录开始搜索; 2. "-name" 表示后面跟的是目标文件的文件名; 3. 搜索返回的值是文件所在的路径
阅读全文
posted @ 2019-09-27 13:19
怎样创建用户组并添加用户进用户组
摘要：使用 groupadd 命令创建用户组: www 使用 useradd 命令添加用户到指定分组
阅读全文
posted @ 2019-09-27 13:14
怎样查看Nginx版本号
摘要：方法一: 使用 nginx -v 方法二: 使用 nginx -V 注意: nginx -V 显示的是: 版本号 / 编译器版本 / 配置参数
阅读全文
posted @ 2019-09-27 13:06
怎样写一个Hello World!
摘要：Python 的 Hello, World! 应该是所有语言里面最简单的:
阅读全文
posted @ 2019-09-26 23:27
怎样理解基本类型(原始类型)的数据和引用类型的数据
摘要：前言: 数值 / 字符串 / 布尔值 是基本类型, 对象 / 数组 / 函数是引用类型 ES5中有6种数据类型, 分别为: number / string / boolean / null / undefined / object. 这里的对象是广义的对象, 还可以细分为: array / func
阅读全文
posted @ 2019-09-25 18:00
怎样理解基本类型的包装对象
摘要：前言: JavaScript中一切皆对象 当我们给下面的数值 / 字符串 / 布尔值类型的变量增加属性, 会发现我们的设置不会生效, 这是什么原因呢? 这就要讲到 "包装对象" 了; 在JavaScript中, 数值 / 字符串 / 布尔值都是基本类型, 而基本类型的值是不可变的, 但这又违背了Ja
阅读全文
posted @ 2019-09-25 16:30
怎样理解变量的命名规则与命名规范
摘要：前言: 既然是规则了, 那就是约定俗成的, 不用过多纠结, 虽然这些规则里面也有必然的因素, 但现阶段来说可以不作探讨. 变量的命名需要: 遵守命名规则, 遵循命名规范, 这两点是不一样的, 规则是不能被打破的, 否则就运行不起来, 规范是一种实践经验, 不是必须要遵循的. 第一步: 变量的命名规则
阅读全文
posted @ 2019-09-25 15:55
怎样理解变量
摘要：前言: 变量变量, 也就是会变的量. 它是一个装数据的容器, 里面的数据是可以变的, 因此叫变量. 比如 "班长" 就是一个变量, 这学期可能是李雷, 那下学期就可能是韩梅梅了, 老师想安排同学任务, 想到的是班长, 而非某个具体的同学, 就像下面的 " a ", 我们让他加1, 但具体这个a的值是
阅读全文
posted @ 2019-09-25 15:08
怎样写一个 "Hello, World!"
摘要：第一步: 打开浏览器, 按 F12 键或 Ctrl + Shift + J. 注意: 1. 打开的这个界面是浏览器的开发者工具界面. 2. 顶部有许多Tab栏, 如: Elements / Console / Source等, 其中Console是用的最多的, 可以在光标处写代码. 第二步: 输入以
阅读全文
posted @ 2019-09-24 21:38
怎样在Chrome浏览器上安装 Vue Devtools 扩展程序
摘要：第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载.zip压缩包后在本地解压 第二步: 进入解压后的文件夹, 打开powershell, 执行下面两条
阅读全文
posted @ 2019-09-24 20:02
怎样退出mysql命令行
摘要：使用: mysql -u root -p 进入 mysql 命令号以后, 如果想退出, 可以使用: quit 命令, 如下:
阅读全文
posted @ 2019-09-24 14:34
怎样查看 MySQL 版本号
摘要：1. 在命令行中直接查看版本号 2. 在 mysql --help 中查找与版本相关的信息 3. 在mysql命令行里面查看版本信息 4. 在mysql命令号里面查看status中的版本信息
阅读全文
posted @ 2019-09-24 14:32
怎样查看Redis的版本号
摘要：Q: 怎样查看Redis版本 A: 下面两条命令都可以查看redis 版本:
阅读全文
posted @ 2019-09-24 14:22
怎样为工程项目统一下载安装依赖包
摘要：需要使用 npm 或 cnpm, 比如: 注意: 执行该命令的地方位于工程项目的根目录;
阅读全文
posted @ 2019-09-23 23:49
怎样设置虚线样式
摘要：ctx.setLineDash() 方法设置虚线的线段与间隔的数值, 比如: ctx.setLineDash([20, 5]) 表示线段长度为20px, 间隔为5px; ctx.lineDashOffset 属性设置起始的偏移量.
阅读全文
posted @ 2019-09-23 21:11
怎样设置线条与线条间接合处的样式
摘要：需要使用: ctx.lineJoin 属性; 顾名思意是 "线段连接" 的意思. 它的属性值有下面三个: 1. round: 圆角连接 2. bevel: 矩形拐角连接 3. miter: 折线连接(默认)
阅读全文
posted @ 2019-09-23 20:56
怎样设置线条的末端样式
摘要：需要使用: ctx.lineCap 属性. 直译过来就是 "线条的帽子". 它有三个属性值: 1. butt: 末端为方形 2. round: 末端为原形 3. square: 末端为方形, 但会多出一个宽度相同, 高度为宽度一半的方形延伸. 下面是实际演示:
阅读全文
posted @ 2019-09-23 20:18
怎样设置线的宽度
摘要：需要使用: ctx.lineWidth 属性; 它默认为1.0, 不能是负数.
阅读全文
posted @ 2019-09-23 16:10
怎样设置闭合区域的填充颜色
摘要：需要使用: ctx.fillStyle(). 注意: 1. 如果当前Path没有闭合, 则 ctx.fill() 会先闭合再填充; 2. 案例中使用了四次ctx.beginPath(), 说明这个图形下了四笔.
阅读全文
posted @ 2019-09-23 14:42
怎样设置路径的边框(描边)颜色
摘要：需要使用: ctx.strokeStyle 注意: 1. 每次执行 ctx.beginPath() 都相当于是画画时的"落笔"这个动作, 必须要给它指定一个落笔的位置点; 2. ctx.strokeStyle 作用的是当前路径, 也就是最近的一次执行ctx.beginPath()之后绘制的路径;
阅读全文
posted @ 2019-09-23 14:27
怎样绘制三次贝塞尔曲线
摘要：需要使用: ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
阅读全文
posted @ 2019-09-23 13:53
怎样绘制二次贝塞尔曲线
摘要：需要使用: quadraticCurveTo(cp1x, cp1y, x, y); cp1x: 控制点x坐标 cp1y: 控制点y坐标 x: 结束点x坐标 y: 结束点y坐标 注意: 贝塞尔曲线的两个定位点在两条直线上的速度是一样的.
阅读全文
posted @ 2019-09-23 13:41
怎样绘制一个与两条直线相切的圆弧
摘要：需要使用ctx.arcTo(), 参数是两个控制点的坐标, 比如下面的例子: 注意: 1. ctx.arcTo() 可以绘制与两条直线相切的圆弧; 2. ctx.rect() 可以绘制闭合的矩形;
阅读全文
posted @ 2019-09-23 13:20
怎样将角度转换为弧度
摘要：角度转弧度是按这个公式来的: ( π / 180 ) * 角度数. 在JavaScript中可以这样写:
阅读全文
posted @ 2019-09-23 12:20
怎样填充一个闭合区域
摘要：比如一个三角形边框, 如果想要填充其内部, 则需要使用: ctx.fill() 注意: 如果路径没有闭合, 那ctx.fill()会先闭合再填充.
阅读全文
posted @ 2019-09-23 09:07
怎样绘制一个三角形边框
摘要：三角形是由三条直线组成的, 但我们只需要ctx.lineTo()两次, 因为, ctx.closePath()会就路径的起始点连起来. 如下所示:
阅读全文
posted @ 2019-09-23 09:02
怎样绘制一条线段
摘要：就像画画一样, 首先得有一支笔, 这支笔有粗细, 有颜色, 可以画直线, 也可以画曲线, 然后我们会从某个位置点开始起笔, 然后在另一个位置点结束. 这样就可以画一条线啦~. 具体步骤如下: 1. 创建一条路径: ctx.beginPath(), 表示拿起画笔准备开画. 2. 将笔移到准备绘制的第一
阅读全文
posted @ 2019-09-23 08:55
怎样绘制矩形
摘要：有三种方法: 1. ctx.fillRect(x, y, width, height); 2. ctx.strokeRect(x, y, width, height); 3. ctx.clearRect(x, y width, height); 方法1. ctx可以认为是一支画笔, 所有的和绘图有关
阅读全文
posted @ 2019-09-22 20:27
怎样判断浏览器是否支持canvas
摘要：1. 如果网页必须使用canvas, 则需要告知用户更换或更新浏览器. 这时可以通过在<canvas>标签之间添加替代元素进行 2. 如果对不支持canvas的浏览器提供第二套方案, 或者行为逻辑, 则需要在js脚本中判断浏览器是否支持canvas.
阅读全文
posted @ 2019-09-22 18:19
怎样创建一个canvas画布环境
摘要：1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: 2. 我们需要控制这个画布, 在画布里面绘制图形, 这时就需要通过js控制: 完成了上面两步以后就可以认为是初始化了一个画布(canvas)环境.
阅读全文
posted @ 2019-09-22 17:58
怎样理解Canvas
摘要：Canvas 是一种在网页中的画布, 是一个HTML5新增的标签, 是一种高效的绘制图形的技术, 在JavaScript中有一个专门的API用于给他赋能( CanvasRenderingContext2D ) 注意: 1. canvas可以做动画 / 游戏 / 各种图表 / 数据可视化等, 功能强大
阅读全文
posted @ 2019-09-22 17:32
怎样删除一条Cookie
摘要：删除Cookie的唯一方法是: 将Expires设置为一个过去值, 一般会设置为 Thu, 01-Jan-1970 00:00:01 GMT 因为这是时间零点, 设这个总不会错.
阅读全文
posted @ 2019-09-22 13:31
怎样在浏览器端增加一条Cookie
摘要：可以使用 document.cookie, 这个属性可读可写, 读时是读取所有没有设置HttpOnly的cookie作为一个字符串返回, 写时是将一个cookie写入到document.cookie中, 注意, 这个写时追加而非覆盖, 而且每次只能写入一个cookie. 具体示例如下: 注意: 1.
阅读全文
posted @ 2019-09-22 13:20
怎样限制第三方Cookie
摘要：使用Cookie的 SameSite 属性. 1. SameSite=Strict; 这个模式下, 服务器将会完全禁止第三方Cookie, 在跨站点时, 任何情况下都不会发送Cookie, 也就是说, 只有当前页面URL 符合Cookie设置的Domain和Path要求时才会被带上. 2. Same
阅读全文
posted @ 2019-09-22 13:11
怎样理解第三方Cookie
摘要：1. Cookie往往是用来存储用户信息的, 但有些恶意站点设法伪造了带有正确Cookie的HTTP请求, 这时就会产生安全问题( CSRF 攻击 ). 这里恶意网站获取cookie的行为就是第三方cookie. 2. 我们是用Google / Baidu / Facebook 搜索的网站, 都可以
阅读全文
posted @ 2019-09-22 12:10
怎样指定当前cookie不能通过js脚本获取
摘要：所谓" 不能通过js脚本获取 " 主要指的是: 使用document.cookie / XMLHttpRequest对象 / Request API 等无法获取到当前cookie. 设置方法为: HttpOnly. 没错, 这是一个没有值的属性, 只要在 Set-Cookie里面附带了这个属性, 那
阅读全文
posted @ 2019-09-22 11:13
怎样使当前cookie只有在加密协议https环境下才能将它发送到服务器
摘要：使用 Secure 属性. 注意, 这个属性基本是"自动"的, 也就是说, 如果当前网页是https请求的, 那里面的各种HTTP请求的cookie都会自定加上这个属性, 如果当前请求时http, 那不管cookie是否设置了这个属性, 那都会被浏览器自定忽略.
阅读全文
posted @ 2019-09-22 10:57
怎样设置cookie生效的域名和路径
摘要：Domain 属性指定浏览器发出HTTP请求时, 哪些域名需要附带这个Cookie. 比如 Domain 设置为 example.com, 那 abc.example.com 也会在发起请求时附带这个cookie. Path 属性指定浏览器发出HTTP请求时, 设置的域名下的哪些路径可以附带这个Co
阅读全文
posted @ 2019-09-22 10:51
怎样设置cookie的到期时间
摘要：1. 使用Cookie的: Expires 属性. 它可以设置cookie的过期时间. 下面的代码表示id这条cookie的过期时间是2015年10月21日早上7点28分; 2. 使用Cookie的: Max-Age 属性. 它可以指定从现在开始Cookie存在的秒数. 秒数过完则cookie过期.
阅读全文
posted @ 2019-09-22 10:13
怎样修改一个已存在的Cookie
摘要：Cookie的修改也需要借助 Response-Header 的 Set-Cookie 字段, 不过需要注意的是: 待修改cookie的 key / domain / path / secure 必须要完全一致, 否则就会生成两个名字相同但属性不同的cookie, 如下所示: 1. 正常修改cook
阅读全文
posted @ 2019-09-22 09:52
怎样设置Cookie
摘要：因为 Cookie 是服务器保存在浏览器中的一小段信息, 因此这个设置应当是服务器发起的, 设置方法是在Response Header中添加: Set-Cookie字段, 值是多个键值对. 如下: 注意: 1. Response Header 中可以添加多个Set-Cookie字段; 2. 一个Se
阅读全文
posted @ 2019-09-22 09:25
怎样禁用浏览器的Cookie功能
摘要：使用: window.navigator.cookieEnabled; 这样设置以后, 浏览器就不会接受和保存服务器传过来的cookie, 也就不会在发起HTTP请求时向服务器发送cookie.
阅读全文
posted @ 2019-09-21 10:31
怎样理解Cookie
摘要：一. 什么是Cookie Cookie是服务器保存在浏览器里的一小段文本信息, 大小一般不超过4KB, 浏览器每次向服务器发起HTTP请求时就会自动附带上这段信息. 二. Cookie 的主要作用 1. 保存登录 / 购物车等需要记录的信息 2. 保存用户偏好, 如字体大小 / 背景颜色等 3. 追
阅读全文
posted @ 2019-09-21 10:27
怎样记录访问者打开网页和关闭网页的信息
摘要：通过监听 window.onload 和 window.onunload事件, 使用 Navigator.sendBeacon() 进行HTTP请求:
阅读全文
posted @ 2019-09-20 21:04
怎样在页面关闭时发起HTTP请求
摘要：比如有需求是要让页面关闭时, 在数据库中记录用户的一些数据或log日志. 这时就需要在用户关闭页面时发起HTTP请求. 做法是对window.onunload设置事件监听函数, 在函数内发起AJAX请求. 不过有时候页面已经卸载了, 但请求还没有发出, 这时就失败了, 解决这一问题的思路有两种: 1
阅读全文
posted @ 2019-09-20 20:59
怎样终止HTTP请求
摘要：使用 xhr.abort() 注意: xhr.abort() 会直接终止请求, xhr.readyState值变为4, xhr.onreadystatechange事件触发.
阅读全文
posted @ 2019-09-20 17:47
怎样获取响应头: Response Header
摘要：1. 使用 xhr.getResponseHeader()可以获取指定响应头字段值. 2. 使用 xhr.getAllResponseHeader() 可以获取所有响应字段值 注意: 1. 如果没有接收到服务器返回的头信息, 则两个方法都返回null; 2. xhr.getResponseHeade
阅读全文
posted @ 2019-09-20 17:36
怎样理解xhr.overrideMimeType()和xhr.responseType
摘要：一般情况下, 我们会通过 xhr.responseType 告诉服务器我们想要什么类型的返回数据. 然后xhr.response 会根据xhr.responseType属性值来自动解析返回值. 但有时候服务器无法返回我们需要的数据类型, 但客户端不知道服务器无法返回, 所以就算xhr.respons
阅读全文
posted @ 2019-09-20 17:22
怎样设置HTTP请求头Header
摘要：使用: xhr.setRequestHeader(); 注意: xhr.setRequestHeader() 必须在xhr.open()之后, xhr.send()之前调用;
阅读全文
posted @ 2019-09-20 17:10
怎样使用FormData对象加工表单数据
摘要：1. 获取表单(form)节点 2. 对FormData实例做相关操作 3. 发起HTTP请求
阅读全文
posted @ 2019-09-20 16:57
怎样发出一个HTTP请求
摘要：需要使用 xhr.send(); 参数为请求数据体, 如果没有就传入null, 一般来说, GET请求是不用传参的, POST就视情况而定, 理论上所有GET请求都可以改为POST, 反之则不行. 下面是POST请求的示例: 注意: 1. 所有xhr的监听事件都必须在xhr.send()方法调用之前
阅读全文
posted @ 2019-09-20 16:47
怎样初始化XMLHttpRequest实例对象xhr
摘要：xhr.open() 接收5个参数, 用于初始化一个http请求, 它接收5个参数: 1. method: 请求类型; 2. url: 请求的url; 3. async: 是否为异步, 默认为true; 默认为true 4. user: 认证用户名; 可选 5. password: 认证密码; 可选
阅读全文
posted @ 2019-09-20 15:47
怎样监听文件的上传进度
摘要：使用: xhr.upload.onprogress事件监听属性. 注意: 除了可以监听上传进度之外, 还可以监听: loadstart、loadend、load、abort、error、timeout.
阅读全文
posted @ 2019-09-20 15:32
怎样实现跨域AJAX请求发送Cookie
摘要：第一步: 服务器必须在Response Header中设置: Access-Control-Allow-Credentials: true 第二步: 客户端发起请求时需要将 xhr.withCredentials设为: true; 注意: 1. 按照上面设置后, 不仅Cookie会被附带上, 认证的
阅读全文
posted @ 2019-09-20 15:10
怎样监听HTTP请求的成功、失败与进行时
摘要：1. 监听请求成功: xhr.onload 2. 监听请求失败: xhr.onerror 3. 监听请求数据下载中: xhr.onprogress 注意: xhr.onprogress是其中仅有的一个具有事件参数的事件监听属性, e.loaded表示下载了多少数据, e.total表示数据总量, e
阅读全文
posted @ 2019-09-20 14:16
怎样监听HTTP请求的发出与完成
摘要：1. 监听HTTP请求发出的事件是: xhr.onloadstart 2. 监听HTTP请求结束的事件是: xhr.onloadend 注意: onloadend 事件不管请求失败或成功, 只要xhr.readyState等于4时就会触发.
阅读全文
posted @ 2019-09-20 14:08
怎样设置请求超时时间和超时监听函数
摘要：1. 设置请求超时时间: xhr.timeout, 如果超时, 请求会自动终止; 参数是毫秒; 2. 设置请求超时监听函数: xhr.ontimeout, 如果请求超时, 则会触发ontimeout事件的监听函数;
阅读全文
posted @ 2019-09-20 13:44
怎样获取从服务器返回的状态码和状态提示文本
摘要：1. 获取HTTP状态码: xhr.status; 2. 获取HTTP状态提示文本: xhr.statueText; 以下是以下常见的HTTP状态码: 200, OK, 访问正常; 301, Moved Permanently, 永久移动; 302, Moved temporarily, 暂时移动;
阅读全文
posted @ 2019-09-20 13:25
怎样获取请求发往服务器的真实地址
摘要：使用: xhr.responseURL; 注意: 1. xhr.responseURL和xhr.open()中的URL可能是不一样的, 因为服务器也可能发生跳转, 前者返回的是最后实际返回数据的URL; 2. 如果原始请求URL包含锚点(#), 则该属性会将锚点抽离;
阅读全文
posted @ 2019-09-20 12:12
怎样获取从服务器返回的xml或html文档对象
摘要：使用 xhr.responseXML; 通过这个属性正常获取XML或HTML文档对象有两个前置条件: 1. Content-Type头信息的值等于: text/xml 或 application/xml 2. xhr.responseType 需要赋值为: "document" 注意: 如果Cont
阅读全文
posted @ 2019-09-20 11:28
怎样获取从服务器返回的字符串数据
摘要：使用: xhr.responseText; 注意: xhr.responseType等于空字符或"text"时, 可以使用xhr.responseText获取
阅读全文
posted @ 2019-09-20 11:08
怎样设置或查看服务器返回数据的数据类型
摘要：使用: xhr.responseType; 这个属性可读写, 也就是说, 我们可以在xhr.open()之后, 在xhr.send()之前, 设置 xhr.responseType属性, 使其告诉服务器客户端需要什么类型的数据; xhr.responseType 的属性值可以是: 1. 空字符串:
阅读全文
posted @ 2019-09-20 10:34
怎样获取从服务器返回的数据体
摘要：使用: xhr.response 属性, 可获得response body 内的数据, 注意, 这些数据类型不一样, 比如字符串 / 对象 / 二进制文件 等. 注意: 1. 如果返回的是xml或html, xhr.response会自动解析成网页文档, 而xhr.responseText 不会;
阅读全文
posted @ 2019-09-20 10:15
怎样监听xhr.readyState值的变化
摘要：可以使用 xhr.onreadystatechange 属性指向的函数去监听 xhr.readyState 值的变化. 示例如下: 注意: 除了xhr的正常请求过程会改变 xhr.readyState 值以外, 类似xhr.abort()这种会终止请求的方法也会改变xhr.readyState的值.
阅读全文
posted @ 2019-09-20 01:59
怎样获取xhr的当前状态
摘要：一个XMLHttpRequets实例从创建到发起请求再到获取数据, 期间会有一些中间状态, 这些状态是必要的, 我们可以通过判断这些状态值来进行不同的动作. xhr中获取请求状态的属性是: xhr.readyState 它有五种状态可供返回: 0: xhr实例已经创建, 但xhr.open()方法尚
阅读全文
posted @ 2019-09-20 01:43
怎样理解AJAX
摘要：AJAX: Asynchronous JavaScript and XML, 翻译过来就是: 异步的JavaScript与XML 这已经成为了一个通用名词, 字面意义已经消失了, 因为现在使用JavaScript异步请求返回的数据基本都是JSON, 而非 XML. 概括起来, AJAX指的就是: 通
阅读全文
posted @ 2019-09-20 01:13
怎样理解块级作用域
摘要：在ES6 之前, JavaScript中有三种作用域: 1. 全局作用域 2. 函数作用域 3. eval作用域 以上作用域内声明的变量或方法只在当前作用域内有效, 在其他作用域内引用则会返回 undefined; 而ES6则新增了一个作用域: 块级作用域 块级作用域可以简单理解为是: 包在大括号{
阅读全文
posted @ 2019-09-19 23:56
怎样理解ECMAScript 和 JavaScript的关系
摘要：JavaScript可以分为三大部分: 1. 核心语法 2. DOM 3. BOM 而核心语法实际上就是指的ECMAScript, 而JS又是不断在发展的, 而这个发展实际上最主要的就是ECMAScript版本的更新, 而DOM 和 BOM的更新较少, 因此, 可以认为 ECMAScript是Jav
阅读全文
posted @ 2019-09-19 23:36
怎样获取当前元素节点的所有属性节点集合
摘要：使用 Element.prototype.attributes
阅读全文
posted @ 2019-09-19 16:20
怎样判断当前元素节点是否可编辑
摘要：使用: Element.prototype.isContentEditable, 可以判断某个元素节点是否可编辑. 注意: 1. Element.prototype.isContentEditable 只读; 有 true / false / inherit 2. Element.prototype
阅读全文
posted @ 2019-09-19 15:51
怎样理解 display:none 和 visibility:hidden
摘要：1. display: none会使元素节点 "消失" , 就像 死亡后灰飞烟灭了. 它是不占位置的. 2. visibility: hidden会使元素节点 "隐藏", 就像变成隐身人一样, 它是占地方的, 只是 别人看不见. 3. Element.prototype.hidden: 这个Elem
阅读全文
posted @ 2019-09-19 15:42
怎样设置鼠标悬浮时弹出的文字提示框内容
摘要：1. 可以在html中写死,如下: 2. 可以使用 Element.prototype.title 属性动态设置:
阅读全文
posted @ 2019-09-19 13:57
怎样获取当前元素节点的语言类型
摘要：使用: Element.prototype.lang; 比如: 注意: 1. 每个元素节点都有一个lang属性, 必须要显式声明才会有返回值, 否则返回空字符串""; 2. Element.prototype.lang 属性是可读写的;
阅读全文
posted @ 2019-09-19 13:50
怎样控制元素节点的是否可拖动属性
摘要：元素的可拖动属性为: draggable. 默认为false, 可以通过: Element.prototype.draggable; 查看与修改; 注意: 该属性可读写;
阅读全文
posted @ 2019-09-19 13:33
怎样读写分配给当前元素的快捷键
摘要：使用 Element.prototype.accesskey 注意: 快捷键用Alt+x触发, 会将焦点聚焦到目标元素上
阅读全文
posted @ 2019-09-19 13:05
怎样获取元素节点的标签名称
摘要：比如通过id获取的一个元素节点, 想知道这个节点是什么什么标签, 这时可以通过: Node.prototype.nodeName属性 或 Element.prototype.tagName属性获取. 注意: tagName和nodeName返回的结果是完全一样的, 只是tagName在Element
阅读全文
posted @ 2019-09-19 12:22
怎样查看或修改元素节点的id属性
摘要：使用 el.id; el表示获取到的元素节点, 如下所示: 注意: 1. el.id 属性可读可写; 2. 对id的修改会实时反映到DOM树中; 3. id值对大小写敏感, app 和 APP 是两个不同的id, 建议都写成小写.
阅读全文
posted @ 2019-09-19 12:09
怎样使用js将文本复制到系统粘贴板中
摘要：需要使用到三个document方法: 1. document.execCommand(); 执行某个命令 2. document.queryCommandSupported(); 检测浏览器是否支持某个命令 3. document.queryCommandEnabled(); 检测当前状态下某个命令
阅读全文
posted @ 2019-09-19 11:23
怎样创建一个子树遍历器
摘要：使用: document.createTreeWalker(); 注意: 1. document.createTreeWalker() 和 document.createNodeIterator() 基本相同, 但前者返回一个 TreeWalker实例对象, 后者返回一个NodeIterator实例
阅读全文
posted @ 2019-09-19 10:52
怎样创建一个子节点遍历器
摘要：使用: document.createNodeIterator(); 通过传入一个根节点, 返回这个根节点的子节点遍历器, 然后通过其方法: nextNode() 和 previousNode() 遍历其子节点; 其中, 第二个参数表示生成的子节点遍历器的类型, 因为节点有七种类型, 除开几个不能作
阅读全文
posted @ 2019-09-19 10:39
怎样判断文档中是否有元素被激活或获取焦点
摘要：这个问题涉及两个点: 1. document.activeElement; 获取被激活的元素, 没有则返回null; 2. document.hasFocus(); 判断是否有元素被激活或获取焦点, 返回一个布尔值; 有焦点的文档必定被激活（active），反之不成立. 也就是说: 1. docum
阅读全文
posted @ 2019-09-19 09:29
怎样创建并触发一个事件
摘要：1. 创建事件: document.createEvent(); 2. 触发事件: document.dispatchEvent();
阅读全文
posted @ 2019-09-19 09:13
怎样添加或移除事件监听函数
摘要：1. 添加事件监听函数: document.addEventListener(); 2. 移除事件监听函数: document.removeEventListener(); 注意: 使用document.addEventListener() 可以为事件添加多个事件监听函数. 但如果直接在 on-xx
阅读全文
posted @ 2019-09-19 09:02
怎样创建一个文档片段对象
摘要：使用 document.createDocumentFragment() 注意: 1. 文档片段节点不存在与DOM中, 在插入DOM之前, 对它的操作都是对js对象的操作; 2. 使用文档片段节点将一个较复杂的dom结构构建好再一次性插入到DOM树中, 有利于减少重渲次数, 提高页面性能;
阅读全文
posted @ 2019-09-19 00:02
怎样创建并插入一个注释节点
摘要：使用document.createComment(). 如上所示, 我们在body子元素顶部增加了一个注释节点: <!--helloworld-->
阅读全文
posted @ 2019-09-18 23:57
怎样创建并插入一个属性节点
摘要：可以使用下面的两种方法将一个新创建的属性节点设置到特定元素节点上. 注意: 这里的属性名和属性值可以自定义.
阅读全文
posted @ 2019-09-18 23:49
怎样创建一个文本节点
摘要：使用: document.createTextNode(); 注意: 1. 使用这个方法可以用来展示用户的输入, 避免XSS攻击; 2. 它不会对单双引号转义, 因此可能会被注入代码;
阅读全文
posted @ 2019-09-18 23:33
怎样创建一个元素节点
摘要：使用: document.createElement(); 注意: 1. 新创建的节点不在文档中, 因此不会在页面显示; 2. 参数是待创建元素节点的标签名称, 大小写随意, 且支持添加自定义标签节点; 3. 如果要把新创建的节点插入节点的某一位置, 那就得找到这个新节点未来的父节点或兄弟节点, 然
阅读全文
posted @ 2019-09-18 17:55
怎样获取页面上指定位置的元素节点
摘要：所谓 "指定位置" 指的是: 以视口左上角为0点, 横向(x轴)和纵向(y轴)所组成的平面坐标位置点. 获取方法为: document.elementFromPoint() 和 document.elementsFromPoint(); 注意: 1. document.elementsFromPoi
阅读全文
posted @ 2019-09-18 17:44
怎样通过id属性值获取元素节点
摘要：方法1: 使用document.getElementById(); 方法2: 使用document.querySelector(); 注意: 1. 方法1比方法2的效率高很多, 建议使用方法1; 2. 两个方法都是直接返回目标元素节点, 而非节点集合对象; 3. getElementById()方法
阅读全文
posted @ 2019-09-18 17:25
怎样通过name属性获取元素节点集合
摘要：使用 document.getElementsByName(); 注意: 1. 这个方法只对具有name属性的元素有效, 比如 <form> / <radio> / <frame> 等; 2. 返回的是一个NodeList实例对象, 而非HTMLCollection;
阅读全文
posted @ 2019-09-18 16:41
怎样通过类名获取元素节点集合
摘要：方法1: 使用 document.getElementsByClassName(); 方法2: 使用 document.querySelectorAll();
阅读全文
posted @ 2019-09-18 16:34
怎样通过html标签名获取元素节点集合
摘要：方法1. 使用document.querySelectorAll(); 方法2. 使用document.getElementsByTagName(); 注意: 1. 方法1返回的是一个NodeList实例对象, 方法2返回的是一个HTMLCollection实例对象; 2. 两个方法都可以作用在特定
阅读全文
posted @ 2019-09-18 16:29
怎样获取当前文档所有的元素节点(即html标签节点)
摘要：方法1. 使用 document.getElementsByTagName("*"); 方法2. 使用document.querySelectorAll("*"); 注意: 1. 方法1返回的是一个HTMLCollection, 方法2返回的是一个NodeList; 2. 两个方法都可以在任何元素节
阅读全文
posted @ 2019-09-18 16:05
怎样通过CSS选择器获取元素节点或元素节点集合
摘要：使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可. 注意: 1. querySelecotor()返回某个元素节点, querySelectorAll()返回一个NodeList实例对象; 2.
阅读全文
posted @ 2019-09-18 15:34
怎样擦除当前文档内容并写入新的内容
摘要：需要使用三个方法: document.open() / document.write() / document.close(); 注意: 这三个方法不能替换所处的当前文档, 只能替换其他的能控制的document.
阅读全文
posted @ 2019-09-18 15:06
怎样打开微信内置地图查看位置
摘要：使用 wx.openLocation() 接口 .
阅读全文
posted @ 2019-09-18 14:28
怎样创建一个独立于当前文档的新的Document对象
摘要：使用: document.implementation. 如下所示, 新创建的Document对象可以正常使用相关属性和方法, 然后将它的根节点与当前文档的根节点做一个替换. 注意: 1. document.implementation 返回一个 DOMImplementation 实例对象. 2.
阅读全文
posted @ 2019-09-18 14:00
怎样控制当前页面是否可编辑
摘要：所谓当前页面是否可编辑, 可以理解成 word文档的只读模式和编辑模式, 默认情况下, 浏览器将页面呈现给用户是 "只读"的, 比如您现在读到的这段话, 您是不能编辑它的, 但如果您将 document.designMode 设置为 "on", 则您可以删除 / 修改这段话, 不过, 这个操作会随着
阅读全文
posted @ 2019-09-18 13:38
怎样判断一个网页是否加载成功
摘要：需要使用 document.readyState, 它可以判断网页的加载情况, 如果网页加载完成, document.readyState 就会返回 'complete'; 注意: 1. 每次 document.readyState 值的改变都会触发 readystatechange 事件. 2.
阅读全文
posted @ 2019-09-18 13:14
怎样获取当前文档的状态
摘要：文档显示状态 和 文档状态 不是同一个东西, 前者主要是对文档的可见性作判断, 后者是对文档的加载过程作判断; 1. 文档显示状态: document.visibilityState; 2. 文档状态: document.readyState; 注意: 1. "loading" : 加载HTML代码
阅读全文
posted @ 2019-09-18 12:05
怎样判断当前文档的显示状态
摘要：使用 document.visibilityState, 可以返回文档的显示状态, 它并不是一个布尔值, 而是文档的类似生命周期一样的状态. 它可以返回四种值: 1. visible: 页面可见或部分可见, 可以不是焦点窗口, 可以被其他窗口挡住; 2. hiddle: 页面不可见, 可能是浏览器被
阅读全文
posted @ 2019-09-18 11:49
怎样判断用户是否在浏览当前页面
摘要：使用: document.hidden; 它会返回一个布尔值, 如果页面可见则为false, 反之为true; 注意: 如果页面打开后, 浏览器被最小化, 或者用户切换到其他标签页, 则为true;
阅读全文
posted @ 2019-09-18 11:31
怎样获取浏览器处理文档的模式
摘要：浏览器处理文档的模式有两种: 1. 兼容模式: BackCompat 2. 严格模式: CSS1Compat 可以用: document.compatMode 获取 注意: 1. 如果文档声明类型为: <!DOCTYPE html> , 那document.compatMode为 "CSS1Comp
阅读全文
posted @ 2019-09-18 11:03
怎样判断文档中的文字是从左到右还是从右到左
摘要：当然, 如果是古代中国有编程, 那文字方向还得加一个从上到下+从右到左. 可以通过: document.dir 获取文字的排列方向. 返回 ltr 表示 left to right, 反之亦然; 注意: 1. 该属性只读; 2. 该属性默认为 ltr, 但必须显式声明才会得到返回值, 否则会返回空字
阅读全文
posted @ 2019-09-18 10:51
怎样获取当前访问者来自哪里
摘要：所谓 "来自哪里", 指的是用户从另一个网页进入当前页面时, 另一个页面的URL, 比如我从百度首页跳转到百度地图, 这时的访问者来源就是: www.baidu.com; 获取它的方法是: document.referrer 注意: 1. 如果用户是直接键入网址访问的, 那这个属性为空字符串; 2.
阅读全文
posted @ 2019-09-18 10:32
怎样获取文档的编码类型
摘要：文档的编码类型主要是 utf-8, 一般是在meta标签的 charset属性上设置. 我们可以通过 document.characterSet 属性获取; 注意: 这个属性只读.
阅读全文
posted @ 2019-09-18 10:17
怎样查看或修改网页的标题title
摘要：网页的标题一般指的是 <title>标签之间的文本节点值, 它会显示在浏览器的标签页上, 我们可以通过 document.title 来查看或修改它: 注意: 这个属性是可修改的, 修改以后网页的标题就变为修改后的值;
阅读全文
posted @ 2019-09-18 09:48
怎样将日期时间字符串转换为时间戳
摘要：1. 使用: new Date().getTime(); 2. 使用: Date.parse(); 注意: 前者使用了 Date() 构造函数的实例方法, 后者使用了Date()构造函数的的静态方法.
阅读全文
posted @ 2019-09-18 09:36
怎样获取当前文档的域名
摘要：获取文档URL和获取域名是两个东西, URL是完整的地址, 而域名则是协议之后, 端口之前的那一个字符串, 它可以认为是服务器的名字, 可以通过设置域名解析指向到特定的服务器IP. 获取域名可以使用: document.domain; 注意: 1. 如果无法获取域名, 则返回null 2. 这个属性
阅读全文
posted @ 2019-09-18 09:32
怎样获取当前网页的URL
摘要：1. document.documentURI 2. document.URL 注意: 1. 两个属性的作用是完全一样的. 都是返回一个当前网页URL的字符串; 2. document.documentURI 继承自Document接口, 适用于所有文档; 3. document.URL 继承自HT
阅读全文
posted @ 2019-09-17 18:29
怎样获取所有style节点
摘要：通过 document.styleSheets 获取所有的样式表节点. 注意: 1. 返回的是一个StyleSheetList对象实例; 2. 不能通过document.querySelectorAll('style') 和 document.getElementsByTagName('style'
阅读全文
posted @ 2019-09-17 18:18
怎样获取所有的script节点
摘要：1. 使用document.scripts; 2. 使用 document.getElementsByTagName(); 3. 使用 document.querySelectorAll();
阅读全文
posted @ 2019-09-17 14:38
怎样获取所有的embed节点对象
摘要：<embed>是H5中新增的标签, 可以通过: document.embeds 和 document.plugins 获取所有的 embed 节点
阅读全文
posted @ 2019-09-17 14:30
怎样获取页面中的所有图片节点
摘要：这里的获取图片节点指的是 <img>, 对于一些设置了自定义背景图的节点是不能获取的, 我们使用: document.images 注意: 上述代码使用的es6语法: ..., 它将类数组对象转换为数组, 然后用forEach方法将每个img元素节点中的src属性值打印出来.
阅读全文
posted @ 2019-09-17 14:26
怎样获取页面中的表单元素节点
摘要：可以使用: document.forms 注意: 1. 返回的是一个HTMLCollection的实例对象; 2. 可以使用表单的id或name获取某个表单节点; 3. 没有表单时返回一个空的HTMLCollection实例对象, 而非null
阅读全文
posted @ 2019-09-17 13:59
怎样获取页面中所有带href属性的标签集合
摘要：使用: document.links 注意: 1. a 标签和 area 标签可以设置 href属性, 因此可以被获取; 2. 返回结果为一个节点集合, 是一个HTMLCollection的实例对象, 它是以类数组对象, 但不能用forEach迭代.
阅读全文
posted @ 2019-09-17 13:53
怎样获取当前页面内的全屏状态的元素节点
摘要：比如在全屏播放视频的时候, 如果需要获取当前播放页面的全屏节点元素, 就可以使用 document.fullscreenElement 注意: 1. 如果当前页面没有不处于全屏状态, 则无法获取全屏状态节点, 将会返回 null 2. 这个功能一般是用来判断视频是否处于全屏播放的.
阅读全文
posted @ 2019-09-17 13:40
怎样获取当前页面的焦点聚焦元素节点
摘要：可以聚焦的元素节点一般是 button / input / select / a / textarea等, 这些节点在聚焦以后可以通过键盘输入或者按回车提交等, 想要获取他们可以通过: document.activeElement 注意: 如果当前网页没有聚焦的元素节点, 则返回 body 或 nu
阅读全文
posted @ 2019-09-17 13:13
怎样让页面滚动到顶部
摘要：网页的滚动有横向( x轴 )和纵向( y轴 ), 要想滚动到页面顶部, 需要将 x轴 和 y轴 设置为 0, 需要用到滚动元素的: el.scrollTop 和 el.scrollLeft 属性.
阅读全文
posted @ 2019-09-17 11:38
怎样获取当前网页中的滚动元素节点
摘要：所谓滚动元素节点, 指的是带有最外层的那个可以滚动的元素节点. 我们可以使用: document.scrollingElement 获取 注意: 1. 标准模式下这个属性返回的节点是 html, 兼容模式下返回 body 2. 如果元素不存在, 则返回null
阅读全文
posted @ 2019-09-17 11:27
怎样快捷获取元素节点head
摘要：1. 使用: document.head 2. 使用: document.getElementsByTagName("head") 3. 使用: document.querySelector("head").nodeName
阅读全文
posted @ 2019-09-17 11:17
怎样快捷获取元素节点body
摘要：1. 使用: document.body 2. 使用: document.getElementsByTagName("body") 3. 使用: document.querySelector("body").nodeName
阅读全文
posted @ 2019-09-17 11:14
怎样获取文档的根元素节点
摘要：所谓根元素节点, 一般是文档声明节点之后的第一个节点: html 获取它的方法有许多, 这里列举四种: 1. document.documentElement 2. document.firstElementChild 3. document.lastChild 4. document.childr
阅读全文
posted @ 2019-09-17 09:00
怎样快捷获取文档类型节点
摘要：使用: document.doctype 注意: 1. 这个属性返回的值不是一个字符串, 而是一个对象; 2. document.firstChild 和 document.doctype一般来说是相等的; 3. 如果文档中没有声明文档类型, 则返回null 4. document节点一般用两个节点
阅读全文
posted @ 2019-09-17 00:45
怎样快捷获取网页的window对象
摘要：使用document.defaultView; 注意: 1. 如果当前文档不属于window对象, 则返回null; 2. document.defaulView 是 document 的快捷方式属性;
阅读全文
posted @ 2019-09-17 00:34
怎样理解document的快捷方式属性
摘要：所谓 "快捷方式属性" , 也就是说它们不是必须的, 只是在操作dom时可以更为方便地获取. 主要有下面8个: 1. 获取当前文档所属的window对象: document.defaultView 2. 获取当前文档的文档类型: document.doctype 3. 获取当前文档的根元素节点, 一
阅读全文
posted @ 2019-09-17 00:24
怎样获取不同环境下的document对象
摘要：1. 在一般的网页文档中, 可通过: document 或 window.document 获取; 2. 在iframe框架中, 可通过iframe节点的属性: contentDocument 获取; 3. 通过 ajax 返回的文档, 可以通过 XMLHttpRequest 对象的 respons
阅读全文
posted @ 2019-09-16 23:40
怎样理解document节点
摘要：1. document是七种文档节点中的一种, 是最顶级的一种节点; 2. 其他六种节点都包在document节点之内; 3. document既是一种节点的名字, 也是这种节点在DOM中的实例对象; 4. 每个文档都有一个document节点, 对应document对象. 但因环境不同, 获取do
阅读全文
posted @ 2019-09-16 23:35
怎样替换当前节点
摘要：使用 ChildNode.replaceWith(); 注意: 1. 当前节点必须具有父节点; 2. 替换的参数节点可以是元素节点, 也可以是文本节点;
阅读全文
posted @ 2019-09-16 23:16
怎样在当前节点的后面插入同级节点
摘要：可以使用ChildNode.after() 注意: 1. 可以插入元素节点, 也可以插入文本节点; 2. 可以插入一个节点, 也可以插入多个节点; 3. 当前元素必须有父节点;
阅读全文
posted @ 2019-09-16 23:10
怎样在当前节点的前面插入同级节点
摘要：可以使用ChildNode.before() 注意: 1. 可以插入元素节点, 也可以插入文本节点; 2. 可以插入一个节点, 也可以插入多个节点; 3. 当前元素必须有父节点;
阅读全文
posted @ 2019-09-16 23:09
怎样移除当前节点
摘要：使用ChildNode.remove() 注意: 1. 这里的当前节点必须要用父节点, 因此不适用与 文档节点 / 文档片段节点等; 2. 这里的的当前节点可以是元素节点 / 文本节点等所有具有父节点的节点;
阅读全文
posted @ 2019-09-16 23:04
怎样在当前节点的第一个子元素节点之前增加子元素节点或子文本节点
摘要：使用: ParentNode.prepend(); 注意: 1. 增加的子节点类型可以是文本节点 或 元素节点; 2. 增加的子节点可以是多个;
阅读全文
posted @ 2019-09-16 18:30
怎样在当前节点的最后一个元素子节点后面增加新的元素子节点
摘要：使用 ParentNode.append(), 比如下面是在body元素节点下追加一个子元素节点: 注意: 1. 可以添加多个节点, 但节点类型只能是元素节点或文本节点; 2. 新增的节点位于当前节点的最后一个子节点的后面, 即: 追加;
阅读全文
posted @ 2019-09-16 18:27
怎样获取当前节点的元素子节点个数
摘要：1. 使用 ParentNode.children.length; 2. 使用ParentNode.childElementCount;
阅读全文
posted @ 2019-09-16 18:17
怎样获取当前节点的最后一个元素子节点
摘要：使用: ChildNode.lastElementChild; 比如: 注意: 1. 只能返回元素子节点; 2. 如果没有任何元素字节点, 则返回null;
阅读全文
posted @ 2019-09-16 18:14
怎样获取当前节点的第一个元素子节点
摘要：使用: ParentNode.firstElementChild; 注意: 1. 只能获取元素子节点; 2. 如果没有任何元素字节点, 则返回null
阅读全文
posted @ 2019-09-16 18:11
怎样获取当前节点的所有元素子节点
摘要：使用: ParentNode.children; 注意: 1. 返回的是一个HTMLCollection实例; 2. 该实例为一个动态集合; 3. 遍历只能用for循环, 不能用forEach(); 4. 返回的只是一个元素子节点集合, 其他节点不包含在内;
阅读全文
posted @ 2019-09-16 17:52
怎样理解Node接口 / ParentNode接口 / ChildNode接口
摘要：ParentNode 和 ChildNode可以理解为是Node的子集, 它对一些具有父节点或子节点的节点提供了一些额外的方法和属性, 比如: 1. 继承了ParentNode的接口有: 元素节点 / 文档节点 / 文档片段节点 2. 所有具有父节点的节点都继承了 ChildNode. 下面是一个简
阅读全文
posted @ 2019-09-16 17:41
怎样通过id属性快速从HTMLCollection对象中获取到目标元素节点
摘要：方法1: 直接使用id或name属性: 比如我想获取 id 为 img1 的图片元素节点, 则可以这样写: 如果没有对应节点, 则返回undefined; 方法2: 可以用: HTMLCollection.prototype.namedItem() 获取, 使用方法如下:
阅读全文
posted @ 2019-09-16 13:47
怎样理解HTMLCollection接口
摘要：和 NodeList 类似, HTMLCollection 也是一个 类数组对象, 和NodeList不同的是, 它是各种 元素节点 的集合, 且不具有 forEach() 方法, 因此如果不转为真正的数组, 则只能用 for 去遍历. 会返回 HTMLCollection 对象的属性方法包括: d
阅读全文
posted @ 2019-09-16 13:38
怎样单独遍历NodeList的键、值和键值对
摘要：1. 单独遍历键: NodeList.prototype.keys(); 2. 单独遍历值: NodeList.prototype.values(); 3. 遍历键值对: NodeList.prototype.entries();
阅读全文
posted @ 2019-09-12 16:05
怎样获取NodeList某位置上的节点
摘要：1. 使用类似 Array 的中括号写法: 2. 使用 NodeList.prototype.item(): 注意: [] 和 item() 不写参数时都会报错, 参数大于等于 length 时, [] 方式会返回 undefined, item() 方式会返回 null 建议使用: []
阅读全文
posted @ 2019-09-12 15:00
怎样遍历NodeList对象
摘要：因为NodeList对象是一个类似数组的对象, 且它自带了一个 forEach() 方法, 因此可以使用 forEach() 遍历, 它的用法和 Array 里面的 forEach() 是完全一样的. 这里的item为当前元素, i为索引, obj为整个NodeList.
阅读全文
posted @ 2019-09-12 14:48
怎样理解NodeList的动态集合与静态集合
摘要：NodeList 有两种, 一种是动态集合, 一种是静态集合, 所谓动态集合, 主要是 Node.prototype.childNodes; 返回的子节点集合对文档的节点增删改会即时改变; 而静态集合则不会, 比如document.querySelectorAll(); 动态集合: 静态集合:
阅读全文
posted @ 2019-09-12 14:34
怎样将类似数组的对象转换为数组
摘要：arguments / NodeList / HTMLCollection 的实例对象是典型的类似数组的对象, 下面是使用es5的方法对其进行转换: 可以理解为: 将 数组的 slice 方法强行作用于 children 这个对象上, 因为两者在结构上的相似性, 使得 slice 可以将类数组对象转
阅读全文
posted @ 2019-09-12 14:14
怎样理解 instanceof
摘要：instanceof 运算符用来判断一个对象在其原型链中是否存在一个构造函数的 prototype 属性。 也就是说, instanceof 判断的实际上是某个对象是否为某个构造函数的实例, 因为es5中没有类的概念, 这里的instanceof其实是充当了一个判断类的实例对象的功能. 比如下面的两
阅读全文
posted @ 2019-09-12 13:07
怎样清理当前节点下的所有文本节点
摘要：使用 Node.prototype.normalize(); 这个方法比较抽象, 可能用的也不多, 它的作用是 "清理" 而非 "清空". 此外, 该方法是Text.splitText的逆方法.
阅读全文
posted @ 2019-09-11 23:39
怎样移除当前节点
摘要：移除当前节点的所有子节点可以用 Node.prototype.removeChild(); 移除当前节点可以用: Element.prototype.remove();
阅读全文
posted @ 2019-09-11 23:30
怎样判断一个节点是否相等 / 是否相同
摘要：判断两个节点是否相等: Node.prototype.isEqualNode(); 判断两个节点是否为同一节点: Node.prototype.isSameNode();
阅读全文
posted @ 2019-09-11 23:02
怎样判断某一节点在当前节点内
摘要：所需方法: Node.prototype.contains(); 这个方法返回一个布尔值, 如果参数节点在下面几种情况里面, 则返回true, 反之false; 1. 参数节点为当前节点 2. 参数节点为当前节点的子节点 3. 参数节点为当前节点的后代节点
阅读全文
posted @ 2019-09-11 22:31
怎样替换当前节点的某一子节点
摘要：使用: Node.prototype.replaceChild(newChild, oldChild);
阅读全文
posted @ 2019-09-11 22:16
怎样移除当前节点的所有子节点
摘要：1. Node.prototype.firstChild; 2. Node.prototype.removeChild(); 注意: 1. 移除的节点仍然存在于内存中, 因此依然可以使用. 2. 如果参数节点不是当前节点的子节点, 则会报错.
阅读全文
posted @ 2019-09-11 22:12
怎样将某个节点插入到当前节点内部的某个位置
摘要：1. 插入某个节点之后, 使用: Node.prototype.insertBefore(parentNode, target); 2. 插入某个节点之前, 需要结合 Node.prototype.nextSibling; 注意, 如果第二个参数为 null 或空, 则会自动插入到父节点内子节点的最
阅读全文
posted @ 2019-09-11 21:44
怎样复制(克隆)一个节点
摘要：使用 Node.prototype.cloneNode() 可以克隆当前节点, 如果还想克隆当前节点的所有后代节点, 可以在括号里面加上 true; 注意, cloneNode() 的结果是一个没有插入到dom中的节点, 它没有父节点, 同时, 它也会丢失原节点上的所有 addEventListen
阅读全文
posted @ 2019-09-11 21:30
怎样遍历当前节点的所有后代节点
摘要：1. Node.prototype.hasChildNodes(); 2. Node.prototype.firstChilds(); 3. Node.prototype.nextSibling(); 这里需要注意for循环的写法, 它的作用是循环所有子节点, 对每个字节点都使用DOMComb()函
阅读全文
posted @ 2019-09-11 21:13
怎样判断当前节点是否有子节点
摘要：使用: Node.prototype.hasChildNodes() 如果有子节点则返回 true, 反之 false. 注意, 节点操作都得考虑七种节点类型, 就算把body里面的所有html标签移出, body也还是有子节点, 这些子节点大多数都是换行符, 因为html标签之间的换行符也是一种节
阅读全文
posted @ 2019-09-11 20:45
怎样将当前节点的第一个子节点移动到最后一个子节点后面
摘要：使用 Node.prototype.appendChild(), 如果参数是一个已存在的于文档中的节点, 那它将会被移动到最末尾.
阅读全文
posted @ 2019-09-11 20:29
怎样创建一个新的节点并插入到文档中
摘要：1. 创建一个新的节点: document.createElement() 2. 插入新创建出来的节点: Node.prototype.appendChild()
阅读全文
posted @ 2019-09-11 20:21
怎样判断一个节点是否在文档中
摘要：有的节点是刚创建出来, 还没有插入document中, 这时可能会判断是否插入, 需要用到: Node.prototype.isConnected
阅读全文
posted @ 2019-09-11 20:14
怎样获取当前节点的子节点
摘要：1. 获取当前节点的第一个子节点: Node.prototype.firstChild 2. 获取当前节点的最后一个子节点: Node.prototype.lastChild 3. 获取当前节点的所有子节点: Node.prototype.childNodes 注意这里为啥获取了7个节点呢? 因为这
阅读全文
posted @ 2019-09-11 16:51
怎样将当前节点从DOM树中移除
摘要：1. 获取到当前节点. 2. 获取到当前节点的父节点. 3. 使用 Node.prototype.removeChild() 移除当前节点.
阅读全文
posted @ 2019-09-11 16:03
怎样获取当前节点的父节点或父元素节点
摘要：获取父节点: Node.prototype.parentNode 获取父节点元素: Node.prototype.parentElement 父节点有三种类型: 元素节点（element）、文档节点（document）和文档片段节点(documentfragment), .parentNode 可能
阅读全文
posted @ 2019-09-11 15:52
怎样获取当前节点前面临近的第一个节点
摘要：使用: Node.prototype.previousSbling 用法和 Node.prototype.nextSbling 相同.
阅读全文
posted @ 2019-09-11 14:35
怎样遍历所有同级节点
摘要：原理: 使用了 Node.prototype.nextSibling 在获取不到后面的同级节点时返回 null 的这个特性. 另一个方法是使用 Node.prototype.childNodes.
阅读全文
posted @ 2019-09-11 14:00
怎样获取当前节点后面紧邻的第一个同级节点
摘要：Node.prototype.nextSibling 就像老师点名一样: "李雷后面的韩梅梅起来回答下问题". 如果当前节点的后面没有同级节点, 那 .nextSibling 返回 null. 注意, 如果这里的两个div没有在一行, 那.nextSibling 得到的将是一个换行符, 因为 .ne
阅读全文
posted @ 2019-09-11 13:19
怎样获取当前节点的顶层文档节点
摘要：Node.prototype.ownerDocument 虽然现在还没碰到, 但以后可能出现无法直接获取 document 节点的情况, 这时可以通过任意节点获取到它. Node.prototype.getRootNode() 这个方法的作用和 Node.prototype.ownerDocumen
阅读全文
posted @ 2019-09-11 09:54
怎样查看或修改html的绝对路径
摘要：查看用 Node.prototype.baseURI, 修改用 <base>; 若无法获取, 则返回null.
阅读全文
posted @ 2019-09-11 09:49
怎样获取整个网页中的文本值
摘要：这里的文本值有两个理解, 一是html标签内的文本, 二是网页中展示在页面上的文本. 二者区别在于: 是否对普通用户可见. 一: 获取整个html网页的文本: document.documentElement.textContent; 二: 获取网页中显示的文本: document.document
阅读全文
posted @ 2019-09-11 09:26
怎样获取当前节点及其所有后代节点的文本值
摘要：Node.prototype.textContent nodeValue 只获取当前节点的文本值, 如果节点类型不是文本 /属性 / 注释, 则会返回null. textContent 获取当前节点及其所有后代节点的文本值, 没有获取到, 则返回一个空字符串. 文档节点(document) 和 文档
阅读全文
posted @ 2019-09-11 09:10
怎样获取节点的文本值
摘要：Node.prototype.nodeValue 之所以无法获取div的nodeValue, 原因是div为 元素节点, 而只有文本节点(text) / 注释节点(comment) / 属性节点(attr) 这三种节点类型才有文本值. 所谓文本值, 可以理解成 引号内或标签间的字符串. 较易理解,
阅读全文
posted @ 2019-09-11 08:53
怎样获取节点的名称
摘要：节点的类型用 Node.prototype.nodeType 获取, 节点的名称用 Node.prototype.nodeName 获取. 同样是七种节点, 下面是它们的返回结果: 也就是说, 只有三种节点名称是动态的: Element / attr / DocumentType, 其他的都是一个固
阅读全文
posted @ 2019-09-10 09:09
怎样获取节点的类型
摘要：通过 Node.prototype.nodeType 属性获取. 9 表示该节点为文档节点( Document ), 七种节点类型的对应关系如下: 主要作用是确定节点的类型.
阅读全文
posted @ 2019-09-10 08:53
怎样理解Node对象接口
摘要：dom中的节点都继承自Node接口, 也就是说, 所有的节点都具有Node接口所规定的属性和方法, 比如下面这个 <a> 标签, 它也继承了Node的所有属性和方法: 可以认为Node接口所规定的方法和属性是操作DOM的基础, 因此格外重要. 下面是它的所有属性和方法: 属性Node.prototy
阅读全文
posted @ 2019-09-10 08:34
怎样理解 DOM 的三种层级关系
摘要：除了根节点，其他节点都有三种层级关系。 父节点关系（parentNode）：直接的那个上级节点 子节点关系（childNodes）：直接的下级节点 同级节点关系（sibling）：拥有同一个父节点的节点 注意: 1. 根节点和非根节点都可以没有子节点, 但根节点一定没有父节点, 而非根节点一定有,
阅读全文
posted @ 2019-09-09 13:53
怎样理解DOM
摘要：一句话总结: DOM 是一个 js 对象. 他可以赋予 js 控制 html 文档的能力. 全称: Document Object Model. DOM 的最小组成单位是: 节点 , 节点有7种类型, 分别为: 1. Document：整个文档树的顶层节点2. DocumentType：doctyp
阅读全文
posted @ 2019-09-09 13:45
怎样理解String的slice(), subString(), substr()三个方法
摘要：String.prototype.slice() 是js字符串的切片工具方法, 用于对字符串做'裁剪'操作, 不改变原字符串. substring() 和 slice() 都是可以从原字符串里面切出一部分, 只是substring()有点小特点. 1. 第一个参数大于第二个参数时, 会自动将两者调换
阅读全文
posted @ 2019-09-05 22:54
怎样设置 MySQL 远程连接
摘要：允许用户 root 在 任何IP 上都可以远程连接 所有 mysql数据库 并具有操作数据库的 所有权限, 密码为: myPassword
阅读全文
posted @ 2019-09-03 12:04
