DOM笔记

DOM（Document Object Model）文档对象模型 利用DOM提供的方法获取元素（逻辑性不强，繁琐）参数均是大小写敏感的字符串 getElementById()： 参数是大小写敏感的字符串，返回的是一个元素对象 getElementByTagName()： 返回的是元素对象集合，以伪数组的形式存储，可以遍历 element.getElementByTagName()： 获取某个元素内部的子元素 (H5新增)getElementsByClassName(')： 返回元素对象集合，伪数组 (H5新增)querySelector()： 根据指定选择器返回第一个元素对象 (H5新增)querySelectorAll()： 返回指定选择器的所有元素对象集合，伪数组 document.body： 获取body元素 返回body对象 document.documentElement： 获取html元素 返回html元素对象

事件三要素：事件源 事件类型 事件处理程序 常见鼠标事件: onclick 鼠标左键 onfocus： 获得鼠标焦点触发 onmouseover： 鼠标经过触发 onblur： 失去鼠标焦点触发 onmouseout： 鼠标离开触发 onmouseup： 鼠标弹起触发 onmousemove： 鼠标移动触发 onmousedown： 鼠标按下触发 contextmenu： 禁用鼠标右键 selectstart： 禁止选中文字

改变元素内容: element.innerText： 不识别html标签，同时空格和换行也会去掉 element.innerHTML： 识别html标签，同时保留空格和换行

常用属性操作 img.src input.value element.style img.title input.type element.className img.alt input.disabled（禁用按钮） *display: none不占页面空间，visibility:hidden占页面空间

排他思想：首先清除其他人的样式，然后再设置自己的样式

自定义属性操作（以data-开头） 获取： element.属性: 获取内置属性值（元素本身自带的属性） element.getAttribute('属性')： 获取（程序员）自定义的属性，驼峰命名法 (H5新增)element.dataset.属性: dataset是一个集合，里面存放了所有以data-开头的自定义属性 (H5新增)element.dataset['listName']: 如果自定义属性里面有多个-连接的单词，我们获取的时候采取驼峰命名法

设置： element.属性 = '值' element.setAttribute('属性', '值')

移除： element.removeAttribute('属性')

利用节点层级关系获取元素（逻辑性强，更简单，但兼容性稍差） /*元素：html标签 节点：所有内容 节点和元素的区别：元素是节点的一个类型 节点至少拥有nodeType（节点类型），nodeName（节点名称），和nodeValue（节点值）这三个基本属性

• 元素节点 nodeType 为 1

• 属性节点 nodeType 为 2

  • 文本节点 nodeType 为 3（文本节点包含文字，空格，换行等）*/ 父节点：node.parentNode 得到的是离元素最近的父级节点，如果找不到返回null 子节点：parentNode.childNodes 包含元素节点和文本节点，一般不提倡使用 子节点：parentNode.children（非标准）只返回子元素节点，伪数组形式，其余节点不返回 第一个子节点： parent.firstChild 包含元素和文本节点 parentNode.firstElementChild： 只包含元素节点 最后一个子节点： parent.lastChild parent.lastElementChild 兄弟节点： node.nextSibling node.nextElementSibling node.previousSibling node.previousElementSibling 创建 document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，会导致页面全部重绘 document.createElement('tagname') 创建的元素原先不存在，创建多个元素效率稍低，但是结构清晰 element.innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂，内容写入DOM节点，不会导致页面全部重绘 添加 node.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾类似于css里面的after伪元素 node.insertBefore(child, 指定元素): 插入指定节点之前 删除 node.removeChild(child) : 删除一个子节点，返回删除的节点 javascript：；阻止链接跳转 克隆 node.cloneNode( ) : 括号里面为空或false，浅拷贝，只复制标签不复制里面的内容 node.cloneNode( true) ：括号里面为true，深拷贝，复制标签且复制里面的内容

遍历对象： for(var k in obj) { ​ k 得到的是属性名 ​ obj[k] 得到的是属性值 }

事件高级 注册事件： ​ 传统方式：利用on开头的事件，具有事件唯一性 方法监听注册方式：addEventListener()它是一个方法，推荐使用 ​ 监听器即function eventTarget.addEventListener(type, listener[, useCapture]) ​ type: 事件类型字符串，比如click，mouseover，注意这里不带on ​ listener：事件处理函数，事件发生时，会调用该监听函数 ​ useCapture：可选参数，是一个布尔值，默认是false eventTarget.attachEvent(eventNameWithOn, callback) ​ eventNameWithOn: 事件类型字符串，比如onclick, onmouseover, 这里要带on ​ callback：事件处理函数，当目标触发事件时回调函数被调用 删除事件： ​ 传统注册方式：eventTarget.onclick = null; ​ 方法监听注册方式： ①eventTarget.removeEventListener(type, listener[, useCapture]); ②eventTarget.detachEvent(eventNameWithOn, callback);

dom事件流 捕获 -> 目标阶段 -> 冒泡

1. JS代码中只能执行捕获或者冒泡其中的一个阶段

2. onclick 和 attachEvent只能得到冒泡阶段

3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html ->body -> father ->son

4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body ->html ->document (实际开发中很少使用事件捕获，更关注事件冒泡，有些事件是没有冒泡的，比如 onblur，onfocus，onmouseenter，onmouseleave)

事件对象：监听函数的形参event 常见属性和方法： e.target 返回触发事件的对象 （标准） e.srcElement 返回触发事件的对象 （非标准） e.type 返回事件的类型 比如click mouseover 不带on e.cancelBubble 该属性组织冒泡 （非标准） e.returnValue 该属性阻止默认事件（默认行为） (非标准）比如不让链接跳转 e.preventDefault() 该方法阻止默认事件（默认行为) （标准）比如不让链接跳转 e.stopPropagetion() 阻止冒泡 *e.target 点击了哪个元素，就返回哪个元素；this 是这个元素绑定了哪个事件就返回谁

事件委托（代理、委派） 原理：不是每个子节点单独设置事件监听器，而是事件监听器设置再其父节点上，然后利用冒泡原理影响设置每个子节点 作用：只操作了一次DOM，提高了程序的性能 鼠标事件对象 e.clientX 返回鼠标相对于浏览器窗口可视区的 X 坐标 e.clientY 返回鼠标相对于浏览器窗口可视区的 Y 坐标 e.pageX 返回鼠标相对于文档页面的 X 坐标 e.pageY 返回鼠标相对于文档页面的 Y 坐标 e.screenX 返回鼠标相对于电脑屏幕的 X 坐标 e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标 *赋值给绝对定位的left等时，要加 'px'

常用键盘事件 onkeyup 某个按键被松开时触发 onkeydown 某个按键被按下时触发 onkeypress 某个按键被按下时触发，但它不识别功能键 如 ctrl shift 箭头等 *执行顺序：keydown - keypress - keyup keyup 和 keydown 事件不区分字母大小写 a 和 A 得到的都是65 keypress 事件区分大小写 键盘事件对象属性 keyCode 返回该键的ASCII值