获取标签
1、getElementById()
根据标签的id来获取标签
该方法得到的是单个标签，如果找到那么就返回单个标签，否则返回的使null
2、getElementsByClassName()
根据标签的class来获取标签
该方法返回的是数组(伪)，里面保存着找到的所有的标签,如果一个标签都没有找到那么返回的就是空数组
3、getElementsByTagName()
根据标签的名字(类型)来获取标签
该方法返回的是数组(伪)，里面保存着找到的所有的标签,如果一个标签都没有找到那么返回的就是空数组
4、getElementsByName()
根据标签中name属性节点的值来获取标签
该方法返回的是数组(伪)，里面保存着找到的所有的标签,如果一个标签都没有找到那么返回的就是空数组
备注：getElementsByName() 方法主要用来处理表单，但是我们在处理表单并不使用getElementsByName()方法
通过快捷属性 document.forms 获取页面中所有的表单
document.forms[0]、document.forms.namedItem("formA")
高级获取标签
1、querySelectorAll() 根据条件获取页面中所有的标签
注意：返回值总是一个数组(伪)
2、querySelector() 根据条件获取页面中所有匹配标签中的第一个
注意：返回值总是单个标签
innerText和innerHTML区别
1、innerHTML 操作的是节点内容(如果字符串中有标签那么会解析伪标签)
2、innerText 操作的是文本内容(如果字符串中有标签那么依然以普通的文本来处理)
节点的创建
1、elementNode 元素节点（nodeType == 1）
2、attributeNode 属性节点（nodeType == 2）
3、textNode 文本节点（nodeType == 3）
1、document.createElement("div")
2、document.createAttribute("title")
3、document.createTextNode("上坡和下坡都是坡！！！")
建议的写法(简单)
var ele = document.createElement("div");
ele.setAttribute("title", "我是标题");
ele.innerText = "上坡和下坡都是坡！！！";
Node相关的属性介绍
1、nodeName 节点的名字
2、nodeValue 节点的值
3、nodeType 节点的类型
元素节点相关操作
子节点
1、
oBox.childNodes
获取所有的子节点(属性节点 文本节点 元素节点 注释节点...)
oBox.children
获取所有的子节点(元素节点)
2、
oBox.firstChild
第一个子节点(属性节点 文本节点 元素节点 注释节点...)
oBox.firstElementChild
第一个子元素
3、
oBox.lastChild
最后一个子节点(属性节点 文本节点 元素节点 注释节点...)
oBox.lastElementChild
最后一个子元素
父节点
4、
oBox.parentNode
获取父结点(属性节点 文本节点 元素节点 注释节点...)
oBox.parentElement
获取父结点(元素节点)
兄弟节点
5、
oDiv.nextSibling
下一个兄弟(属性节点 文本节点 元素节点 注释节点...)
oDiv.nextElementSibling
下一个兄弟(元素节点)
6、
oDiv.previousSibling
前一个兄弟(属性节点 文本节点 元素节点 注释节点...)
oDiv.previousElementSibling
前一个兄弟(元素节点)
元素节点的复制和插入
复制 cloneNode(bool)
默认是false,如果需要拷贝标签的内容，那么请设置true
插入 appendChild()
元素节点的删除、清空、替换
删除
1、removeChild() 旧方法
2、remove() 新方法
清空
oBox.innerHTML = "";
替换
1、replaceWith(string|Node)
替换自己，使用文本或者使标签来替换当前的标签
2、replaceChild(newNode,oldNode)
通过父节点，用新节点替换旧节点（替换子节点）
DOM标签的属性和属性节点
1、标签的属性: innerHTML innerText baseURI title ... 直接保存在标签对象身上
2、标签的属性节点： id="demoID" class="box" title="我是标题" 保存在标签对象的attributes属性上面
如何操作属性？
像普通对象一样正常的进行操作
如何操作属性节点？
调用对应的API方法来操作
操作方式1
1、查询属性节点
oDiv.getAttribute("xx")
2、添加属性节点(属性节点的名字，属性节点的值)
oDiv.setAttribute("index", 100)
3、修改属性节点(属性节点的名字，属性节点的值)
oDiv.setAttribute("index", 300)
4、删除属性节点
oDiv.removeAttribute("xx")
操作方式2
console.log(oDiv.attributes);
console.log(oDiv.attributes.getNamedIte("xx").nodeValue);
（查询）
var attr = document.createAttribute("t");
attr.nodeValue = "兔兔兔兔兔兔图";
console.log(oDiv.attributes.setNamedItem(attr));（添加）
console.log(oDiv.attributes.removeNamedItem("t"));（删除）
document也提供了很多访问标签的快捷方法(属性)
/* document.body */
/* document.head */
/* document.title */
/* document.documentElement 获取根节点(html)*/
/* document.contentType 获取页面的类型(text/html) */
/* document.images 获取页面中所有的图片 */
/* document.links 获取页面中所有a标签 */
自定义属性节点(推荐方式)
data-xx="属性值"
console.log(oDiv.dataset.index);
oDiv.dataset.index = 12345;
console.log(oDiv.dataset.xx);
classList
提供了操作class的一套方法
1、添加
oDiv.classList.add("box1")
2、检查:是否应用了某个样式
oDiv.classList.contains("box")
3、删除
oDiv.classList.remove("box")
4、查询
oDiv.classList.value
元素节点的样式
1、设置标签的样式
ele.style.样式名字 = 值
2、获取标签的样式
window.getComputedStyle(ele)
注意点：该方法存在兼容性问题，在IE老版本的浏览器中不能使用这个方法，ele.currentStyle属性
封装获取标签样式的方法(兼容性)
function getStyleWithKey(ele, key) {
if (window.getComputedStyle) {
return window.getComputedStyle(ele)[key];
} else {
return ele.currentStyle[key];
}
}
添加事件得方式：事件监听
/* 兼容写法 */
function addEvent(ele, type, handler) {
if (ele.addEventListener) {
ele.addEventListener(type, handler);
} else if (ele.attachEvent) {
/* 检查是否使IE浏览器 */
ele.attachEvent("on" + type, handler);
} else {
ele["on" + type] = handler;
}
}
addEvent(oBtn, "click", handler);
事件的注销
1、如果通过 oDiv.onmouseenter = fn 添加的事件
oDiv.onmouseenter = null
2、如果通过 oDiv.addEventListener 添加的事件
oDiv.removeEventListener("mouseenter", handler)
常用的事件类型
1、UI事件
/* onload 监听页面加载 */
/* onresize 监听页面大小变化 */
/* onscroll 监听页面滚动 */
2、鼠标事件
/* onclick 点击 */
/* ondblclick 双击 */
/* onmouseenter 移入 */
/* onmouseleave 移出 */
/* onmousedown 按下 */
/* onmouseup 抬起 */
/* onmousemove 移动 */
/* onmousewheel 滚轮 */
3、焦点事件
/* onfocus 获得焦点 */
/* onblur 失去焦点 */
4、输入框事件
/* onchange 内容发生变化 */
/* oninput 内容发生变化 */
5、键盘事件
/* keydown 按下键盘上面的按键 */
/* keyup 抬起 */
/* keypress 按下键盘上面的字符键 */
文本事件
1、input
当输入框的内容发生变化的时候会触发，触发N次
2、change
当输入框失去焦点的时候，会比较输入框当前的值和以前的值，如果发现不同(那么就触发该事件)
键盘事件
1、keydown 按下按键
2、keyup 松开按键
3、keypress 按下按键(字符键)
知识点：
我们需要知道用户按下了哪个按键（键值 e.keyCode ||e.which） , 通过事件对象(e || window.event)获取
表单事件
1、reset 监听表单的重置按钮
2、submit 监听表单的提交按钮
事件对象 event
所有的事件处理函数在触发的时候，都能够拿到一个事件对象，该事件对象保存着跟事件相关的详细信息
重要的属性
type : 类型
target: 目标标签 兼容写法：srcElement
keyCode: 键码 兼容写法：which
path : 事件传递的路径
clientX/Y：事件发生的位置相对于 可视区域 的偏移量
offsetX/Y：事件发生的位置相对于 标签本身 的偏移量
pageX/Y：事件发生的位置相对于 页面 的偏移量
其他属性
altKey: false 事件发生的时候是否按下了键盘的alt
button: 0 左键|右键
ctrlKey: false 事件发生的时候是否按下了键盘的ctrl
timeStamp: 5516.490000001795 标签创建好之后，间隔了多长时间才触发
事件流
指的是事件发生的时候在标签和页面中传递的顺序
/* [1] 事件冒泡流(IE) */
/* [2] 事件捕获流(网景) */
/* DOM标准规定标准的事件流：(1)事件捕获 (2) 处于目标 (3) 事件冒泡 */
事件冒泡
当标签的事件被触发的时候，该事件会往上层冒泡层层传递到文档，在传递的过程中如果遇到的标签也注册了相同的事件那么这个事件也会被触发
注册事件的方式
1、ele.onclick
2、ele.addEventListener("click")
上面的两种方式添加的事件都支持事件冒泡，但是只有ele.addEventListener("click") 支持事件捕获(了解）
事件委托
通过事件对象来获取真正被点击的那个标签
oUl.onclick = function (e) {
e = e || window.event;
var ele = e.target || e.srcElement;
/* 1 只有当点击div标签的时候才打印 */
// if (ele.nodeName == "DIV") {
// console.log(ele.innerText);
// }
/* 2 只有当点击了class为test的标签的时候时候才打印 */
if (ele.className == "test") {
console.log(ele.innerText);
}
}
原文：https://www.cnblogs.com/imbacool/p/12386521.html