传说中的DOM

DOM对象：

// 获取节点.

var redDiv = document.getElementsByTagName('div')[0];

// 创建标签类型节点

var span = document.createElement("span");

// span.innerText = "2016年8月8号";

// 创建文本类型的节点

var text = document.createTextNode("2016年8月8号");

//将文本插入到span标签中

span.appendChild(text);

// 在redDiv末尾插入span标签（写一个参数的时候，默认在末尾插入）

redDiv.appendChild(span);

// 在XXX之前插入span，下面两个参数，表将前者插入在后者之前

redDiv.insertBefore(span, redDiv.children[1]);

// 移出的方法。移除节点，先获取到对应标签,这里移除p

var p = document.getElementsByTagName("address")[0];

 redDiv.removeChild(p);// 移出div的子节点p

// 也可以这样写

p.remove();

//替换标签，参数前者为新的标签，后者为要被替换掉得标签

var h2 = document.createElement("h2");

h2.innerText = "泗泾";

h2.style.color = "blue";

redDiv.replaceChild(h2, redDiv.children[0]);

//获取各类节点的方法

childNodes：所有子节点

children：所有是标签类型的子节点

parentNode：父节点

nextSibling：下一个兄弟节点

previousSibling：上一个兄弟节点

firstChild : 第一个子节点

lastChild：最后一个子节点

DOM属性：

dom的属性：className   ，id ，innerHTML， innerText ，style。

在dom中常用的：（相对于元素来说）

// 大小 width height

console.log(box.offsetHeight);//带边框高度

console.log(box.clientHeight);//可视高度(不包含滚动条和边框等。)

console.log(box.scrollHeight);//内容总高度

// 位置 left top

console.log("----")

console.log(redDiv.offsetTop);//相对于定位父级的top值

console.log(redDiv.clientTop);//上边框的距离

box.onclick = function(){

console.log(box.scrollTop);//box滚动上去的那一部分,不能滚动的元素，scrollTop一般为0。

}

说到这里就不得不说一下clientX/Y,offsetX/Y,pageX/Y几者之间的区别了（用实例来说）：

var box = document.getElementsByClassName("box")[0];

box.onclick = function(ev){

var evObj = window.event || ev;

// target 即为触发事件的元素。如果是redDiv 被点击，那么虽然redDiv是box的子级，但是打印的就不是box了，而是redDiv(注意与this区分),也就是说触发事件的元素不一定是绑定事件的元素

// console.log(this);

console.log(evObj.target);

console.log(evObj.offsetY);//鼠标距离自身(触发事件的元素，不一定是绑定事件的元素)的Y轴的距离

console.log(evObj.clientY);//鼠标距离屏幕的Y轴的距离

console.log(evObj.pageY);//鼠标距离页面的Y轴的距离(也就是包含默认的8像素的页面的那个距离)

}

附加：窗口宽度

// inner 不包含工具栏，控制台

console.log(window.innerWidth);

// outer 包含工具栏，控制台

console.log(window.outerWidth);