如何使用JS操作DOM以及如何获取浏览器的高和宽（不同浏览器）

一、什么是DOM：

DOM可以理解为一个访问或操作HTML各种标签的实现标准。

对于一个HTML来说，文档节点Document（看不到的）是它的根节点，对应的对象便是document对象（严格讲是子类HTMLDocument对象）。

换句话说存在一个文档节点Document，然后它有子节点，比如通过document.getElementsByTagName(“html”)，得到类型为元素节点的Element html。

二、如何去操作它

对DOM元素进行操作，须先得该元素对象。可以通过 ID 获取元素的对象。

var obj=document.getElementById("id");

得到元素对象之后，即可对DOM元素进行操作了，可以通过：

对象.style.property=value;

改变DOM元素的样式，如背景颜色，字体大小，边框等。。。

例子如下：

<p id="aixuexi">我爱学习--喜欢学习，就与大家一起来分享你的经验与技巧。。。。</p>

var aixuexi=document.getElementById("aixuexi");

aixuexi.style.color="yellowgreen";

aixuexi.style.backgroundColor="#abcdef";

aixuexi.style.border="1px solid blue";

</script>

对DOM元素样式的操作。

例如：为div添加className类。

<!DOCTYPE html>

<head>

<style>

.aixuexi{

760px;

hight:45px;

border:1px solid green;

background:#abcdef;

}

</style>

</head>

<body>

<div id="xuexi">我要好好学习JS的知识，努力成为一名牛X的前端工程师。</div>

var xuexi=document.getElementById("xuexi");

xuexi.className="aixuexi";

</script>

</body>

</html>

三、如何去获取浏览器的宽高：

网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： document.body.scrollWidth网页正文全文高： document.body.scrollHeight网页被卷去的高： document.body.scrollTop网页被卷去的左： document.body.scrollLeft网页正文部分上： window.screenTop网页正文部分左： window.screenLeft屏幕分辨率的高： window.screen.height屏幕分辨率的宽： window.screen.width屏幕可用工作区高度： window.screen.availHeight屏幕可用工作区宽度： window.screen.availWidth。

$(window).height(); //浏览器当前窗口可视区域高度$(document).height(); //浏览器当前窗口文档的高度$(document.body).height();//浏览器当前窗口文档body的高度$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度包括border padding margin$(window).width(); //浏览器当前窗口可视区域宽度$(document).width();//浏览器当前窗口文档对象宽度$(document.body).width();//浏览器当前窗口文档body的宽度$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度包括border padding margin。

IE，FireFox 差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height。

对于绝大部分浏览器使用window.innerWidth即可获取宽度，使用document.documentElement.clientWidth || document.body.clientWidth 为了实现对IE6，7的支持。

高度同上。

var w=window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
 
  var h=window.innerHeight
  || document.documentElement.clientHeight
  || document.body.clientHeight;
 
  x=document.getElementById("screen_size");
  x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"

2.获取屏幕的有效宽高

1	`document.write("屏幕可用尺寸，宽:"` `+ screen.availWidth+"，高:"+screen.availHeight);`

3.location相关（获取web服务器相关信息）

1

2

3

4

5

document.write("web 主机的域名: "+location.hostname+"<br>");
document.write("当前页面的路径和文件名: "+location.pathname+"<br>");
document.write("web 主机的端口: "+location.port+"<br>");
document.write("所使用的 web 协议: "+location.protocol+"<br>");
document.write("当前页面的url: "+location.href+"<br>");