Javascript之DOM

 

节点的属性：

 

• innerHtml:获取节点内部的html内容
• innerText：获取元素内部的文本内容，会自动将html去除

获取父节点和兄弟节点：

• parentNode:父节点，肯定是元素
• previousSibling:获取当前节点的前一个兄弟节点（也可能获取到空白的文本）
• previousElementSibling：获取前一个兄弟元素。IE8及以下不支持
• nextSibling:获取下一个兄弟节点

在事件响应函数中，事件是给谁绑定的，this就是谁

都要放在window.onload 函数中

获取body标签：

• var body = document.getElementsByTagName('body')[0]
• var body = document.body;//效果一样，更简洁

html根标签：

• var html = document.documentElement;//

页面中所有元素

• var all = document.all; 

根据css选择器查询一个元素节点对象，该方法总会返回第一个

• document.querySelector()

该方法返回所有的元素，即使只有一个，也会返回数组

• document.querySelectorAll();

通过style设置和读取的都是内联样式，无法读取样式表中的样式

获取元素的当前显示的样式：只有ie支持

• 语法：元素.currentStyle.样式名

在其他浏览器中，使用    getComputedStyle()方法来获取元素的样式，是window的方法，不支持ie8及以下

        getComputedStyle(要获取样式的元素，可以传递一个伪元素元素，一般为null)

        -该方法会返回一个对象，封装了元素对应的样式，如果没有设置默认值，会获取真实数据

clientWidth、clientHeight：

        -返回元素的可见高度和宽度；

        -包括内容和内边距，不包括滚动条；

       - 只读

        -返回的是数字，可以直接计算

offsetWidth、offsetHeight：

        返回整个元素的大小，包括边框

offsetParent：

        -获取当前元素的定位父元素

        -获取到里当前元素最近的开启定位（position值不是static）的祖先元素

offsetTop、offsetLeft：

        -当前元素相对定位父元素的偏移量

scrollWidth、scrollHeight：获取元素整个滚钉区域的高度

scrollTop、scrollLeft：返回元素滚动条滚动的距离

当滚动条拖到底部时 scrollHeight-scrollTop=clientHeight