javaScript的学习笔记....DOM

DOM是Document Object Model文档对象模型

一个网页，为一个文档；

网页中每个部分都是节点，常用的节点分为，文档节点，元素节点，属性节点，文本节点；

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

———————-
如果需要读取元素节点属性，直接使用元素.属性名，例如元素.id，元素.name，元素.value，等等，唯独class属性时需要使用元素.className;
———————-
在整个页面上找；
document.getElementByTagName(“li”),
在div标签内找；

Var div = document.getElementById(‘div’); div.getElementsByTagName(‘li’); ————————-

ul的字节点；
childNodes：获取所有子节点；
ChildNodes:返回结果为9个，包含5个text，4个li；因为上图的黄色涂鸦为text，
如果标签按如下图所写的话，就没有text，返回结果就是4个了；

children：获取所有子元素；
利用children返回的就是4个li了；
firstchild：获取第一个子节点；包括上面情况的text空白；
firstElementChild；获取第一个子元素；

parentNode：父节点
previousSibling：前兄弟节点
previousElementSibling：前兄弟元素
nextSibing；
nextElementSibing；

———————————-
获取body和html标签；
var body = document.body；
var html = document.documentElement;
页面中所有的元素：document.all；
document.getElementsBytagName(‘*’)

————————————
可以根据css选择器来查询一个元素节点对象；
document.querySelect(“.box div”);
document.querySelectAll(‘.box’);

—————————————
Js修改样式，
语法：元素.style.样式名 = 样式值；
backgroud-color需要修改为backgroudColor；
js修改的为内联样式；

获取样式
语法：元素.style.样式名
该方法只能获取内联样式；即嵌套在标签元素的样式；例

获取当前显示的样式；
语法：元素.currentStyle.样式名；
只有IE浏览器支持！！！！

在其他浏览器中可以用；
var box = document.getElementById(‘id’);
var obj = getComputedStyle（box,null）；
获取宽度；
console.log(obj.width);
需要两个参数，第一个，要获取样式的元素，第二个，可以传递一个伪元素，一般都传null；该方法会返回一个对象，对象中封装了一个当前元素的对应的样式；例如：obj.width

上面不支持IE8以下!!!

通过currentStyle和getComputedStyle方法读取到的样式都是只读的，不能修改，修改只能用style属性；

兼容所有浏览器的方法！！

——————-
其他样式：
clientWidth，clientHeight
这两个属性可以获取元素的可见宽度与高度，这些属性都不是带px的，返回都是一个数字，可以直接进行计算；获取元素高度与宽度，包括内容区加上内边距；这些属性都是只读的，例如：box.clienHeight=300,进行修改，是不可以的；
offsetWidth，offsetHeight
包括内容区，内边距，边框；

offsetParent：可以用来获取元素的定位父元素；会获取到当前元素最近的开始定位的祖先元素；与css中的positin：relative有关；如果都没有开始定位，则默认的父元素是body；

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

scrollWidth，scrollHeight
可以获取元素整个滚动区域的高度或宽度；

scrollLeft：可以获取水平滚动条滚动的距离；
scrollTop：可以获取垂直的；

当存在滚动条的时候，clientHeight的值为css中的高度减去滚动条的占的高度；
当满足scrollHeight-scrollTop == clientHeight的时候，说明滚动条到底了；
水平滚动条同上；

pageX和pageY：获取鼠标相对于当前的页面的坐标；IE8以下不支持；