1.cookie
* cookie
* 1. cookie 只能在用服务器启动的页面中正常使用
* 解决: vscode 安装 Live Server
*
* 语法: document.cookie = 'key=value'
*/
// 设置一条 cookie
// document.cookie = 'QQ=123456789'
// 设置多条 cookie
document.cookie = 'QQ=123456789'
document.cookie = 'pasword=987654321'
// 设置一条带有过期时间的 cookie
/**
* 不管你设置的是那个时区的时间, (我们是东八区)
*
* 它都会按照世界标准时间去设置
*
* 如果我们想要设置一个过期时间的话, 需要先往后调整8小时; 然后加上你需要的过期时间
*
*
* 比如: 我需要设置一条 30秒后过期的 cookie
* 1. 获取当前时间
* 2. 将当前时间往后调整 8 小时
* 3. 把调整后的时间 加上我们设置的过期时间
*/
var timer = new Date()
document.cookie = 'QQ=123456789;expires=' + timer
/**
* 比如: 我需要设置一条 30秒后过期的 cookie
* 1. 获取当前时间
* 2. 将当前时间往后调整 8 小时
* 3. 把调整后的时间 加上我们设置的过期时间
*/
var timer = new Date()
// timer.setTime(timer.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30)
// document.cookie = 'VX=6666;expires=' + timer
// 获取 cookie
console.log(document.cookie)
-
cookie 与 storage 的区别?
-
* 出现时间 cookie: 有 JS 的时候就有了 storage: 有 H5 以后才有的 * 存储大小 cookie: 4kb storage: 20MB * 前后端交互(前端向后端发送请求) cookie: 交互时请求默认携带 cookie storage: 交互式请求不会携带, 除非前端人员配置传递 * 前后端操作 cookie: 不管前后端语言都可以操作 storage: 只能有前端语言来操作 (JS) * 过期时间: cookie: 默认会话级, 页面关闭, 存储消失; 可以通过手动配置 storage: 不能通过手动配置 2. localStorage 与 sessionStorage 的区别? * 过期时间: localStorage: 永久存储, 除非手动清理 sessionStorage: 会话级别, 关闭页面, 存储就失效 -
获取非常规DOM
html 语法: document.documentElement head 语法:document.head body 语法:document.body
-
获取常规DOM
1.通过id获取 document.getElementByld('id名') 作用:如果有这个id就获取到对应的这个标签，如果没有就是返回null 注意:通过这个方法只能获取一个
2通过类名获取 document.getElementsByClassName('类名') 作用:返回的是一个伪数组，如果有就返回这个伪数组，如果没有就是一个空的伪数组
3.通过标签名获取 document.getElementsByTagName('标签名') 作用:是一个伪数组，如果有就放到伪数组中，如果没有就是一个空伪数组中
4.通过name属性获取 document.getElementsByName() 作用:是一个伪数组，如果有就放到伪数组中，如果没有就是一个空伪数组
5.通过选择器来获取 document.querySelector(选择器) 这里的选择器和我们的css中的选择器是一样的 作用:获取到的是一个伪数组
-
获取类名
获取的类名“item”是一个数组，应使用数组的角度去选择对应的类名 由示例可得：有两个div的类名都是class=“item”，但发生宽度变化的只有最上面的div，是因为选择类名时，使用下标[0]，选择了第一个div 对应代码为： document.getElementsByClassName('item')[0];
-
获取子节点与子元素节点
1.通过获取dom方式直接获取子节点 其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问
2.通过childNodes获取子节点 使用childNodes获取子节点的时候，childNodes返回的是子节点的集合，是一个数组的格式。他会把换行和空格也当成是节点信息。
3.通过children来获取子节点 利用children来获取子元素是最方便的，他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。
-
获取第一个子节点与第一个子元素节点
1.获取第一个子节点 firstChild来获取第一个子元素，但是在有些情况下我们打印的时候会显示undefined，这是什么情况呢？？其实firstChild和childNodes是一样的，在浏览器解析的时候会把他当换行和空格一起解析，其实你获取的是第一个子节点，只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和childNodes一样处理呀。
-
获取最后一个子节点与最后一个子元素节点 1.获取最后一个子节点 lastChild获取最后一个子节点的方式其实和firstChild是类似的。同样的lastElementChild和firstElementChild也是一样的。不再赘余
-
获取兄弟节点
-
通过获取父亲节点再获取子节点来获取兄弟节点
var brother1 = document.getElementById("test").parentNode.children[1];
-
-
获取上一个兄弟节点
在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。他们的区别是previousSibling会匹配字符，包括换行和空格，而不是节点。previousElementSibling则直接匹配节点。
var brother2 = document.getElementById("test").previousElementSibling; var brother3 = document.getElementById("test").previousSibling;
- 获取下一个兄弟节点
同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是类似的。 var brother4 = document.getElementById("test").nextElementSibling; var brother5 = document.getElementById("test").nextSibling;
-
获取父级节点
- parentNode获取父节点 获取的是当前元素的直接父元素。parentNode是w3c的标准。 var p = document.getElementById("test").parentNode;
- parentElement获取父节点 parentElement和parentNode一样，只是parentElement是ie的标准。 var p1 = document.getElementById("test").parentElement;
- offsetParent获取所有父节点 一看offset我们就知道是偏移量 其实这个是于位置有关的上下级 ，直接能够获取到所有父亲节点， 这个对应的值是body下的所有节点信息。 var p2 = document.getElementById("test").offsetParent;
-
创建DOM createElement()方法，用于创建DOM元素
-
添加DOM到父级指定位置 [CONTAINER].appendChild([元素])
-
修改DOM 可以根据标签名创建一个元素节点对象： document.createElement() 可以根据文本内容创建一个文本节点对象：document.createTextNode() 向父节点中添加指定的子节点：父节点.appendChild(子节点) 将一个新的节点插入到旧节点的前边：父节点.insertBefore(新节点,旧节点) 使用一个新的节点去替换旧节点： 父节点.replaceChild(新节点,旧节点) 删除指定的子节点： 父节点.removeChild(子节点) 或者：子节点.parentNode.removeChild(子节点)（推荐方式，不用再获取父节点）
-
克隆DOM 复制(克隆)一个 LI 想要复制的节点.cloneNode(参数布尔值) 参数 false 不克隆子节点 默认 参数 true 克隆子节点
-
DOM 0 级事件绑定方式 语法： 1 //box.onclick = function(){} 2 //元素.事件行为=函数 相当于给一个元素的属性赋值,只能赋一个值,后面如果再赋值就会覆盖前面的值,所以说DOM0级事件只可以绑定一次,如果绑定多次,后面的会把前面的给覆盖了,因为是一个赋值的过程,一个属性只能赋一个值。
DOM0级事件的移除 语法： 1 //box.onclick = null; 2 //元素.事件行为=null; 3 // 元素的事件行为,本身默认值就是null,把null这个值赋值回去就可以了 4 //DOM0级事件都是在冒泡阶段发生的 注：DOM0级事件兼容任何浏览器
-
DOM 2 级事件绑定方式
关键词：addEventListener 语法： box.addEventListener('事件类型去掉on的',函数,第三个参数是true或者是false) false:默认 冒泡阶段发生。 true:捕获阶段发生。
例：
点我注：DOM2级事件可以绑定多个函数,按照你绑定的先后顺序执行。DOM2级事件移除 关键词：removeEventListener。 语法： box.removeEventListener('click',fn,布尔值)
1例：
点我注：为了移除事件好操作一般绑定事件的时候使用一个函数名来代替这个函数
DOM2级事件有兼容性(attachEvent),现在微软已经放弃IE8及以下了,所以一般我们很少对它做处理了,但是个别的要进行处理,所以我们要进行判断一下,window下如果有addEventListener我们就用addEventListener,如果没有我们就不用addEventListener。
在低版本IE浏览器下,没有addEventListener,然后再低版本IE浏览器下使用attachEvent 低版本： 绑定:attachEvent() 移除:detachEvent()
-
获取鼠标位置(事件源; 页面; 浏览器窗口)
clientX 以浏览器窗口左上顶角为原点，定位 x 轴坐标
clientY 以浏览器窗口左上顶角为原点，定位 y 轴坐标
offsetX 以当前事件的目标对象左上顶角为原点，定位 x 轴坐标
offsetY 以当前事件的目标对象左上顶角为原点，定位 y 轴坐标
pageX 以 document 对象（即文档窗口）左上顶角为原点，定位 x 轴坐标
pageY 以 document 对象（即文档窗口）左上顶角为原点，定位 y 轴坐标
screenX 计算机屏幕左上顶角为原点，定位 x 轴坐标
screenY 计算机屏幕左上顶角为原点，定位 y 轴坐标
layerX 最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 x 轴
layerY 最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 y 轴
// JS 的鼠标事件
var oDiv = document.querySelector('div') // 1. 左键单击 oDiv.onclick = function () { console.log('单击元素时触发') } // 2. 双击事件 300ms 内连续点击两次鼠标 oDiv.ondblclick = function () { console.log('双击元素时触发') } // 3. 右键事件 鼠标右键单击 oDiv.oncontextmenu = function () { console.log('鼠标右键单击时触发') } // 4. 鼠标按下事件 鼠标左键按下的时候会触发的(哪怕鼠标没有抬起) oDiv.onmousedown = function () { console.log('鼠标按下时触发') } // 5. 鼠标抬起事件 鼠标左键抬起的时候会触发的 oDiv.onmouseup = function () { console.log('鼠标抬起时触发') } // 6. 鼠标移入事件 鼠标的移动到元素内部时触发 oDiv.onmouseover = function () { console.log('onmouseover 鼠标移入时触发') } // 7. 鼠标移出事件 鼠标移动出元素内部时触发 oDiv.onmouseout = function () { console.log('onmouseout 鼠标移出时触发') } // 8. 鼠标移动事件 鼠标在元素内部移动时触发 oDiv.onmousemove = function () { // console.log('鼠标移动时触发') } // 9. 鼠标移入事件2 oDiv.onmouseenter = function () { console.log('onmouseenter 鼠标移入事件2') } // 10. 鼠标移出事件2 oDiv.onmouseleave = function () { console.log('onmouseleave 鼠标移出事件2') } // onmouseover onmouseout 两个方法 移入元素和移入元素子盒子时都会触发 // onmouseenter onmouseleave 两个方法 只会在移入元素时触发 /** * 键盘事件: * document 或者 input * * document.on键盘事件的事件类型 = function () {} */ // 1. 键盘抬起事件 document.onkeyup = function () { console.log('键盘按键抬起') } // 2. 键盘按下事件 document.onkeydown = function () { console.log('键盘某个按键被按下') } // 3. 键盘按下抬起事件 document.onkeypress = function () { console.log('键盘按下抬起时触发') } // 1. 浏览器滚动事件 // var oDiv = document.querySelector('div') // console.log(oDiv) // null window.onload = function () { // 当 页面 所有资源加载完毕时 执行 var oDiv = document.querySelector('div') console.log(oDiv) } // 表单事件 var inp = document.querySelector('#inp') // 1. 获得焦点事件 inp.onfocus = function () { console.log('当前文本框获得焦点') } // 2. 失去焦点事件 inp.onblur = function () { console.log('当前文本框失去焦点') } // 3. 文本框内容改变时触发 inp.onchange = function () { console.log('当前文本框内容被更改') } // 4. 文本框输入内容时触发 inp.oninput = function () { console.log('当前文本框正在输入内容') } -
获取元素偏移量
就是元素在页面上的什么位置 我们有几个属性来获取，offsetLeft 和 offsetTop ， offsetWidth 和 offsetHeight offsetLeft 和 offsetTop：左边和上边的偏移量，没有定位的情况下，获取元素边框外侧到页面内侧的距离，有定位的情况下是获取元素边框外侧到定位父级边框内侧的距离
offsetWidth 和 offsetHeight：获取元素内容宽高+padding宽高+border宽度的和
