js-DOM

概念
DOM（Document Object Model，文档对象模型）是W3C制定的跨平台编程接口标准，用于处理HTML和XML文档的访问与操作。
简单说就是js通过DOM控制html的操作。

节点
Node改成HTML的最基本的单元。

文档节点：整个HTML文档；
元素节点：HTML标签；
属性节点：元素的属性；
文本节点：HTML标签中文本的内容。

	nodeName	NodeType	nodeValue
文档节点	`#document`	9	`null`
元素节点	标签名	1	`null`
属性节点	属性名	2	属性值
文本节点	`#text`	3	文本内容

例如通过DOM获取对象，修改对象的文字

<button id="btn">按钮</button>
<script>
    var button = document.getElementById("btn");
    button.innerHTML = "修改按钮";
</script>

事件
就是用户和浏览器之间的交互行为。
onclick 点击
ondblclick 双击
onmousemove 鼠标移动到按钮上触发
onscroll 滚动条滚动的事件

 button.onmousemove = function () {
            alert("来了");
        };

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

文档的加载
两种方式，写在body或head里

<body>
    <button id="btn">按钮</button>
    <script>
        var button = document.getElementById("btn");
        button.innerHTML = "修改按钮";
        button.onmousemove = function () {
            alert("点了");
        };
    </script>
</body>

<head>
    <script>
        //页面加载完后执行
        window.onload = function () {
            var button = document.getElementById("btn");
            button.innerHTML = "修改按钮";
            button.onmousemove = function () {
                alert("点了");
            };
        }
    </script>
</head>

DOM的方法

通过document对象调用方法	说明
`getElementById`	通过`id`属性获取一个元素节点对象
`getElementsByTagName`	通过`标签名`获取一组元素节点对象
`getElementsByName`	通过`name`属性获取一组元素节点对象
`getElementsByClassName`	通过`class`属性获取一组元素节点对象
`querySelector`	通过CSS选择器获取对应节点对象如果多个节点满足条件，只会返回第一个
`querySelectorAll`	通过CSS选择器获取所有对应节点对象

var buttons = document.getElementsByTagName("button")
var nameButton = document.getElementsByName("name")[0];
var classes = document.getElementsByClassName("box");
var outer = document.querySelector(".outer ol");
var lis = document.querySelectorAll(".outer ol li");

元素获取子节点	说明
`getElementsByTagName`	方法,返回当前节点的指定标签名后代节点
`childNodes`	属性，表示当前节点的所有子节点
`firstChild`	属性,表示当前节点的第一个子节点
`lastChild`	属性,表示当前节点的最后一个子节点

var div = document.getElementById("outer");
var lis = div.getElementsByTagName("li");
var children = div.childNodes;
var firstChild = div.firstChild;
var lastChild = div.lastChild;

元素获取父节点和兄弟节点	说明
`parentNode`	属性，获取当前节点的父节点
`previousSibling`	属性，获取当前节点的前一个兄弟节点
`previousElementSibling`	属性，获取当前节点的前一个不是`#text`的兄弟节点
`nextSibling`	属性，获取当前节点的后一个兄弟节点
`nextElementSibling`	属性，获取当前节点的后一个不是`#text`的兄弟节点

var parentNode = nameButton.parentNode;
var front = nameButton.previousSibling;
front = nameButton.previousElementSibling;
var next = nameButton.nextSibling;
next = nameButton.nextElementSibling;

其他：

 var body = document.body;
var html = document.documentElement;
var all = document.all;
all = document.getElementsByTagName("*");

DOM增删改
增:

  //创建一个元素节点对象
 var newLi = document.createElement("li");
//创建一个文本节点对象
 var text = document.createTextNode("山东");
//向父元素添加子节点
newLi.appendChild(text);
ol.appendChild(newLi);

插入：

ol.insertBefore(newLi,firstChild);

替换：

ol.replaceChild(newLi,firstChild);

删除：

ol.removeChild(firstChild);

另外还可以通过innerHTML 直接添加修改,一般不这样做

ol.innerHTML += "<li>山东</li>";

推荐配合使用：

var li = document.createElement("li");
li.innerHTML = "山东";
ol.appendChild(li);

操作内联样式（CSS）
通过js修改元素的CSS样式：
语法：元素.style.样式名 = 样式值；
原理是修改的内联样式，所以优先级高，修改后立即生效，如果样式有!important，这种方式修改会失效。

box1.style.width = "300px";
box1.style.height = "300px";
box1.style.backgroundColor = "#cfc456";

注意：样式值是字符串。

读取：
元素.style.样式名方式修改和读取都是内联样式，所以样式表里的读取不到；

window.getComputedStyle 能读取当前元素显示的样式。

var style = window.getComputedStyle(box1);

注意：window.getComputedStyle方法获取到的style是只读的，不能修改。

其他：
clientWidth和clientHeight获取元素可见宽高，返回的是盒子的内容+内边距。
属性只读。

box1.clientWidth；

offsetWidth和offsetHeight返回的是盒子的内容+内边距+边框。
offsetParent获取当前元素的定位父元素。
offsetLeft和offsetTop当前元素相对定位父元素的偏移量。
scrollHeight、scrollWidth、scrollLeft、scrollTop滚动区域宽高、水平或垂直方向滚动距离
滚动到底部：scrollHeight - scrollTop = clientHeight
滚动到最右侧：scrollWidth - scrollLeft = clientWidth

事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递给响应函数；
在事件对下账中封装了事件相关的一切信息，例如鼠标的坐标，键盘哪个按键被按下，鼠标滚轮滚动的方向。

box1.onmousemove = function (even) {
    var x = even.clientX;
    var y = even.clientY;
 }

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

js-DOM

推荐阅读更多精彩内容