js-DOM - 爱码网

1,什么是DOM。

DOM是html文档结构，为了能让js好操作元素而制定的一些规范，dom的根本就是document对象，改对象有很多属性和方法，例如创建节点、复制节点、移除节点、修改属性等。（简单说，就是操控html元素的，比如说按钮）

2.怎么获取元素

innerHTML(相当于元素的内部属性)；

innerText(获取元素内的文本内容，与innerHTML不同，会去掉html标签)；

2.1通过id查找元素

js-DOM js-DOM

2.2通过标签名获取一组元素节点对象，存储在一个数组里面。

js-DOM js-DOM

2.3通过类名一组元素节点对象（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效），也是存储在一个数组里面。但是IE8没有该方法，可以用querySelector("css中的类选择器，例如 .one")，只能返回一个唯一的值，如果有多个，则返回第一个拥有该名字的元素；

js-DOM

2.4 getElementsByName("");返回带有指定名称的对象集合，通常用于表单中的单选框checkbox的相同name。

js-DOM

3.事件

事件就是用户和浏览器的交互行为，比如说点击按钮，鼠标移动等

3.1绑定事件

<button onclick="alert('点我干什么')">点我一下试试</button>

事件句柄（通过什么行为触发事件，比如说双击，单击）

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

ondblclick双击

js-DOM

js-DOM 双击之后 js-DOM

onsubmit 表单中确定按钮时提交（form中如果忽略action，则默认是当前页面）

js-DOM

3.2事件响应函数

当事件触发时，函数就会被调用。

第一种是在script标签里绑定触发事件

js-DOM

第二种是在html元素中绑定触发的事件

js-DOM

不能这么写，因为浏览器是从上往下依次执行的，在执行到onclick的时候，该页面还没有加载完，就没有加载出来DOM对象，script标签就不会成功被执行，所以就会报错。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件响应函数</title>
<script>
var a = document.getElementById("btn");
a.onclick = function(){
alert("hello");
}

</script>
</head>
<body>

<button id="btn">click</button>

</body>
</html>

改进：利用onload在页面加载完之后再执行单击触发的函数

js-DOM

3.3鼠标/键盘属性

属性	描述
altKey	返回当事件被触发时，"ALT" 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。
metaKey	返回当事件被触发时，"meta" 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。

例子：button检验用哪个鼠标键点击的，0：左键 1：中键 2：右键；

注意：onmousedown在添加了<!DOCTYPE html>时会跟event事件冲突，导致无法达到预想的结果，如图中在浏览器中只能在p标签点击时才能提示信息，可明明我们是在body设置的。。这时候有两种解决方案，一种是去掉<!DOCTYPE html>标签，但是不建议用这种方法，因为浏览器会进入怪异模式（用非标准模式进行渲染）；第二种是给body设置宽高。

js-DOM

clientX,clientY检验鼠标点击的位置。

js-DOM

altKey:检验是否按了alt键

js-DOM

4.DOM的一些方法

appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

5.节点

js-DOM

例如删除自己

js-DOM