新人学习JS的日记。
欢迎各位朋友纠错！
以下内容都在谷歌浏览器进行测试可用
一些方法是ES6的,要用babel转码才能用(不过最新版本谷歌浏览器已经支持90%的ES6语法了,基本都可以使用).
>> Node
>> 属性
前提:node是dom中的一个节点.
>> node.nodeType -- 节点类型
1: 说一下常用的类型值
返回1: 表示为Element节点,例如,
返回2: 属性节点
返回3: 表示为Text节点,文本节点.
2: 更多请看 https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType
>> node.nodeValue -- 节点值
1: 节点(常用) 值
Text 文本节点的内容
Attr 属性值
Element null
更多请看 https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeValue
2: 对于文本,属性节点,(不返回null的节点)的该属性赋值,会直接改变其值.
>> node.textContent -- 节点的所有文本内容
1: 将所有节点的文本合并然后返回
2: Document,DocumentType 或者 Notation 类型节点,则返回null.
3: 给此属性赋值,会删除所有子节点,然后替换为给定文本节点
>> node.ownerDocument -- 节点的根节点
1: 通常为#document. document返回null
>> node.parentNode -- node的<父节点>
1: 返回其DOM树中node的父节点.
2: document返回null. 创建的节点还未加入dom返回null.
>> node.childNodes -- node的所有<子节点>的集合
1: 获取node节点的所有 子节点.
2: 返回一个nodeList对象,数组方法无法使用(nodeList有forEach方法),你可以将它转换为数组:
Array.prototype.slice.call(nodeList);
Array.from(nodeList);
[...nodeList];
3: 动态集合,子节点的任何变动,都会直接更新. 你无须再次获取.
>> node.firstChild -- node节点的第一个<子节点>
1: 返回node节点的子节点的第一个节点.
2: 若没有子节点,返回null.
>> node.lastChild -- node节点的最后一个<子节点>
1: 返回node节点的子节点的最后一个节点.
2: 若没有子节点,返回null.
>> node.nextSibling -- node节点的下一个<兄弟节点>
1: 返回node节点的紧跟在其后面的节点.
2: 若没有返回null.
3: 若只想获得元素节点可用: Element.nextElementSibling
>> node.previousSibling -- node的前一个<兄弟节点>
1: 返回node节点的紧跟在其前面的节点.
2: 若没有返回null.
3: 若只想获得元素节点可用: Element.previousElementSibling
>> node.children -- node的所有<元素子节点>
1: 返回node的子节点的所有元素节点.
2: 返回值是数组.
>> node.firstElementChild -- node节点的第一个元素子节点
1: 返回node节点的子节点的第一个元素节点.
2: 若没有子节点,返回null.
>> node.lastElementChild -- node节点的最后一个<元素子节点>
1: 返回node节点的子节点的最后一个元素节点.
2: 若没有子节点,返回null.
>> node.childElementCount -- node的元素子节点数量
1: 返回一个整数, 没有则返回0
>> 方法
>> Node.normalize() -- 规范节点中的文本
1: 去除空文本节点(空白,换行),相邻的文本节点会合并.
>> Node.hasChildNodes() -- 是否有子节点
1: 如果有返回true , 否则返回false.
>> node.contains(targetNode) -- targetNode是否为node的后代节点
1: targetNode: 判断是否为node的后代节点.
2: 如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回 false.
>> node.compareDocumentPosition(targetNode) -- 位置关系
1: targetNode: 要与node进行位置比较的节点.
2: 返回值 意义
0 node与targetNode是同一节点
1 node与targetNode<不在>同一文档
2 node是targetNode的<后代>节点
4 node是targetNode的<祖先>节点
8 node被targetNode所包含
16 node 包含 targetNode
3: 同时具有多种位置关系,值会相加. 例:
doucment.compareDocumentPosition(任意文档内节点 B)
// 返回20 document是B的祖先,也包含B. 4+16
4: 与 & 位于运算符计算更有意义.
>> node.cloneNode(deep) -- 克隆节点
1: node: 要被克隆的节点. deep:布尔值,是否深度克隆.
deep:为true会克隆其所有的DOM树.
2: 克隆不会克隆node的事件绑定. 例如:
addEventListener 不会克隆.
node.onclick = 函数 不会克隆.
node.onclick = "alert('dads')" (特例)会克隆.
3: 若node有ID属性,你应该给克隆后的节点重新指定ID.以防出现多个相同ID.
>> node.isEqualNode(targetNode) -- 节点是否相同
1: 相同不是 ==, === . 是指节点类型,节点属性,后代节点等等是否相同.
2: 相同返回true, 反则返回false.
>> node.removeChild(targetNode) -- 删除子节点
1: node: targetNode的父节点.
targetNode: 要被删除的节点.
2: 不获取node节点直接删除: targetNode.parentNode.removeChild(targetNode)
3: 最好先解除事件绑定再删除,因为删除节点,事件绑定还会存在,占内存.
4: 返回被删除的节点,你可以保留下来,以后使用. 不保留,会马上销毁.
>> node.appendChild(targetNode) -- 添加节点到父节点的子节点队列末尾
1: node: targetNode的父节点.
targetNode: 要添加的节点.
2: targetNode 会被添加到 node 的子节点的末尾.
若 targetNode 已经在 node 中,则会被移动到末尾.
3: 方法相当于将 targetNode 移动到 node 的子节点末尾.
4: 返回targetNode节点.
>> parentNode.replaceChild(newChild, oldChild) -- 替换节点
1: parentNode: 要替换节点的父节点.
newChild: 新节点,用来替换.
oldChild: 要被替换的节点.
2: 若oldChild在DOM中,先将其删除,在将newChild放入.
3: 返回oldChild节点.
>> parentNode.insertBefore(newChild, targetChild) -- 在目标子节点前插入新子节点
1: parentNode: 2个节点的父节点.
newChild: 新节点,用来插入.
targetChild: 在此目标前插入.
2: 若 targetChild 为 null 则在末尾插入.
3: 返回newChild.
>> 没有insertAfter方法(在目标节点后插入).
1: 模拟: parentNode.insertBefore(node1, node2.nextSibling);
以下接口继承Node的方法和属性：Document，Element，CharacterData（其中Text，Comment，和CDATASection继承）,ProcessingInstruction，DocumentFragment，DocumentType，NotationEntityEntityReference.
>> Document
>> 属性
>> document.doctype -- 文档类型
1: 返回文档类型声明,没有则返回null.
>> document.URL -- 文档地址
1: 返回文档的URL地址.
>>document.loaction -- 关于URL的信息
1: 返回一个对象.包含URL的所有信息
>> document.hidden -- 文档是否被隐藏
1: 如何判断隐藏: 页面不在可以被看到,锁屏,页面被完全覆盖等.
2: 完全看不到返回 true. 有任意处可以被看到返回 false.
>> document.visibilityState -- 文档可见详情
1: 返回值 意义
'visible' 至少有一处可见
'hidden' 对用户不可见
'prerender' 正在渲染,并且不可见
'unloaded' 正在从内存卸载
2: 相关事件: visibilitychange 当值改变时将事件发生到document.
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
});
>> document.activeElement -- 当前获取焦点的元素.
1: 通常来获取