你的位置:首页 > Java教程

[Java教程]Js操作DOM的方式及获取浏览器的宽高


我们在为页面加入一些动态效果或实现一些脚本功能时,需要对文档body中的元素进行操作,也就是,我们需要使用js或jQuery来对dom操作。下面呢,我说一下js是怎样对dom操作的。

document.write(),这既可以向文档输出文本,也可以写入代码来添加元素。

获取需要操作的元素:

利用id获取就是:document.getElementById("name");

利用class获取就是:document.getElementsByClassName("name");

利用标签获取就是:document.getElementsByClassTagName("name");

在获取的时候,我们最好用一个变量来接收,这样能避免下面再重复操作时又写一长串代码,既省了一些内存,加快了加载速度,又让我们自己轻松了一些。获取完之后,就可以对这些元素进行操作了。下面我说一下操作的方法有哪些:

以document.getElementById("name")为例,

创建新元素,追加到已有的元素上:document.getElementById("name").createElement(“”);

创建文本节点 :document.createTextNode("");

在指定的已有子节点之前插入新的子节点:document.insertBefore("");

修改元素的内容:document.getElementById("name").innerHTML="New Text";

改变元素的样式:document.getElementById("name").style.color="New Color";

添加内容:document.getElementById("name").appendChild(node);

删除已有的元素:document.getElementById("name").removeChild(child);

替换 HTML DOM 中的元素:document.getElementById("name").replaceChild(child);

还可以添加事件,

点击事件:document.getElementById("name").onclick=function(){};

页面加载事件:document.ready/document.onload;

用户进入或离开页面时,会触发onload和onunload事件。

有两个属性可以访问全部文档:

document.documentElement--全部文档;

document.body--文档的主体。

最后我说一下怎么获取浏览器的宽和高:

 document.documentElement.clientWidth--获取宽度

  document.documentElement.clientHeight--获取高度

以上便是本人对js操作dom方法的总结,如有不当、缺少之处,请多多指教。谢谢。