节点操作
创建节点
docment.createElement('节点')
参数：标签名字符串
这些元素原先不存在，是根据需求动态生成的，所以也成为动态创建元素节点，会将创建好的对象作为返回值返回
创建文本
document.createTextNode('文本')
参数：文本内容字符串，并将新的节点返回
添加节点
1、father.appendChild(child) 追加元素 类似数组中的push()
将一个节点添加到指定父节点的子节点列表的末尾。类似css里面的after伪元素
2、father.insertBefore(child,指定元素)
将一个节点添加到父节点的指定子节点前面。类似css里面的before伪元素
替换节点
replaceChild()
可以使用指定的子节点替换已有的子节点
语法：父节点.replaceChild(新节点，旧节点)
删除节点
写法一、father.removeChild(child)
写法二、child.parentNode.removeChild(child)
可以在DOM中删除一个子节点，返回删除的节点
克隆节点
node.cloneNode() 返回调用该方法的节点的一个副本
参数：布尔值,默认是false
false 只克隆节点本身，不克隆里面的子节点
true 拷贝节点，拷贝内容
创建节点另外几种方式
（1）、element.innerHTML
允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML，可以解析html标签
（2）、 element.innerText
获取或设置元素的文本----以纯文本的方式直接显示，不可以解析html标签
（3）、document.write()
直接将内容写入页面的内容流，但是文档执行完毕，则会导致页面全部重绘
（4）、insertAdjacentHTML() /əˈdʒeɪsnt/
insertAdjacentHTML() 是Element的API中的一个方法，可以将字符串文本转化为你想要的节点（Node），并且插入到你想要插入的位置中。而且它并不会向innerHTML一样会替换掉已有的节点，而是会插入到指定位置。
语法：element.insertAdjacentHTML(position,text)
参数1: position
顾名思义，就是想要插入的位置，一共有4个固定的值
'beforebegin'：元素element自己的前面。
'afterbegin'：插入到元素element里面的第一个子节点之前（也就是总是会插入到最前面，例如我插入5个节点，顺序是1、2、3、4、5，那么我就需要以5、4、3、2、1的顺序插入，有一种栈结构先进后出的感觉）。
'beforeend'：插入元素element里面的最后一个子节点之后（这个比较容易理解，就是插入到最后一个节点后，例如我插入5个节点，顺序是1、2、3、4、5，那就正常的1、2、3、4、5就好啦，但是注意是在已有节点的后面哦）。
○'afterend'：元素element自己的后面。
参数2:text文本
可以结合``字符串使用
事件操作
注册事件方式
解绑事件（删除事件）
DOM事件流
事件流概述
事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程叫事件流
例如：给idiv绑定一个事件，时间流顺序如下
事件流3个阶段
（1）、捕获阶段：从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递（从外向内）
（2）、当前目标阶段：触发自己的事件
（3）、冒泡阶段：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发（从内向外）
事件流指定阶段
js代码中只能执行捕获或者冒泡其中的一个阶段，其中onclick和attachEvent只能得到冒泡阶段，我们可以通过addEventListener(type,listener[,useCapture])中的第三个参数来分别演示冒泡和捕获
useCapture：可选，是否在捕获阶段触发事件，需要一个布尔值，默认是false，在冒泡阶段处理程序，如果是true，就是在捕获阶段处理程序
注意：
实际开发中我们很少使用事件捕获，我们更关注事件冒泡
有些事件是没有冒泡的，比如onblur、onfoucs、onmuseenter、onmouseleave
事件冒泡有时我们需要，有时需要避免
事件对象
概念
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象，它有很多的属性和方法
注意：
event 就是一个事件对象，写在我们侦听函数的小括号里面，当形参来看，这个形参，我们可以自己命名，例如event、evt、e等
事件对象是当事件触发了，系统自动给我们创建的，不需要我们去传入实参
事件对象在ie低版本中有兼容性问题，其兼容性的写法：event = event || window.event;，一般不用考虑
事件对象属性
e.target：返回触发事件的对象
e.type：返回事件的类型，比如：click、mouseover，不带on
e.cancelBubble：阻止冒泡 ie6-8使用（了解）
e.returnValue：阻止默认行为， ie6-8使用（了解）
e.preventDefault()：阻止默认行为 非 ie6-8使用
e.stopPropagation()：阻止冒泡 非 ie6-8使用
e.offsetX、e.offsetY：获取鼠标相对于当前元素的位置
e.clientX、e.clientY：获取鼠标相对于浏览器可见窗口的坐标
e.pageX、e.pageY：获取鼠标相对于文档页面的坐标
e.screenX,e.screenY：返回鼠标相对于电脑屏幕的x坐标
事件委托（代理、委派）
不给每个子节点单独设置事件监听，而是将事件统一绑定给元素的共同的祖先元素，然后利用冒泡原理影响设置每个子节点
通过事件委派可以减少事件绑定的次数，提高程序的性能
<body>
<!-- 需求：为每个超链接都绑定单击响应函数 -->
<button id="btn01">增加链接</button>
<ul id="u1">
<li><a href="#" class="link">链接一</a></li>
<li><a href="#" class="link">链接二</a></li>
<li><a href="#" class="link">链接三</a></li>
</ul>
<script>
//点击按钮，新建超链接
var btn01 = document.getElementById("btn01");
var u1 = document.querySelector("#u1");
btn01.onclick = function () {
//新建一个li
var li = document.createElement("li");
li.innerHTML = '<a href="#" class="link">新建超链接</a>';
u1.appendChild(li);
};
//为ul绑定单击响应函数
u1.onclick = function (event) {
console.log(event.target);
if (event.target.className == "link") {
alert("hi");
}
};
</script>
</body>常用的键盘事件
|
|
|
|
|
|
|
|
e.keyCode 返回该键的ASCII值 键盘上每个字符有对应的数字
<body>
<input type="text" />
<script>
document.onkeydown = function (e) {
console.log(e.keyCode);
};
//需求： 使文本框不能输入数字
var int = document.querySelector("input");
int.onkeydown = function (e) {
if (e.keyCode >= 48 && e.keyCode <= 57) {
/* 在文本框输入内容，属于keyCode的默认行为
return false则会取消默认行为 */
return false;
}
};
</script>
</body>