新人学习JS的日记。
欢迎各位朋友纠错！
以下内容都在谷歌浏览器进行测试可用
一些方法是ES6的,要用babel转码才能用(不过最新版本谷歌浏览器已经支持90%的ES6语法了,基本都可以使用).
>> Node
>> 属性
前提:node是dom中的一个节点.
>> node.nodeType -- 节点类型
1: 说一下常用的类型值
返回1: 表示为Element节点,例如<div>,<p>
返回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: 通常来获取 <input> <textarea> <select>
2: 若没有元素获得焦点,值为body.
>> document.body -- 当前文档body节点
1: 没有则返回false.
>> document.cookie -- 文档的Cookie,或者设置
1: 返回值是字符串, 可以给该值设置.
>> document.designMode -- 文档是否可编辑
1: 可以编辑文档.
>> document.domain -- 获取/设置文档原始域
1: 常用于跨域.
>> document.documentElement -- 文档的根元素节点
1: HTML文档通常都返回 <html> 节点
>> document.head -- 文档中<head>
1: 返回<head> 标签
>> document.forms -- 文档中所有<form>
1: 返回数组,包含所有<form>节点.
>> document.image -- 文档中所有<img>
1: 返回数组,包含所有<img>节点.
>> document.links -- 文档中所有<a>,<area>
1: 返回数组,包含所有<a>,<area>节点.
>> document.script -- 文档中所有<script>
1: 返回数组,包含所有<script>节点.
>> document.title -- 文档标题
1: 返回字符串,可以修改。
>> document.readyState -- 文档加载情况
1: 返回值 意义
loading document正在加载
interactive 文档加载完,已经解析,但是图像等资源还在加载
complete 所有资源加载完. load事件即将触发
2: 属性值改变使,触发document上的readystatechange事件
>> 方法
>> document.createElement(tagName) -- 创建节点
1: tagName: 标签名.
2: 也可以创建一个HTML标准里没有的新标签.
>> document.createDocumentFragment () -- 创建文档片段
1: 文档片段处于内存中,不在DOM树.
2: 使用文档片段不会造成回流(reflow),达到性能优化的作用.
3: 例: let frag = document.createDocumentFragment();
frag.appendChild(document.createElement('div'));
frag.appendChild(document.createElement('div'));
document.body.appendChild(frag);
>> document.createTextNode(str) -- 创建文本节点
1: str: 文本节点的文本值
>> document.getElementsByClassName(class) -- 通过类名查找节点
1: class: 类名. 可以是多个类名(会查找同时有这多个类名的节点)
2: 返回类数组对象. 不是数组,可以转换为数组.
3: 元素节点也有此方法
>> document.getElementsByTagName(tagName) -- 通过标签名查找节点
1: tagName: 标签名.
2: * 表示获取所有元素.
3: 返回类数组对象. 不是数组,可以转换为数组.
4: 元素节点也有此方法
>> document.getElementById(id) -- 通过ID查找
1: id: 要查找的元素的ID区分大小写.
2: 返回节点,若不存在返回null.
3: document独有方法.
>> document.getElementsByName(name) -- 通过name属性,查找节点.
1: name: 节点的name属性值.
2: 返回一个nodeList对象. 动态的.
>> document.querySelector(cssStr) -- 通过CSS选择器查找某个节点
1: cssStr: 任意css选择器.
2: 返回首个匹配到的元素节点, 没有则返回null.
>> document.querySelectorAll(cssStr) -- 通过CSS选择器查找匹配节点
1: cssStr: 任意css选择器.
2: 返回类数组对象,包含匹配到的所有元素节点, 没有则返回null.
>> document.getSelection() -- 返回用户选择区
1: 待研究.
>> document.hasFocus() -- 文档内元素是否获得焦点
1: 获得焦点返回true, 反则返回false.
一些方法(我认为没什么大用)没有写, 具体请看https://developer.mozilla.org/zh-CN/docs/Web/API/Document
>> Element
>> 属性
前提: el 是一个元素节点.
>> el.attributes -- el节点的属性
1: 返回一个类数组对象,属性值都为el的属性.
2: 若属性为添加自定义非标准的属性,则不会获取到. 例: el.test = 'test' 此属性不会获取
>> el.className -- 返回节点的class
1: 返回字符串,表示当前节点的class值
>> el.classList -- el的class信息对象
1: 返回一个关于class的对象,有以下方法.
.add(str1, str2, ...) 添加class名
.remove(str1,str2, ...) 删除class名
.toggle(str1, boo) 切换class(存在就删除, 不存在就添加),若写boo参数,true添加,false删除.
.contains(str) 检测class是否存在
.item(num) 按索引返回类值
>> el.id -- 节点的ID
1: 返回字符串: 节点的ID
>> el.tagName -- 节点的标签名(大写)
1: 返回字符串: 大写的节点的标签名
>> el.outerHTML -- 返回包含其及其后代的HTML片段
1: 返回字符串: 包含自身及其后代的HTML片段
2: 赋值会修改DOM.
>> el.innerHTML -- 返回其后代的HTML片段
1: 返回字符串: 其后代HTML片段
2: 赋值会修改DOM
>> el.clientWidth -- 内部宽度:padding * 2 + width
1: 返回number类型,节点的 padding * 2 + width 值
2: 值会四舍五入.
>> el.clientHeight -- 内部高度:padding * 2 + width
1: 返回number类型,节点的 padding * 2 + height 值
2: 值会四舍五入.
>> el.clientLeft -- 左边框宽度: border-left
1: 返回number类型,节点的 border-left 值
2: 值会四舍五入.
>> el.clientRight -- 左边框宽度: border-right
1: 返回number类型,节点的 border-right 值
2: 值会四舍五入.
>> el.scrollWidth -- 计算实际宽度
1: 实际内容的宽度,而不是CSS所设置的宽度
2: 值会四舍五入.
3: 例: el里的div过大,el设置overflow:auto;
那么el的内容会可以滚动,此属性会计算实际滚动的内容宽度,而不是el的width值;
>> el.scrollHeight -- 计算实际高度
1: 实际内容的高度,而不是CSS所设置的高度
2: 值会四舍五入.
3: 例: el里的div过大,el设置overflow:auto;
那么el的内容会可以滚动,此属性会计算实际滚动的内容高度,而不是el的height值;
>> el.scrollTop -- 滚动的高度
1: 滚动条距离顶端移动了多少距离
2: 值会四舍五入.
3: 值的范围: 0 - (el.scrollHeight - el.clientHeight)
>> el.scrollLeft -- 滚动的宽度
1: 滚动条距离左端移动了多少距离
2: 值会四舍五入.
3: 值的范围: 0 - (el.scrollWidth - el.clientWidth)
>> 方法
>> el.addEventListener(type, fn, useCapture ) -- 事件绑定
1: type: 事件类型,字符串.
fn: 触发事件后调用的函数.
useCapture: 是否使用事件捕获,默认false.
2: 可以给一个事件添加多个事件绑定.
3: 函数的this值是,进行绑定的那个节点.
>> el.removeEventListener(type, fn, useCapture) -- 删除通过上面方法绑定的事件
1: type: 事件类型,字符串.
fn: 触发事件后调用的函数.
useCapture: 是否使用事件捕获,默认false.
2: fn如果是直接写入的匿名函数则无法删除.
>> el.hasAttribute(attr) -- 是否有指定属性
1: attr: 字符串,属性的名称.
2: 有则返回true,没有则返回false.
>> el.getAttribute(attr) -- 获取指定属性
1: attr: 字符串,属性的名称.
2: 返回值的字符串形式. 若没有则返回null,有的浏览器也返回"" 空字符串.
>> el.setAttribute(attr, val) -- 设置属性值
1: attr: 字符串,属性的名称.
val: 属性的值.
2: 若属性存在,就给其修改为val.
若属性不存在, 添加一个新属性,并赋值.
>> el.removeAttribute(attr) -- 删除指定属性
1: attr: 字符串,属性的名称.
>> el.getBoundingClientRext() -- 返回节点大小,位置关系.
1: 返回一个DOMRect对象
bottom:240.984375 // el的 底部 距离,页面视图的 顶端 距离
height:240.984375 // el的高度
left:0 // el的 左边 距离,页面视图的 左端 距离
right:240.984375 // el的 右边 距离,页面视图的 左端 距离
top:0 // el的 顶部 距离,页面视图的 顶端 距离
width:240.984375 // el的宽度
2: 值比较精准.
>> el.matches(cssStr) — 通过CSS选择器来检测节点
1: cssStr: 字符串(写CSS选择器);
2: CSS选择能匹配到此节点则返回true, 否则返回false
3: 一些浏览器可能是 前缀+matchesSelector
>> el.insertAdjacentElement(position, newElement) -- 插入一个新元素节点
1: position:插入点.
'beforebegin': 在el的前面.
'afterbegin': 在el中的第一个子节点前面.
'beforeend': 在el中的最后一个子节点后面
'afterend': 在el的后面
newElement: 要插入的元素节点
2: 只能插入元素节点
3: 返回插入的元素,失败返回null.
>> el.insertAdjacentHTML(position, html) -- 插入HTML片段
1: position:插入点.
'beforebegin': 在el的前面.
'afterbegin': 在el中的第一个子节点前面.
'beforeend': 在el中的最后一个子节点后面
'afterend': 在el的后面
html: 字符串解析为HTML后, 插入DOM树.
2: 返回插入的元素,失败返回null.
>> el.insertAdjacentText(position, str) -- 插入文本节点
1: position:插入点.
'beforebegin': 在el的前面.
'afterbegin': 在el中的第一个子节点前面.
'beforeend': 在el中的最后一个子节点后面
'afterend': 在el的后面
html: 字符串,或文本节点.
2: 兼容性不如上面2个.
3: 返回插入的元素,失败返回null.
>> querySelectorAll
querySelector
getElementsByClassName
getElementsByTagName
这些方法Element也有,就不写了.
>> el.innerText -- 节点的所有文本内容
1: 将所有节点的文本合并(空格会忽视)然后返回.
2: 收到CSS样式影响,被隐藏的内容,不会被返回.
3: 每次读取此信息会引发重排(reflow),但textContent 不会.
4: 不会去解析script标签
>> el.innerHTML -- 节点包含的HTML片段
1: 返回字符串: 节点的HTML片段(不包含自身);
2: 赋值会解析成HTML片段,修改其DOM,
>> el.outerHTML -- 包含节点自身的HTML片段
1: 返回字符串: 节点的HTML片段(包含自身);
2: 赋值会解析成HTML片段,修改其DOM,
>> HTMLElement
>>属性
前提el 是HTMLElement.
很多属性,你都可以赋值修改,会直接反应到节点中.
>> el.accessKey -- 当前元素的accessKey值
1: 一个快捷访问该元素的建
2: 谷歌的快捷键: win: alt + 该值. OSX: control + alt + 该值.
具体的快捷: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey
>> el.contentEditable -- 当前元素是否可编辑
1: "true" 表示元素是可满足的。
"false" 表示该元素无法编辑。
"inherit" 表示元素继承其父级的可编辑状态。
>> el.isContentEditable -- 当前元素是否可以编辑
1: "true" 表示元素是可满足的。
"false" 表示该元素无法编辑。
>> el.dir -- 当前元素的内容写入方向
1: ltr, 表示从左到右
rtl, 表示从右到左
"", 按照浏览器默认
2: 表格设置为rtl,会从右向左排列
>> el.draggable -- 是否可以拖动
1: true，表示元素可以被拖动
false，表示元素不可以被拖动
>> el.hidden -- 是否隐藏
1: true: 隐藏. false: 不隐藏.
>> el.title -- 元素的title信息
1: 返回值字符串,元素的title值.
>> el.tabIndex -- 元素的tab顺序
1: index是一个数字,表示顺序.
取值需要在0到32767之间。
2: Tab键的遍历顺序是这样的：
对于tabIndex值为正数的元素，如果多个元素的tabIndex值相同，则以他们出现在字符流中的次序来遍历；
否则按tabIndex值由小到大的顺序来遍历。
对于不支持tabIndex属性或支持tabIndex属性并将其赋值为0的元素，按照他们出现在字符流中的次序来遍历。
处于不可用状态的元素不会被遍历到。
3: 支持tabIndex属性的元素有：a,area,button,input,object,select和textarea。
4: tabIndex的值不需要是连续的，也不需要以某个特定值开始。
>> el.lang -- 元素的语言
1: 该属性返回的语言代码（language code）
2: 通常，"en" 表示英语（English）、"ja" 表示（Japanese）、"zh-cn" 表示简体中文等等。该属性的默认值未知（unknown
）
3: 尽管该属性可以应用在单独的元素上，但是通常在文档的根元素（html）上指定。
>> el.style -- 返回元素的样式对象
1: 获取元素的<内联>样式值,
2: 可以赋值来设置内联样式值.
3: 用 - 连接的属性,要用驼峰命名法.
例: el.style.fontSize = '10px'
>> el.offsetHeight -- 元素的内高
1: 值: height + padding*2 + border*2
2: 值会四舍五入
>> el.offsetWidth -- 元素的内宽
1: 值: height + padding*2 + border*2
2: 值会四舍五入
>> el.offsetParent -- 最近的定位元素
1: 返回一个距离el最近的有设置定位的父元素节点.
2: 若没有定位的元素,则使用根元素(标准模式:html, 怪异模式:body).
3: 若el设置display:none; 则返回null.
>> el.offsetTop -- 相对于offsetParent顶部的距离
1: 值会四舍五入
>> el.offsetLeft -- 相对于offsetParent左端的距离
1: 值会四舍五入
>> 方法
>> el.focus() -- 使元素获得焦点
>> el.blur() -- 使元素失去焦点
>> el.click() -- 使元素发生点击事件
ChildNode
更好用的方法,但是兼容性目前不好,还不推荐使用.
>> node.remove() -- 删除node节点
>> node.after(newNode) -- 在node前面插入newNode(也可以是字符串)
>> node.before(newNode) -- 在node后面插入newNode(也可以是字符串)
>> node.replaceWith(newNode) -- 将node替换为newNode.
以上是我所知的的东西，有任何错误，请在评论指出！
O(∩_∩)O谢谢你的观看~
