JS-宿主对象DOM

DOM：Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。

节点Node：构成HTML文档最基本的单元，分为四类。

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

浏览器已经为我们提供了文档节点对象document，可以在页面中直接使用，文档节点代表的是整个网页。

document.getElementById();

document.innerHTML();

事件：用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动等等。

onload()事件在整个页面加载完成之后才触发，为window对象绑定一个onload事件。

DOM查询：

获取元素节点：通过document对象调用

• getElementById()：通过id属性获取一个元素节点对象
• getElementsByTagName()：通过标签名获取一组元素节点对象
• getElementsByName()：通过name属性获取一组元素节点对象 （表单项）

获取元素节点的子节点：通过具体的元素节点调用

• getElementsByTagName()：返回当前节点的指定标签名后代节点
• childNodes：表示当前节点的所有子节点（会把空白文本也当成节点）
• children：表示当前节点的所有子元素（更符合需求）
• firstChild：表示当前节点的第一个子节点（会把空白文本也当成节点）
• firstElementChild：表示当前元素的第一个子元素（不支持IE8以下的浏览器）
• lastChild：表示当前节点的最后一个子节点
• parentNode：表示当前节点的父节点（父节点肯定是元素）
• previousSibling：表示当前节点的前一个兄弟节点
• previousElementSibling：表示当前节点的前一个兄弟元素
• nextSibling：表示当前节点的最后一个兄弟节点

innerhtml与innerText区别：

• innerHTML返回的是标签内的所有HTML内容，包括HTML标签
• innerText返回的是标签内的所有文本内容，不包括HTML标签（自动将标签去除）

在document中有一个属性body，它保存的是body的引用：document.body；

document.documentElement保存的是html根标签；

document.all代表页面中所有的元素；（docume.getElementsByTagName("*")）；

根据元素的class属性值查询一组元素节点对象（不支持IE8以下浏览器）：document.getElementsByClassName("box1");

document.querySelector(".box1 div"); 可以将一个css选择器的字符串作为参数，查询一个元素节点对象（只会返回第一个）。

document.querySelectorAll(".box1 div"); 用法类似，返回所有；

DOM增删改：

var li = document.createElement('li'); 创建一个元素节点，标签名作为参数。

var text = document.createTextNode('北京'); 创建文本节点；

li.appendChild(text); 向一个父节点添加子节点；

a.insertBefore(new,old); 在指定的子节点前插入新的子节点，由父节点a调用；

a.replaceChild(new,old); 使用指定的子节点替换已有的子节点，由父节点a调用；

a.removeChild(old); 删除子节点；(子节点.parentNode.removeChild(子节点);)

confirm(str); 用于弹出一个带有确认和取消的提示框；

使用DOM操作CSS样式：操作内联样式

通过JS修改元素样式，语法：元素.style.样式名 = 样式值；（内联样式，style只能读取内联样式）

获取元素当前显示样式，语法：元素.currentStyle.样式名; （CSS样式表也可读取，只有IE浏览器支持）;

其他浏览器获取样式：getComputedStyle(a,b); a要获取样式的元素，b可以传递一个伪元素，一般都传null，该方法会返回一个对象，对象中封装了当前元素对应的样式。IE8不支持。(getComputedStyle(a,null).width;)

*** currentStyle和getComputedStyle都是只读的，只能通过style修改。

- 定义一个函数，用来获取指定元素的当前样式

-参数： obj 要获取样式的元素；name 要获取的样式名

function getStyle(obj,name){
    if(window.getComputedStyle){
        //正常浏览器的方式，具有getComputeStyle()方法
        return getComputedStyle(obj,null)[name];
    }else{
        //IE8的方式，没有getComputedStyle()方法
        return obj.currentStyle[name];
    }
    //return window.getComputedStyle ? getComputedStyle(obj,null)[name] : obj.currentStyle[name];
}

其他样式相关属性：

clientWidth，clientHeight这两个属性可以获取元素的可见宽度和高度，返回数字（不带px,包括内容区和内边距）。只读属性，不可修改属性值。

offsetWidth，offsetHeight 获取元素整个的宽度和高度，包括内容区，内边距和边框，不带px。

offsetParent 可以用来获取离当前元素最近的开启了定位的祖先元素，没有则返回body。

offsetLeft 当前元素相对于其定位父元素的水平偏移量；

offsetTop 当前元素相对于其定位父元素的垂直偏移量；

scrollHeight，scrollWidth 获取元素整个滚动区域的高度

scrollLeft 获取水平滚动条滚动的距离

scrollTop 获取垂直滚动条滚动的距离

当scrollHeight - scrollTop = clientHeight时，表示垂直滚动条滑动到底了；

当scrollWidth - scrollLeft = clientWidth时，表示垂直滚动条滑动到底了；

onscroll：滚动条滚动时触发的事件；

事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个键被按下，鼠标滚轮滚动的方向等等。（IE8中将事件对象作为window对象的属性保存的）

事件冒泡（Bubble）：所谓事件的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡。

event.cancelBubble = true; // 取消冒泡

事件的委派：

- 将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

- 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

event.target 表示触发事件的对象

事件的绑定：

同一个元素的点击事件只能绑定一个onClick()事件，多个会被覆盖。

addEventListener(‘click’,callback,false)

- 通过这个方法也可以为元素绑定响应函数

- 参数：1.事件的字符串，不要on；2.回调函数，当事件触发时该函数会被调用；3.是否在捕获触发事件，需要一个布尔值，一般传false

- 使用addEventListener()可以同时为一个元素的相同事件绑定多个响应函数，当事件触发时，响应函数将会按照函数的绑定顺序执行。（IE8不支持）

- 回调函数中的this是绑定事件的对象

attachEvent(‘onclick’,callback)

- 在IE8中可以使用attachEvent()来绑定事件

- 参数：1.事件的字符串，要on；2.回调函数

- 此方法可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反。

- 回调函数中的this是window（可以使用bind函数转换this，使其指向绑定事件的对象）

事件的传播：

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。

设置对事件的捕获：obj.setCapure(); 只有IE支持

取消对事件的捕获：obj.releaseCapture(); 

拖拽：

滚轮：onmousewheel鼠标滚轮事件，会在滚轮滚动时触发（火狐不支持，需用DOMMouseScroll绑定滚轮事件）

event.wheelDelta 判断滚轮滚动的方向，正为向上，负为向下（火狐使用event.detail）

 键盘事件：一般绑定给一些可以获取到焦点的对象或者是document

onkeydown 按键按下

onkeyup 按键松开