Js操作DOM及获取浏览器高度以及宽度

Posted 2020-08-08

　　在javascript中，经常会需要获取document文档元素，是html文档对象模型的缩写，HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。

　　

　　通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

childNodes 反回当前元素所有子元素的数组，firsChild返回当前元素的第一个下级子元素，lastChild反回当前元素的最后一个子元素,nextSibling 返回紧跟在当前元素后面的元素,nodeValue指定表元素，的读/写属性 parentNode指定表示元素的父节点 previousSibling返回紧邻当前元素之前的元素。

document.getElementById是获取有指定惟一ID属性值文档中的元素。document.getElementByTagName返回当前元素中有指定标记名的子元素的数组,hasChildNodes()返回一个布尔值,指示元素是否有子元素，document.getElementBycClassName是获取文档中的类名元素，document.getElementsByName(elementName) ：通过name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。

 

　　如果想获取浏览器的宽度，有以下几种方法：

　　1.获取网页可见区域的宽度：document.body.clientWidth ;

　　2.获取网页可见区域的高度：document.body.clientHeight;

　　3.获取 网页可见区域宽：document.body.offsetWidth; (包括边线的宽度) 

　　4.获取网页可见区域高：document.body.offsetHeight ;(包括边线的宽度) 

　　5.获取网页正文全文宽：document.body.scrollWidth ;

　　6.获取网页正文全文高：document.body.scrollHeight ;

　　7.获取网页被卷去的高：document.body.scrollTop ;

　　8.获取网页被卷去的左：document.body.scrollLeft ;

　　9.获取网页正文部分上：window.screenTop ;

　　11.获取网页正文部分左：window.screenLeft; 

　　12.获取屏幕分辨率的高：window.screen.height; 

　　13.获取屏幕分辨率的宽：window.screen.width ;

　　14.屏幕可用工作区高度：window.screen.availHeight 

　　15.屏幕可用工作区宽度：window.screen.availWidth