一、什么是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>
<script type="text/javascript">
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>
<meta charset="utf-8" />
<style>
.aixuexi{
760px;
hight:45px;
border:1px solid green;
background:#abcdef;
}
</style>
</head>
<body>
<div id="xuexi">我要好好学习JS的知识，努力成为一名牛X的前端工程师。</div>
<script type="text/javascript">
var xuexi=document.getElementById("xuexi");
xuexi.className="aixuexi";
</script>
</body>
</html>
三、如何去获取浏览器的宽高：
1.
网页可见区域宽： 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。
2.
$(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。
3.
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的支持。
高度同上。
|
1
2
3
4
5
6
7
8
9
10
|
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>"); |