JavaScript页面操作笔记

DOM

获取节点

• document.getElementById()
• document.getElementByClassName()
• document.getElementsByTagName()
• document.getElementsByName()
• document.querySelector()
• Node.parentNode() 当前节点的父节点
• Node.nextSibling/previousSibling 当前节点的兄弟节点
  • Node.parentNode.children[index] 第n个兄弟节点

//兼容性
const node = Node.nextSibling || Node.nextElementSibling 
//前者为ie678，后者为火狐谷歌ie9+

• Node.childNodes/children 所有子节点，后者只会返回html元素节点（ie678连注释也算）
• Node.firstChild/lastChid 一个子节点

特殊集合

• document.anchors 返回document对象中所有带name特性值的a元素
• document.forms
• document.images
• document.links 返回document对象中所有带href特性值的a元素

操作节点

添加和创建

• document.createElement(“li”)
• parentNode.appendChild(node) 插入最后一个新子节点，（有些小bug）

<div class="box11"><div class="box12"></div></div>
<div class="box21"><div class="box22"></div></div>
<!--box11.appendChild(box22) 结果是box22会跑到box11中去。box21里没有box22.-->

• parentNode.insertBefore(newNode,referenceNode) 在参考节点referenceNode前插入一个新节点，参考节点为null则效果和appendChild一样

删除节点

• parentNode.removeChild(node) 删除子节点node
• node.cloneNode() 参数为空/null/false，则只复制节点node本身，参数为true则node和其所有子节点都复制(深度拷贝），建议在复制之前先把绑定的事件都解绑

替换节点

• parentNode.replaceChild(newNode, someChild) 用newNode节点替换掉someChild节点

处理文本节点

• parentNode.normalize() 删除不含文本的空文本节点、合并两个相邻的文本节点为一个

parent.appendChild(document.createTextNode('text1')
parent.appendChild(document.createTextNode('text2')
// parent.children.length = 2
parent.normalize()
// parent.children.lenght = 1

获取节点属性和样式

• node.属性名
• Node.className 获得标签上的类名
  • className +=" newClass" 添加新类名
  • className = “newClass”
• node[属性名]
• node[“className”] 获取类名
• 以上只能获取或修改原生的属性的属性值，以下无论是自定义属性还是原生属性都能获取到值以及修改。对于自定义属性的设置，用上面的方法设置的属性不会出现在标签上，下面的方法可以，所以设置自定义属性只能统一使用上面的get和set方法或者下面的get和set方法，上面和下面的方法不能混用。
• node.getAttribute(“class”) 获取node节点上的属性的值
• Node.setAttribute(“属性名”, “新的属性值”) 设置node标签上属性的值
• node.removeAttribute(“属性名”) 删除节点属性
• 获取内嵌或外联样式(只读），w3c：window.getComputedStyle(“要获取样式的元素”,“伪元素（没有的话null）”)；ie和opera：obj.currentStyle;
• Node.style.属性名 ->获取或者修改行内样式的属性值，注意style是一个对象，可以通过style.cssText="字符串形式的样式"一次性设置行内样式。

innerHTML和innerText(老版的火狐是textContent)的区别

前者会获得双闭合标签里面的内容（会识别标签），用来修改的话，会把节点里面的所有内容都会替换（替换内容有标签的话会识别成标签），而后者识别标签，修改的话替换内容就算有标签也会被当成文本，不会被识别成标签而被浏览器解析。

nodeType属性

• nodeType == 1表示元素节点；2表示属性节点；3表示文本节点
• nodeName（属性名）、nodeValue（属性值）

脚本化css

• 读写样式 dom.style.prop
  • 写伪元素：通过js改变元素class属性 .a::after -> .b::after,这样就能达到修改伪元素的目的了
• 查询计算样式（只读）
  • window.getComputedStyle(ele,null) 返回一个类数组。里面的属性值是包含有css样式表里面的属性值（绝对值）。在后面添加.width，可以获得单个属性。第二个参数是解决伪元素的（放入伪元素名称）
  • ie9以下不兼容。dom.currentStyle,返回的样式不是经转换后的绝对值。浏览器独有。

BOM

• window.innerWidth/Height 窗口文档的宽高
• clientX/Y,pageX/Y 鼠标点击的位置坐标。
• 让滚动条滚动
  • window.scroll(x,y)/scrollTo(x,y) 多次执行相同的，不会有叠加效果。
  • window.scrollBy() 有累加效果。
• 获得可视窗口大小
  • window.innerWidth/innerHeight
  • ie9以下使用：document.documentElement.clientWidth/clientHeight
  • 怪异模式下的浏览器(文档第一行没有)
    • document.body.clientWidth/clientHeight
    • 举例说我是在ie6编写的网页，但是有ie7的用户访问，那么解决这种冲突，就使用怪异模式，是让ie7用户向后兼容，不使用ie7的高级功能。
• 查看元素的几何尺寸
  • element.getBoundingClientRect()
    • 兼容性很好，该方法返回一个对象，对象里面有bottom、height、left、right、top、width属性
    • height和width属性在老版本ie并未实现，解决办法:width = right - left。
    • 返回的结果不是实时的
  • dom.offsetWidth/offsetHeight
    • 比上面的高级，让上面的被遗弃。返回实际宽高
• 查看元素位置
  • dom.offsetLeft/offsetTop 对于无定位父级元素，返回相对文档坐标（对于顶部注意塌陷问题），对于有定位的父级的元素，返回相对于最近的有定位的父级的坐标，不管自己是不是定位元素，也不管这距离是由什么产生的。
  • dom.offsetParent
    • 返回最近的有定位的父级，如无，返回body。

事件

事件对象event

该对象里包含着当前事件相关的一切信息

• ie678是window.event

//兼容写法
function(event){
    event = event || window.event;
}

• 事件源对象
  • event.target 火狐只有这个
  • event.srcElement ie只有这个
  • chrome都有上面两个

事件流

事件传播阶段：事件捕获（ie除外）->目标->件冒泡

• 事件捕获：结构上嵌套关系的元素，才会存在事件捕获功能。沿dom树从上到下找，直到捕获到事件目标target。在这过程中默认情况下，相应的监听函数不会被触发。事件传递顺序window > document > html >body > 父元素、子元素、目标元素。
• 事件冒泡：结构上嵌套关系的元素，才会存在事件冒泡功能。事件从target开始，从子元素向祖先元素冒泡，直到页面的最上一级标签，通俗来说就是子元素事件被触发，父元素I(也绑定了函数）的同样的事件也会被触发。顺序是和捕获阶段相反（ie6最上一层是document，不是window）。
• 不会冒泡的事件：blur、focus、load、unload、mouseenter、mouseleave、reset。检查事件是否能冒泡可以用event.bubbles，返回值是true则可以冒泡。

事件处理

• 取消冒泡
  • event.stopPropagation() w3c标准，不支持ie9以下版本
  • event.cancelBubble = true ie独有，谷歌也可以使用。
• 阻止默认事件：表单提交、a标签跳转、右键菜单等
  • return false；以对象属性的方式注册的事件才生效
  • e.preventDefault() w3c标准，ie9以下不兼容
  • event.returnValue = false 兼容ie

function(event) {
    event = event || window.event;
    if(event.preventDefault) {
        event.preventDefault();
    }else {
        event.returnValue = false;
    }
}

• 事件委托机制：利用冒泡或捕获机制来绑定事件，对于处理大量的事件绑定无需使用循环。扩展性和性能好。

事件类型

• 鼠标对象Mouse.event
  • click 鼠标点击。DOM3标准规定：click事件只能监听左键
  • dblclick 双击
  • mouseover 鼠标悬停
  • mouseout 鼠标移走
  • mouseup 鼠标按键弹起
  • mousedown 鼠标按键按下
  • contextmenu 弹出右键菜单
• keyup 按下键盘并释放
• change 文本内容或下拉菜单中的选项改变时
• focus 获得焦点
• blur 失去焦点
• load 网页加载完后触发
• unload 关闭网页
• submit 表单提交
• reset 重置表单